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

package/dist/Modals/ModalStyles.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getNoteMessageColor = exports.getBackgroundColor = exports.StyledModalHeader = exports.ModalTitleSection = exports.ModalTitle = exports.ModalNoteSection = exports.ModalHoverModifier = exports.ModalHeaderActionsWithImage = exports.ModalHeaderActions = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.FlexContainer = exports.Column = exports.CloseButtonWrapper = exports.BackButtonWrapper = void 0;
+exports.getNoteMessageColor = exports.getBackgroundColor = exports.StyledModalHeader = exports.ModalTitleSection = exports.ModalTitle = exports.ModalNoteSection = exports.ModalHoverModifier = exports.ModalHeaderActionsWithImage = exports.ModalHeaderActions = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.ImageOverlay = exports.ImageContainer = exports.FlexContainer = exports.Column = exports.CloseButtonWrapper = exports.BackButtonWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,7 +19,7 @@ var _styles = require("../styles");
 
 var _types = require("../types");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 
 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); }
 
@@ -33,56 +33,70 @@ var ModalHeader = _styledComponents.default.section(_templateObject || (_templat
 });
 
 exports.ModalHeader = ModalHeader;
-var StyledModalHeader = (0, _styledComponents.default)(ModalHeader)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ", ";\n  img {\n    width: 100%;\n    height: ", ";\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n"])), function (props) {
-  return props.height ? "".concat(props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24), "px") : '';
+var StyledModalHeader = (0, _styledComponents.default)(ModalHeader)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ", ";\n  img {\n    width: 100%;\n    height: ", ";\n    object-fit: cover;\n    border-radius: 8px 8px 0 0;\n  }\n"])), function (props) {
+  return props.$height ? "".concat(props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24), "px") : '';
 }, function (props) {
-  return "".concat(props.height, "px");
+  return "".concat(props.$height, "px");
 });
 exports.StyledModalHeader = StyledModalHeader;
 
-var Column = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
+var ImageContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ", ";\n\n  #imgWithFallbackLoadingIndicator {\n    position: absolute;\n    left: 50%;\n    top: 0;\n  }\n"])), function (props) {
+  return "".concat(props.$height, "px");
+});
+
+exports.ImageContainer = ImageContainer;
+
+var ImageOverlay = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  content: '';\n  top: 0;\n  left: 0;\n  height: ", ";\n  width: 100%;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 8px 8px 0 0;\n\n  :after {\n    position: absolute;\n    height: ", ";\n    border-radius: 8px 8px 0 0;\n    content: '';\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: #888888;\n    mix-blend-mode: saturation;\n  }\n"])), function (props) {
+  return "".concat(props.$height, "px");
+}, function (props) {
+  return "".concat(props.$height, "px");
+});
+
+exports.ImageOverlay = ImageOverlay;
+
+var Column = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
 
 exports.Column = Column;
 
-var ModalTitleSection = _styledComponents.default.section(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"])));
+var ModalTitleSection = _styledComponents.default.section(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"])));
 
 exports.ModalTitleSection = ModalTitleSection;
 
-var ModalHeaderActionsWithImage = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n"])), function (props) {
+var ModalHeaderActionsWithImage = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n"])), function (props) {
   return !props.hasBackButton ? 'row-reverse' : 'row';
 });
 
 exports.ModalHeaderActionsWithImage = ModalHeaderActionsWithImage;
 
-var ModalHeaderActions = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: -12px -12px 0 0;\n"])));
+var ModalHeaderActions = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: -12px -12px 0 0;\n"])));
 
 exports.ModalHeaderActions = ModalHeaderActions;
 
-var FlexContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var FlexContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
 exports.FlexContainer = FlexContainer;
 
-var ModalHoverModifier = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  button:hover {\n    cursor: help !important;\n  }\n"])));
+var ModalHoverModifier = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  button:hover {\n    cursor: help !important;\n  }\n"])));
 
 exports.ModalHoverModifier = ModalHoverModifier;
 
-var CloseButtonWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  button {\n    ", "\n  }\n"])), function (props) {
-  return props.hasImage ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n            margin: -12px -12px 0 0 !important;\n          "]))) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n            left: unset;\n          "])));
+var CloseButtonWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  button {\n    ", "\n  }\n"])), function (props) {
+  return props.hasImage ? (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n            margin: -12px -12px 0 0 !important;\n          "]))) : (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n            left: unset;\n          "])));
 });
 
 exports.CloseButtonWrapper = CloseButtonWrapper;
 
-var BackButtonWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"])));
+var BackButtonWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"])));
 
 exports.BackButtonWrapper = BackButtonWrapper;
 
-var ModalTitle = _styledComponents.default.h5(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) {
+var ModalTitle = _styledComponents.default.h5(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) {
   return props.fontSize || '1.25em';
 });
 
 exports.ModalTitle = ModalTitle;
 
-var ModalNoteSection = _styledComponents.default.section(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) {
+var ModalNoteSection = _styledComponents.default.section(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) {
   return getBackgroundColor(props.state);
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';
@@ -98,7 +112,7 @@ var ModalNoteSection = _styledComponents.default.section(_templateObject14 || (_
 
 exports.ModalNoteSection = ModalNoteSection;
 
-var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n"])), function (props) {
+var ModalBody = _styledComponents.default.section(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n"])), function (props) {
   var _props$overflow;
 
   return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
@@ -112,7 +126,7 @@ var ModalBody = _styledComponents.default.section(_templateObject15 || (_templat
 
 exports.ModalBody = ModalBody;
 
-var ModalFooter = _styledComponents.default.section(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) {
+var ModalFooter = _styledComponents.default.section(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'large' ? "16px" : '8px';
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';

package/dist/Modals/ModalStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","css","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","COLORS","neutral_100","Size","Small","ModalFooter","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { scrollBarStyling } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n  margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n  border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n  border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","$height","size","ImageContainer","div","ImageOverlay","Column","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","css","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","COLORS","neutral_100","Size","Small","ModalFooter","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { scrollBarStyling } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; $height?: number }>`\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.$height ? `${props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.$height}px`};\n    object-fit: cover;\n    border-radius: 8px 8px 0 0;\n  }\n`;\n\nexport const ImageContainer = styled.div<{ $height: number }>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ${(props) => `${props.$height}px`};\n\n  #imgWithFallbackLoadingIndicator {\n    position: absolute;\n    left: 50%;\n    top: 0;\n  }\n`;\n\nexport const ImageOverlay = styled.div<{ $height: number }>`\n  position: absolute;\n  content: '';\n  top: 0;\n  left: 0;\n  height: ${(props) => `${props.$height}px`};\n  width: 100%;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 8px 8px 0 0;\n\n  :after {\n    position: absolute;\n    height: ${(props) => `${props.$height}px`};\n    border-radius: 8px 8px 0 0;\n    content: '';\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: #888888;\n    mix-blend-mode: saturation;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n  margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n  border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n  border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.cjs"}

package/dist/Modals/ModalStyles.d.ts

@@ -10,7 +10,13 @@ export declare const StyledModalHeader: import("styled-components").StyledCompon
 } & {
     marginBottom?: string | undefined;
     size?: string | undefined;
-    height?: number | undefined;
+    $height?: number | undefined;
+}, never>;
+export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
+    $height: number;
+}, never>;
+export declare const ImageOverlay: import("styled-components").StyledComponent<"div", any, {
+    $height: number;
 }, never>;
 export declare const Column: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ModalTitleSection: import("styled-components").StyledComponent<"section", any, {}, never>;

package/dist/Modals/ModalStyles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 
 import styled, { css } from 'styled-components';
 import { COLORS } from '..';
@@ -13,27 +13,35 @@ import { Size } from '../types';
 export var ModalHeader = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ", ";\n"])), function (props) {
   return props.marginBottom || '24px';
 });
-export var StyledModalHeader = styled(ModalHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ", ";\n  img {\n    width: 100%;\n    height: ", ";\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n"])), function (props) {
-  return props.height ? "".concat(props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24), "px") : '';
+export var StyledModalHeader = styled(ModalHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ", ";\n  img {\n    width: 100%;\n    height: ", ";\n    object-fit: cover;\n    border-radius: 8px 8px 0 0;\n  }\n"])), function (props) {
+  return props.$height ? "".concat(props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24), "px") : '';
 }, function (props) {
-  return "".concat(props.height, "px");
+  return "".concat(props.$height, "px");
 });
-export var Column = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
-export var ModalTitleSection = styled.section(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"])));
-export var ModalHeaderActionsWithImage = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n"])), function (props) {
+export var ImageContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ", ";\n\n  #imgWithFallbackLoadingIndicator {\n    position: absolute;\n    left: 50%;\n    top: 0;\n  }\n"])), function (props) {
+  return "".concat(props.$height, "px");
+});
+export var ImageOverlay = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  content: '';\n  top: 0;\n  left: 0;\n  height: ", ";\n  width: 100%;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 8px 8px 0 0;\n\n  :after {\n    position: absolute;\n    height: ", ";\n    border-radius: 8px 8px 0 0;\n    content: '';\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: #888888;\n    mix-blend-mode: saturation;\n  }\n"])), function (props) {
+  return "".concat(props.$height, "px");
+}, function (props) {
+  return "".concat(props.$height, "px");
+});
+export var Column = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
+export var ModalTitleSection = styled.section(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"])));
+export var ModalHeaderActionsWithImage = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n"])), function (props) {
   return !props.hasBackButton ? 'row-reverse' : 'row';
 });
-export var ModalHeaderActions = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: -12px -12px 0 0;\n"])));
-export var FlexContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var ModalHoverModifier = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  button:hover {\n    cursor: help !important;\n  }\n"])));
-export var CloseButtonWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  button {\n    ", "\n  }\n"])), function (props) {
-  return props.hasImage ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            margin: -12px -12px 0 0 !important;\n          "]))) : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            left: unset;\n          "])));
+export var ModalHeaderActions = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: -12px -12px 0 0;\n"])));
+export var FlexContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var ModalHoverModifier = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  button:hover {\n    cursor: help !important;\n  }\n"])));
+export var CloseButtonWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  button {\n    ", "\n  }\n"])), function (props) {
+  return props.hasImage ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            margin: -12px -12px 0 0 !important;\n          "]))) : css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n            left: unset;\n          "])));
 });
-export var BackButtonWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"])));
-export var ModalTitle = styled.h5(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) {
+export var BackButtonWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"])));
+export var ModalTitle = styled.h5(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) {
   return props.fontSize || '1.25em';
 });
-export var ModalNoteSection = styled.section(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) {
+export var ModalNoteSection = styled.section(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) {
   return getBackgroundColor(props.state);
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';
@@ -46,7 +54,7 @@ export var ModalNoteSection = styled.section(_templateObject14 || (_templateObje
 }, function (props) {
   return getNoteMessageColor(props.state);
 });
-export var ModalBody = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n"])), function (props) {
+export var ModalBody = styled.section(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n"])), function (props) {
   var _props$overflow;
 
   return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
@@ -57,7 +65,7 @@ export var ModalBody = styled.section(_templateObject15 || (_templateObject15 =
 }, function (props) {
   return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(COLORS.neutral_100) : 'none';
 }, scrollBarStyling(Size.Small));
-export var ModalFooter = styled.section(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) {
+export var ModalFooter = styled.section(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'large' ? "16px" : '8px';
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';

package/dist/Modals/ModalStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","scrollBarStyling","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","neutral_100","Small","ModalFooter","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,QAAuB,IAAvB;AACA,SAASC,gBAAT,QAAiC,WAAjC;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAMC,WAAW,GAAGL,MAAM,CAACM,OAAV,6KAIL,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,YAAN,IAAsB,MAAjC;AAAA,CAJK,CAAjB;AAOP,OAAO,IAAMC,iBAAiB,GAAGT,MAAM,CAACK,WAAD,CAAT,iYAMlB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,aAAkBH,KAAK,CAACG,MAAN,IAAgBH,KAAK,CAACI,IAAN,KAAe,OAAf,GAAyB,EAAzB,GAA8BJ,KAAK,CAACI,IAAN,KAAe,OAAf,GAAyB,EAAzB,GAA8B,EAA5E,CAAlB,UAAwG,EAApH;AAAA,CANkB,EAShB,UAACJ,KAAD;AAAA,mBAAcA,KAAK,CAACG,MAApB;AAAA,CATgB,CAAvB;AAmBP,OAAO,IAAME,MAAM,GAAGZ,MAAM,CAACa,GAAV,oKAAZ;AAOP,OAAO,IAAMC,iBAAiB,GAAGd,MAAM,CAACM,OAAV,yKAAvB;AAOP,OAAO,IAAMS,2BAA2B,GAAGf,MAAM,CAACa,GAAV,uLAEpB,UAACN,KAAD;AAAA,SAAY,CAACA,KAAK,CAACS,aAAP,GAAuB,aAAvB,GAAuC,KAAnD;AAAA,CAFoB,CAAjC;AAQP,OAAO,IAAMC,kBAAkB,GAAGjB,MAAM,CAACa,GAAV,uHAAxB;AAKP,OAAO,IAAMK,aAAa,GAAGlB,MAAM,CAACa,GAAV,2FAAnB;AAIP,OAAO,IAAMM,kBAAkB,GAAGnB,MAAM,CAACa,GAAV,8HAAxB;AAMP,OAAO,IAAMO,kBAAkB,GAAGpB,MAAM,CAACa,GAAV,qGAEzB,UAACN,KAAD;AAAA,SACAA,KAAK,CAACc,QAAN,GACIpB,GADJ,yIAIIA,GAJJ,+GADA;AAAA,CAFyB,CAAxB;AAaP,OAAO,IAAMqB,iBAAiB,GAAGtB,MAAM,CAACa,GAAV,qIAAvB;AAMP,OAAO,IAAMU,UAAU,GAAGvB,MAAM,CAACwB,EAAV,oIAER,UAACjB,KAAD;AAAA,SAAWA,KAAK,CAACkB,QAAN,IAAkB,QAA7B;AAAA,CAFQ,CAAhB;AAMP,OAAO,IAAMC,gBAAgB,GAAG1B,MAAM,CAACM,OAAV,yWACP,UAACC,KAAD;AAAA,SAAWoB,kBAAkB,CAACpB,KAAK,CAACqB,KAAP,CAA7B;AAAA,CADO,EAEd,UAACrB,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,YAAmC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAlF;AAAA,CAFc,EAGb,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,WAAkC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,KAAjF;AAAA,CAHa,EAIV,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,WAAkC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAjF;AAAA,CAJU,EAOhB,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,WAAkC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAjF;AAAA,CAPgB,EAchB,UAACJ,KAAD;AAAA,SAAWsB,mBAAmB,CAACtB,KAAK,CAACqB,KAAP,CAA9B;AAAA,CAdgB,CAAtB;AAkBP,OAAO,IAAME,SAAS,GAAG9B,MAAM,CAACM,OAAV,4LAER,UAACC,KAAD;AAAA;;AAAA,4BAAWA,KAAX,aAAWA,KAAX,uBAAWA,KAAK,CAAEwB,QAAlB,6DAA8B,OAA9B;AAAA,CAFQ,EAGV,UAACxB,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,aAAoC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,QAA1B,GAAqC,QAArF;AAAA,CAHU,EAKN,UAACJ,KAAD;AAAA,SAAYA,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEyB,iBAAP,uBAAwC9B,MAAM,CAAC+B,WAA/C,IAA+D,MAA3E;AAAA,CALM,EAMH,UAAC1B,KAAD;AAAA,SAAYA,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEyB,iBAAP,uBAAwC9B,MAAM,CAAC+B,WAA/C,IAA+D,MAA3E;AAAA,CANG,EAQlB9B,gBAAgB,CAACC,IAAI,CAAC8B,KAAN,CARE,CAAf;AAWP,OAAO,IAAMC,WAAW,GAAGnC,MAAM,CAACM,OAAV,sVAIf,UAACC,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,YAAmC,KAA/C;AAAA,CAJe,EAWP,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,YAAmC,CAAAJ,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgB,OAAhB,GAA0B,MAA1B,GAAmC,MAAlF;AAAA,CAXO,EAYb,UAACJ,KAAD;AAAA,SAAY,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgBP,IAAI,CAACgC,KAArB,WAAqC,CAAA7B,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,MAAgBP,IAAI,CAAC8B,KAArB,GAA6B,KAA7B,GAAqC,KAAtF;AAAA,CAZa,EAgBXhC,MAAM,CAACmC,WAhBI,CAAjB;AAoBP,OAAO,IAAMV,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAmB;AACnD,UAAQA,KAAR;AACE,SAAK,UAAL;AACE,aAAO1B,MAAM,CAACoC,WAAd;;AACF,SAAK,SAAL;AACE,aAAOpC,MAAM,CAACqC,WAAd;;AACF,SAAK,UAAL;AACE,aAAOrC,MAAM,CAACsC,YAAd;;AACF;AACE,aAAOtC,MAAM,CAACuC,WAAd;AARJ;AAUD,CAXM;AAaP,OAAO,IAAMZ,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACD,KAAD,EAAmB;AACpD,UAAQA,KAAR;AACE,SAAK,UAAL;AACE,aAAO1B,MAAM,CAACwC,WAAd;;AACF,SAAK,SAAL;AACE,aAAOxC,MAAM,CAACyC,WAAd;;AACF,SAAK,UAAL;AACE,aAAOzC,MAAM,CAAC0C,YAAd;;AACF;AACE,aAAO1C,MAAM,CAAC2C,WAAd;AARJ;AAUD,CAXM","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { scrollBarStyling } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n  margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n  border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n  border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}
+{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","scrollBarStyling","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","$height","size","ImageContainer","div","ImageOverlay","Column","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","neutral_100","Small","ModalFooter","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { scrollBarStyling } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; $height?: number }>`\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.$height ? `${props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.$height}px`};\n    object-fit: cover;\n    border-radius: 8px 8px 0 0;\n  }\n`;\n\nexport const ImageContainer = styled.div<{ $height: number }>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ${(props) => `${props.$height}px`};\n\n  #imgWithFallbackLoadingIndicator {\n    position: absolute;\n    left: 50%;\n    top: 0;\n  }\n`;\n\nexport const ImageOverlay = styled.div<{ $height: number }>`\n  position: absolute;\n  content: '';\n  top: 0;\n  left: 0;\n  height: ${(props) => `${props.$height}px`};\n  width: 100%;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 8px 8px 0 0;\n\n  :after {\n    position: absolute;\n    height: ${(props) => `${props.$height}px`};\n    border-radius: 8px 8px 0 0;\n    content: '';\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: #888888;\n    mix-blend-mode: saturation;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n  flex: 1 1 auto;\n  overflow: ${(props) => props?.overflow ?? 'unset'};\n  margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n  border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n  border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}

package/dist/ProfileButton/ProfileButton.cjs

@@ -0,0 +1,96 @@
+"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 _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 _Iconbutton = require("../Button/Iconbutton");
+
+var _NotificationDot = require("../NotificationDot");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 PortraitOverlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  border-radius: 18px;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), _.COLORS.black);
+
+var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n\n  .initials {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  ", " {\n    display: inline;\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), _Iconbutton.StyledPrimaryIconButton, _Iconbutton.IconButtonContent, _.COLORS.neutral_100, _.COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+
+var NotificationContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
+
+var ImageWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    object-fit: cover;\n  }\n"])));
+
+var ProfileButton = function ProfileButton(_ref) {
+  var portraitSrc = _ref.portraitSrc,
+      icon = _ref.icon,
+      initials = _ref.initials,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      notificationVariant = _ref.notificationVariant,
+      className = _ref.className;
+
+  var renderIcon = function renderIcon() {
+    return portraitSrc && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: portraitSrc
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PortraitOverlay, {})]
+    }) || initials && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ComponentM, {
+      className: "initials",
+      textStyle: _typography.ComponentTextStyle.Bold,
+      color: disabled ? _.COLORS.neutral_300 : _.COLORS.white,
+      children: initials
+    }) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: icon
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.IconButton, {
+      className: className,
+      disabled: disabled,
+      action: onClick,
+      variant: "primary",
+      shape: "circular",
+      children: [renderIcon(), notificationVariant && /*#__PURE__*/(0, _jsxRuntime.jsx)(NotificationContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
+          size: _.Size.Small,
+          variant: notificationVariant
+        })
+      })]
+    })
+  });
+};
+
+ProfileButton.propTypes = {
+  portraitSrc: _propTypes.default.string,
+  icon: _propTypes.default.node,
+  initials: _propTypes.default.string,
+  onClick: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool,
+  notificationVariant: _propTypes.default.oneOf(['positive', 'critical']),
+  className: _propTypes.default.string
+};
+var _default = ProfileButton;
+exports.default = _default;
+//# sourceMappingURL=ProfileButton.cjs.map

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","Container","StyledPrimaryIconButton","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","renderIcon","ComponentTextStyle","Bold","white","Size","Small"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAYA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,2OAICC,SAAOC,KAJR,CAArB;;AAWA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,8yBAYXI,mCAZW,EAoBPC,6BApBO,EAqBaJ,SAAOK,WArBpB,EAuBGL,SAAOM,WAvBV,EA8BPT,eA9BO,EAsCPA,eAtCO,CAAf;;AA8CA,IAAMU,qBAAqB,GAAGT,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMS,YAAY,GAAGV,0BAAOC,GAAV,sPAAlB;;AAaA,IAAMU,aAA0D,GAAG,SAA7DA,aAA6D,OAAwF;AAAA,MAArFC,WAAqF,QAArFA,WAAqF;AAAA,MAAxEC,IAAwE,QAAxEA,IAAwE;AAAA,MAAlEC,QAAkE,QAAlEA,QAAkE;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,QAA+C,QAA/CA,QAA+C;AAAA,MAArCC,mBAAqC,QAArCA,mBAAqC;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;;AACzJ,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGP,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,sBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEM,+BAAmBC,IAA/D;AAAqE,MAAA,KAAK,EAAEL,QAAQ,GAAGd,SAAOM,WAAV,GAAwBN,SAAOoB,KAAnH;AAAA,gBACGR;AADH,MAPF,iBAUM;AAAA,gBAAGD;AAAH,MAXR;AAaD,GAdD;;AAgBA,sBACE,qBAAC,SAAD;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,SAAS,EAAEK,SAAvB;AAAkC,MAAA,QAAQ,EAAEF,QAA5C;AAAsD,MAAA,MAAM,EAAED,OAA9D;AAAuE,MAAA,OAAO,EAAC,SAA/E;AAAyF,MAAA,KAAK,EAAC,UAA/F;AAAA,iBACGI,UAAU,EADb,EAEGF,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEM,OAAKC,KAA5B;AAAmC,UAAA,OAAO,EAAEP;AAA5C;AADF,QAHJ;AAAA;AADF,IADF;AAYD,CA7BD;;;AArFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCC,EAAAA,S;;eA8GaP,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, IconButton, RadioButton, Size, SystemIcons } from '..';\nimport { IconButtonContent, StyledPrimaryIconButton } from '../Button/Iconbutton';\nimport { NotificationDot } from '../NotificationDot';\nimport { ComponentLStyling, ComponentM, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\ntype ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  disabled?: boolean;\n  notificationVariant?: 'positive' | 'critical';\n  className?: string;\n};\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 18px;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nconst Container = styled.div`\n  width: 48px;\n  height: 48px;\n  display: inline;\n\n  .initials {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  ${StyledPrimaryIconButton} {\n    display: inline;\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton: React.FunctionComponent<ProfileButtonProps> = ({ portraitSrc, icon, initials, onClick, disabled, notificationVariant, className }) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc} />\n          <PortraitOverlay />\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentM className=\"initials\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentM>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <Container>\n      <IconButton className={className} disabled={disabled} action={onClick} variant=\"primary\" shape=\"circular\">\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Small} variant={notificationVariant} />\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </Container>\n  );\n};\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}

package/dist/ProfileButton/ProfileButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare type ProfileButtonProps = {
+    portraitSrc?: string;
+    icon?: React.ReactNode;
+    initials?: string;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    notificationVariant?: 'positive' | 'critical';
+    className?: string;
+};
+declare const ProfileButton: React.FunctionComponent<ProfileButtonProps>;
+export default ProfileButton;

package/dist/ProfileButton/ProfileButton.js

@@ -0,0 +1,71 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, IconButton, Size } from '..';
+import { IconButtonContent, StyledPrimaryIconButton } from '../Button/Iconbutton';
+import { NotificationDot } from '../NotificationDot';
+import { ComponentM, ComponentTextStyle } from '../styles/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 18px;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), COLORS.black);
+var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n\n  .initials {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  ", " {\n    display: inline;\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), StyledPrimaryIconButton, IconButtonContent, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+var NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
+var ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    object-fit: cover;\n  }\n"])));
+
+var ProfileButton = function ProfileButton(_ref) {
+  var portraitSrc = _ref.portraitSrc,
+      icon = _ref.icon,
+      initials = _ref.initials,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      notificationVariant = _ref.notificationVariant,
+      className = _ref.className;
+
+  var renderIcon = function renderIcon() {
+    return portraitSrc && /*#__PURE__*/_jsxs(ImageWrapper, {
+      children: [/*#__PURE__*/_jsx("img", {
+        src: portraitSrc
+      }), /*#__PURE__*/_jsx(PortraitOverlay, {})]
+    }) || initials && /*#__PURE__*/_jsx(ComponentM, {
+      className: "initials",
+      textStyle: ComponentTextStyle.Bold,
+      color: disabled ? COLORS.neutral_300 : COLORS.white,
+      children: initials
+    }) || /*#__PURE__*/_jsx(_Fragment, {
+      children: icon
+    });
+  };
+
+  return /*#__PURE__*/_jsx(Container, {
+    children: /*#__PURE__*/_jsxs(IconButton, {
+      className: className,
+      disabled: disabled,
+      action: onClick,
+      variant: "primary",
+      shape: "circular",
+      children: [renderIcon(), notificationVariant && /*#__PURE__*/_jsx(NotificationContainer, {
+        children: /*#__PURE__*/_jsx(NotificationDot, {
+          size: Size.Small,
+          variant: notificationVariant
+        })
+      })]
+    })
+  });
+};
+
+ProfileButton.propTypes = {
+  portraitSrc: _pt.string,
+  icon: _pt.node,
+  initials: _pt.string,
+  onClick: _pt.func.isRequired,
+  disabled: _pt.bool,
+  notificationVariant: _pt.oneOf(['positive', 'critical']),
+  className: _pt.string
+};
+export default ProfileButton;
+//# sourceMappingURL=ProfileButton.js.map

package/dist/ProfileButton/ProfileButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","ComponentM","ComponentTextStyle","PortraitOverlay","div","black","Container","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","renderIcon","Bold","white","Small"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAmBC,MAAnB,EAAmEC,UAAnE,EAA4FC,IAA5F,QAAqH,IAArH;AACA,SAASC,iBAAT,EAA4BC,uBAA5B,QAA2D,sBAA3D;AACA,SAASC,eAAT,QAAgC,oBAAhC;AACA,SAA4BC,UAA5B,EAA2DC,kBAA3D,QAAqF,sBAArF;;;;AAYA,IAAMC,eAAe,GAAGT,MAAM,CAACU,GAAV,6NAICT,MAAM,CAACU,KAJR,CAArB;AAWA,IAAMC,SAAS,GAAGZ,MAAM,CAACU,GAAV,gyBAYXL,uBAZW,EAoBPD,iBApBO,EAqBaH,MAAM,CAACY,WArBpB,EAuBGZ,MAAM,CAACa,WAvBV,EA8BPL,eA9BO,EAsCPA,eAtCO,CAAf;AA8CA,IAAMM,qBAAqB,GAAGf,MAAM,CAACU,GAAV,gIAA3B;AAMA,IAAMM,YAAY,GAAGhB,MAAM,CAACU,GAAV,wOAAlB;;AAaA,IAAMO,aAA0D,GAAG,SAA7DA,aAA6D,OAAwF;AAAA,MAArFC,WAAqF,QAArFA,WAAqF;AAAA,MAAxEC,IAAwE,QAAxEA,IAAwE;AAAA,MAAlEC,QAAkE,QAAlEA,QAAkE;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,QAA+C,QAA/CA,QAA+C;AAAA,MAArCC,mBAAqC,QAArCA,mBAAqC;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;;AACzJ,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGP,WAAW,iBACV,MAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,KAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEZ,kBAAkB,CAACkB,IAA/D;AAAqE,MAAA,KAAK,EAAEJ,QAAQ,GAAGrB,MAAM,CAACa,WAAV,GAAwBb,MAAM,CAAC0B,KAAnH;AAAA,gBACGP;AADH,MAPF,iBAUM;AAAA,gBAAGD;AAAH,MAXR;AAaD,GAdD;;AAgBA,sBACE,KAAC,SAAD;AAAA,2BACE,MAAC,UAAD;AAAY,MAAA,SAAS,EAAEK,SAAvB;AAAkC,MAAA,QAAQ,EAAEF,QAA5C;AAAsD,MAAA,MAAM,EAAED,OAA9D;AAAuE,MAAA,OAAO,EAAC,SAA/E;AAAyF,MAAA,KAAK,EAAC,UAA/F;AAAA,iBACGI,UAAU,EADb,EAEGF,mBAAmB,iBAClB,KAAC,qBAAD;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAEpB,IAAI,CAACyB,KAA5B;AAAmC,UAAA,OAAO,EAAEL;AAA5C;AADF,QAHJ;AAAA;AADF,IADF;AAYD,CA7BD;;;AArFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,aAAsB,U,EAAa,U;AACnCC,EAAAA,S;;AA8GF,eAAeP,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, IconButton, RadioButton, Size, SystemIcons } from '..';\nimport { IconButtonContent, StyledPrimaryIconButton } from '../Button/Iconbutton';\nimport { NotificationDot } from '../NotificationDot';\nimport { ComponentLStyling, ComponentM, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\ntype ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  disabled?: boolean;\n  notificationVariant?: 'positive' | 'critical';\n  className?: string;\n};\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 18px;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nconst Container = styled.div`\n  width: 48px;\n  height: 48px;\n  display: inline;\n\n  .initials {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  ${StyledPrimaryIconButton} {\n    display: inline;\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 18px;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton: React.FunctionComponent<ProfileButtonProps> = ({ portraitSrc, icon, initials, onClick, disabled, notificationVariant, className }) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc} />\n          <PortraitOverlay />\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentM className=\"initials\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentM>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <Container>\n      <IconButton className={className} disabled={disabled} action={onClick} variant=\"primary\" shape=\"circular\">\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Small} variant={notificationVariant} />\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </Container>\n  );\n};\n\nexport default ProfileButton;\n"],"file":"ProfileButton.js"}

package/dist/ProfileButton/index.cjs

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

package/dist/ProfileButton/index.cjs.map

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

package/dist/ProfileButton/index.d.ts

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

package/dist/ProfileButton/index.js

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

package/dist/ProfileButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ProfileButton/index.tsx"],"names":["default","ProfileButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC","sourcesContent":["export { default as ProfileButton } from './ProfileButton';"],"file":"index.js"}