@laerdal/life-react-components 1.4.1-dev.9.full → 1.5.1-dev.10

package/dist/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Z_INDEXES","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    background-color: ${COLORS.white};\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      }\n\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem {\n  key: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (props.multi) {\n      setOpened(props.items.filter(item => item.active).map(item => item.key));\n    } else {\n      let active = props.items.find(item => !!item.active)?.key;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [props.items, props.multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.key)) {\n      setOpened(opened.filter(key => key !== item.key));\n    } else {\n      if (props.multi) {\n        setOpened([...opened, item.key]);\n      } else {\n        setOpened([item.key]);\n      }\n    }\n  }\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const isActive = opened.includes(item.key);\n\n    return (\n      <ContentAccordionItem key={item.key}\n                            id={`item_${item.key}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n                                    onMouseDown={e => e.preventDefault()}\n                                    onClick={() => !item.disabled && onItemClick(item)}\n                                    onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n          <ContentAccordionItemHeaderIcon>\n            {\n              props.multi\n                ? isActive\n                  ? <SystemIcons.Minus/>\n                  : <SystemIcons.Plus/>\n                : isActive\n                  ? <SystemIcons.ChevronDown/>\n                  : <SystemIcons.ChevronRight/>\n            }\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>\n            {item.title}\n          </ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent>\n          {\n            item.header &&\n            <ContentAccordionItemContentHeader>\n              {item.header}\n            </ContentAccordionItemContentHeader>\n          }\n          <ContentAccordionItemContentBody>\n            {item.body}\n          </ContentAccordionItemContentBody>\n          {\n            item.footer &&\n            <ContentAccordionItemContentFooter>\n              {item.footer}\n            </ContentAccordionItemContentFooter>\n          }\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  }\n\n  return (\n    <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n      {props.items.map(item => renderItem(item))}\n    </ContentAccordionWrapper>\n  );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
+{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    background-color: ${COLORS.white};\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      }\n\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem {\n  key: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (props.multi) {\n      setOpened(props.items.filter(item => item.active).map(item => item.key));\n    } else {\n      let active = props.items.find(item => !!item.active)?.key;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [props.items, props.multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.key)) {\n      setOpened(opened.filter(key => key !== item.key));\n    } else {\n      if (props.multi) {\n        setOpened([...opened, item.key]);\n      } else {\n        setOpened([item.key]);\n      }\n    }\n  }\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const isActive = opened.includes(item.key);\n\n    return (\n      <ContentAccordionItem key={item.key}\n                            id={`item_${item.key}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n                                    onMouseDown={defaultOnMouseDownHandler}\n                                    onClick={() => !item.disabled && onItemClick(item)}\n                                    onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n          <ContentAccordionItemHeaderIcon>\n            {\n              props.multi\n                ? isActive\n                  ? <SystemIcons.Minus/>\n                  : <SystemIcons.Plus/>\n                : isActive\n                  ? <SystemIcons.ChevronDown/>\n                  : <SystemIcons.ChevronRight/>\n            }\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>\n            {item.title}\n          </ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent>\n          {\n            item.header &&\n            <ContentAccordionItemContentHeader>\n              {item.header}\n            </ContentAccordionItemContentHeader>\n          }\n          <ContentAccordionItemContentBody>\n            {item.body}\n          </ContentAccordionItemContentBody>\n          {\n            item.footer &&\n            <ContentAccordionItemContentFooter>\n              {item.footer}\n            </ContentAccordionItemContentFooter>\n          }\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  }\n\n  return (\n    <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n      {props.items.map(item => renderItem(item))}\n    </ContentAccordionWrapper>\n  );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}

package/dist/Accordion/index.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AccordionMenu", {
+  enumerable: true,
+  get: function get() {
+    return _AccordionMenu.default;
+  }
+});
+Object.defineProperty(exports, "AccordionMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _AccordionMenu.default;
+  }
+});
+Object.defineProperty(exports, "AccordionMenuWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _styles.AccordionMenuWrapper;
+  }
+});
+Object.defineProperty(exports, "ContentAccordion", {
+  enumerable: true,
+  get: function get() {
+    return _ContentAccordion.ContentAccordion;
+  }
+});
+
+var _AccordionMenu = _interopRequireDefault(require("./AccordionMenu"));
+
+var _ContentAccordion = require("./ContentAccordion");
+
+var _styles = require("./styles");
+//# sourceMappingURL=index.cjs.map

package/dist/Accordion/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA","sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"file":"index.cjs"}

package/dist/Accordion/styles.cjs

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.HeaderIconContainer = exports.AccordionMenuWrapper = exports.AccordionItemContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var AccordionMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+
+exports.AccordionMenuWrapper = AccordionMenuWrapper;
+
+var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ", ";\n"])), function (props) {
+  return props.displaySeparator ? "1px solid ".concat(_styles.COLORS.neutral_100) : '';
+});
+
+exports.AccordionItemContainer = AccordionItemContainer;
+
+var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ", ";\n  cursor: pointer;\n  \n  ", "\n  \n  \n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n\n  :focus:not(:active){\n    z-index: ", ";\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n  }\n\n  :hover  {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active  {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n    box-shadow: none;\n  }\n\n  &.active{\n    color: ", ";\n  }\n  \n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
+
+exports.ItemHeaderContainer = ItemHeaderContainer;
+
+var HeaderIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: auto;\n"])));
+
+exports.HeaderIconContainer = HeaderIconContainer;
+
+var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  margin: ", ";\n  background: ", ";\n"])), function (props) {
+  return props.padding || '0px 16px';
+}, function (props) {
+  return props.margin || '12px 0';
+}, _styles.COLORS.white);
+
+exports.ItemBodyContainer = ItemBodyContainer;
+//# sourceMappingURL=styles.cjs.map

package/dist/Accordion/styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","neutral_20","ComponentTextStyle","Regular","neutral_600","Z_INDEXES","focus","primary_500","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AASA,IAAMC,mBAAmB,GAAGP,0BAAOC,GAAV,m0BAMhBI,eAAOG,UANS,EAS5B,+BAAkBC,2BAAmBC,OAArC,EAA8CL,eAAOM,WAArD,CAT4B,EAmBjBC,oBAAUC,KAnBO,EAoBDR,eAAOS,WApBN,EAoBkCT,eAAOS,WApBzC,EAwBdT,eAAOU,UAxBO,EAyBnBV,eAAOW,WAzBY,EA0BjBJ,oBAAUK,KA1BO,EA8BnBZ,eAAOa,WA9BY,EA+Bdb,eAAOc,WA/BO,EAgCjBP,oBAAUQ,MAhCO,EAqCnBf,eAAOgB,WArCY,EAyCdhB,eAAOiB,KAzCO,EA0CnBjB,eAAOkB,WA1CY,EA8CjBlB,eAAOkB,WA9CU,CAAzB;;;;AAmDA,IAAMC,mBAAmB,GAAGxB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMwB,iBAAiB,GAAGzB,0BAAOC,GAAV,gJACjB,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACuB,OAAN,IAAiB,UAArB;AAAA,CADY,EAElB,UAAAvB,KAAK;AAAA,SAAIA,KAAK,CAACwB,MAAN,IAAgB,QAApB;AAAA,CAFa,EAGdtB,eAAOiB,KAHO,CAAvB","sourcesContent":["import styled, {css} from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ${COLORS.neutral_20};\n  cursor: pointer;\n  \n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  \n  \n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n\n  :focus:not(:active){\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n  }\n\n  :hover  {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active  {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n    box-shadow: none;\n  }\n\n  &.active{\n    color: ${COLORS.neutral_800};\n  }\n  \n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{padding?: string; margin?: string}>`\n  padding: ${props => props.padding || '0px 16px'};\n  margin: ${props => props.margin || '12px 0'};\n  background: ${COLORS.white};\n`;\n"],"file":"styles.cjs"}

package/dist/Accordion/styles.d.ts

@@ -2,9 +2,9 @@ export declare const AccordionMenuWrapper: import("styled-components").StyledCom
 export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {
     displaySeparator: boolean;
 }, never>;
-export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {
-    isDisabled: boolean;
-    isActive: boolean;
-}, never>;
+export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HeaderIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
+    padding?: string | undefined;
+    margin?: string | undefined;
+}, never>;

package/dist/Accordion/styles.js

@@ -1,20 +1,19 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-import styled, { css } from 'styled-components';
-import { COLORS } from '../styles';
+import styled from 'styled-components';
+import { COLORS, ComponentMStyling, ComponentTextStyle } from '../styles';
 import { Z_INDEXES } from '../styles/z-indexes';
 export var AccordionMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
 export var AccordionItemContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ", ";\n"])), function (props) {
   return props.displaySeparator ? "1px solid ".concat(COLORS.neutral_100) : '';
 });
-var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", "!important;\n  color: ", ";\n  pointer-events: none;\n  svg {\n    color: ", "!important;\n  }\n"])), COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
-export var ItemHeaderContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ", ";\n  cursor: ", ";\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  ", "\n  :hover {\n    background: ", ";\n  }\n\n  :hover .headerLabel {\n    color: ", ";\n  }\n\n  :active .headerLabel {\n    color: ", ";\n  }\n\n  :hover svg {\n    color: ", ";\n  }\n\n  :active svg {\n    color: ", ";\n  }\n\n  :active {\n    background: ", ";\n  }\n  \n  :focus:not(:active){\n    z-index: ", ";\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n  }\n"])), COLORS.neutral_20, function (props) {
-  return props.isDisabled ? 'not-allowed' : 'pointer';
+export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ", ";\n  cursor: pointer;\n  \n  ", "\n  \n  \n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n\n  :focus:not(:active){\n    z-index: ", ";\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n  }\n\n  :hover  {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active  {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n    box-shadow: none;\n  }\n\n  &.active{\n    color: ", ";\n  }\n  \n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), COLORS.neutral_20, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), Z_INDEXES.focus, COLORS.primary_500, COLORS.primary_500, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
+export var HeaderIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
+export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", ";\n  margin: ", ";\n  background: ", ";\n"])), function (props) {
+  return props.padding || '0px 16px';
 }, function (props) {
-  return props.isDisabled ? disabledState : '';
-}, COLORS.primary_20, COLORS.primary_700, COLORS.primary_800, COLORS.primary_700, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.focus, COLORS.primary_500, COLORS.primary_500);
-export var HeaderIconContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
-export var ItemBodyContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 0px 16px;\n  margin: 12px 0;\n  background: ", ";\n"])), COLORS.white);
+  return props.margin || '12px 0';
+}, COLORS.white);
 //# sourceMappingURL=styles.js.map

package/dist/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["styled","css","COLORS","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","disabledState","white","neutral_300","ItemHeaderContainer","neutral_20","isDisabled","primary_20","primary_700","primary_800","primary_100","focus","primary_500","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,IAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAV,oKAA1B;AAOP,OAAO,IAAMC,sBAAsB,GAAGN,MAAM,CAACK,GAAV,0LAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCN,MAAM,CAACO,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;AAQP,IAAMC,aAAa,GAAGT,GAAH,4LACHC,MAAM,CAACS,KADJ,EAERT,MAAM,CAACU,WAFC,EAKNV,MAAM,CAACU,WALD,CAAnB;AASA,OAAO,IAAMC,mBAAmB,GAAGb,MAAM,CAACK,GAAV,kqBAMhBH,MAAM,CAACY,UANS,EAOpB,UAACP,KAAD;AAAA,SAAYA,KAAK,CAACQ,UAAN,GAAmB,aAAnB,GAAmC,SAA/C;AAAA,CAPoB,EAa5B,UAACR,KAAD;AAAA,SAAYA,KAAK,CAACQ,UAAN,GAAmBL,aAAnB,GAAmC,EAA/C;AAAA,CAb4B,EAedR,MAAM,CAACc,UAfO,EAmBnBd,MAAM,CAACe,WAnBY,EAuBnBf,MAAM,CAACgB,WAvBY,EA2BnBhB,MAAM,CAACe,WA3BY,EA+BnBf,MAAM,CAACgB,WA/BY,EAmCdhB,MAAM,CAACiB,WAnCO,EAuCjBhB,SAAS,CAACiB,KAvCO,EAwCDlB,MAAM,CAACmB,WAxCN,EAwCkCnB,MAAM,CAACmB,WAxCzC,CAAzB;AA4CP,OAAO,IAAMC,mBAAmB,GAAGtB,MAAM,CAACK,GAAV,+FAAzB;AAIP,OAAO,IAAMkB,iBAAiB,GAAGvB,MAAM,CAACK,GAAV,wIAGdH,MAAM,CAACS,KAHO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nconst disabledState = css`\n  background: ${COLORS.white}!important;\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  svg {\n    color: ${COLORS.neutral_300}!important;\n  }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean, isActive: boolean }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ${COLORS.neutral_20};\n  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  ${(props) => (props.isDisabled ? disabledState : '')}\n  :hover {\n    background: ${COLORS.primary_20};\n  }\n\n  :hover .headerLabel {\n    color: ${COLORS.primary_700};\n  }\n\n  :active .headerLabel {\n    color: ${COLORS.primary_800};\n  }\n\n  :hover svg {\n    color: ${COLORS.primary_700};\n  }\n\n  :active svg {\n    color: ${COLORS.primary_800};\n  }\n\n  :active {\n    background: ${COLORS.primary_100};\n  }\n  \n  :focus:not(:active){\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n  padding: 0px 16px;\n  margin: 12px 0;\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
+{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","neutral_20","Regular","neutral_600","focus","primary_500","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;AAAA,OAAOA,MAAP,MAA0B,mBAA1B;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,kBAAnC,QAA4D,WAA5D;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,OAAO,IAAMC,oBAAoB,GAAGL,MAAM,CAACM,GAAV,oKAA1B;AAOP,OAAO,IAAMC,sBAAsB,GAAGP,MAAM,CAACM,GAAV,0LAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCR,MAAM,CAACS,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;AASP,OAAO,IAAMC,mBAAmB,GAAGX,MAAM,CAACM,GAAV,qzBAMhBL,MAAM,CAACW,UANS,EAS5BV,iBAAiB,CAACC,kBAAkB,CAACU,OAApB,EAA6BZ,MAAM,CAACa,WAApC,CATW,EAmBjBV,SAAS,CAACW,KAnBO,EAoBDd,MAAM,CAACe,WApBN,EAoBkCf,MAAM,CAACe,WApBzC,EAwBdf,MAAM,CAACgB,UAxBO,EAyBnBhB,MAAM,CAACiB,WAzBY,EA0BjBd,SAAS,CAACe,KA1BO,EA8BnBlB,MAAM,CAACmB,WA9BY,EA+BdnB,MAAM,CAACoB,WA/BO,EAgCjBjB,SAAS,CAACkB,MAhCO,EAqCnBrB,MAAM,CAACsB,WArCY,EAyCdtB,MAAM,CAACuB,KAzCO,EA0CnBvB,MAAM,CAACwB,WA1CY,EA8CjBxB,MAAM,CAACwB,WA9CU,CAAzB;AAmDP,OAAO,IAAMC,mBAAmB,GAAG1B,MAAM,CAACM,GAAV,+FAAzB;AAIP,OAAO,IAAMqB,iBAAiB,GAAG3B,MAAM,CAACM,GAAV,kIACjB,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACoB,OAAN,IAAiB,UAArB;AAAA,CADY,EAElB,UAAApB,KAAK;AAAA,SAAIA,KAAK,CAACqB,MAAN,IAAgB,QAApB;AAAA,CAFa,EAGd5B,MAAM,CAACuB,KAHO,CAAvB","sourcesContent":["import styled, {css} from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ${COLORS.neutral_20};\n  cursor: pointer;\n  \n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  \n  \n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n\n  :focus:not(:active){\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n  }\n\n  :hover  {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active  {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n    box-shadow: none;\n  }\n\n  &.active{\n    color: ${COLORS.neutral_800};\n  }\n  \n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{padding?: string; margin?: string}>`\n  padding: ${props => props.padding || '0px 16px'};\n  margin: ${props => props.margin || '12px 0'};\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}

package/dist/AuthPage/AuthPage.cjs

@@ -0,0 +1,80 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("../styles");
+
+var _ScreenSetsContainer = _interopRequireDefault(require("./ScreenSetsContainer"));
+
+var _Information = require("./Information");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+/**
+ * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.
+ * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).
+ * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.
+ */
+var AuthPage = function AuthPage(_ref) {
+  var showInformationSection = _ref.showInformationSection,
+      signUp = _ref.signUp,
+      signUpPlaceholderImage = _ref.signUpPlaceholderImage,
+      signInPlaceholderImage = _ref.signInPlaceholderImage,
+      signUpPlaceholderImageAlt = _ref.signUpPlaceholderImageAlt,
+      signInPlaceholderImageAlt = _ref.signInPlaceholderImageAlt,
+      signUpInformationHeader = _ref.signUpInformationHeader,
+      signInInformationHeader = _ref.signInInformationHeader,
+      signUpInformationText = _ref.signUpInformationText,
+      signInInformationText = _ref.signInInformationText,
+      screenSetsContainerId = _ref.screenSetsContainerId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [showInformationSection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Information.InformationContainer, {
+      $color: signUp ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Information.InformationContent, {
+        children: [(signUpPlaceholderImage || signInPlaceholderImage) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Information.InformationImage, {
+          src: signUp ? signUpPlaceholderImage : signInPlaceholderImage,
+          alt: signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt
+        }), (signUpInformationHeader || signInInformationHeader) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Information.InformationHeader, {
+          children: signUp ? signUpInformationHeader : signInInformationHeader
+        }), (signUpInformationText || signInInformationText) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Information.InformationText, {
+          children: signUp ? signUpInformationText : signInInformationText
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenSetsContainer.default, {
+      id: screenSetsContainerId,
+      centerContents: !showInformationSection
+    })]
+  });
+};
+
+AuthPage.propTypes = {
+  showInformationSection: _propTypes.default.bool.isRequired,
+  signUp: _propTypes.default.bool.isRequired,
+  signUpPlaceholderImage: _propTypes.default.string,
+  signInPlaceholderImage: _propTypes.default.string,
+  signUpPlaceholderImageAlt: _propTypes.default.string,
+  signInPlaceholderImageAlt: _propTypes.default.string,
+  signUpInformationHeader: _propTypes.default.string,
+  signInInformationHeader: _propTypes.default.string,
+  signUpInformationText: _propTypes.default.string,
+  signInInformationText: _propTypes.default.string,
+  screenSetsContainerId: _propTypes.default.string.isRequired
+};
+var _default = AuthPage;
+exports.default = _default;
+//# sourceMappingURL=AuthPage.cjs.map

package/dist/AuthPage/AuthPage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AuthPage/AuthPage.tsx"],"names":["AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","COLORS","accent1_20","primary_20"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AA4BA;AACA;AACA;AACA;AACA;AACA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAYI;AAAA,MAXnBC,sBAWmB,QAXnBA,sBAWmB;AAAA,MAVnBC,MAUmB,QAVnBA,MAUmB;AAAA,MATnBC,sBASmB,QATnBA,sBASmB;AAAA,MARnBC,sBAQmB,QARnBA,sBAQmB;AAAA,MAPnBC,yBAOmB,QAPnBA,yBAOmB;AAAA,MANnBC,yBAMmB,QANnBA,yBAMmB;AAAA,MALnBC,uBAKmB,QALnBA,uBAKmB;AAAA,MAJnBC,uBAImB,QAJnBA,uBAImB;AAAA,MAHnBC,qBAGmB,QAHnBA,qBAGmB;AAAA,MAFnBC,qBAEmB,QAFnBA,qBAEmB;AAAA,MADnBC,qBACmB,QADnBA,qBACmB;AACnB,sBACE;AAAA,eACGV,sBAAsB,iBACrB,qBAAC,iCAAD;AAAsB,MAAA,MAAM,EAAEC,MAAM,GAAGU,eAAOC,UAAV,GAAuBD,eAAOE,UAAlE;AAAA,6BACE,sBAAC,+BAAD;AAAA,mBACG,CAACX,sBAAsB,IAAIC,sBAA3B,kBACC,qBAAC,6BAAD;AAAkB,UAAA,GAAG,EAAEF,MAAM,GAAGC,sBAAH,GAA4BC,sBAAzD;AAAiF,UAAA,GAAG,EAAEF,MAAM,GAAGG,yBAAH,GAA+BC;AAA3H,UAFJ,EAIG,CAACC,uBAAuB,IAAIC,uBAA5B,kBAAwD,qBAAC,8BAAD;AAAA,oBAAoBN,MAAM,GAAGK,uBAAH,GAA6BC;AAAvD,UAJ3D,EAKG,CAACC,qBAAqB,IAAIC,qBAA1B,kBAAoD,qBAAC,4BAAD;AAAA,oBAAkBR,MAAM,GAAGO,qBAAH,GAA2BC;AAAnD,UALvD;AAAA;AADF,MAFJ,eAYE,qBAAC,4BAAD;AAAqB,MAAA,EAAE,EAAEC,qBAAzB;AAAgD,MAAA,cAAc,EAAE,CAACV;AAAjE,MAZF;AAAA,IADF;AAgBD,CA7BD;;;AA7BEA,EAAAA,sB;AAGAC,EAAAA,M;AAEAC,EAAAA,sB;AAEAC,EAAAA,sB;AAEAC,EAAAA,yB;AAEAC,EAAAA,yB;AAEAC,EAAAA,uB;AAEAC,EAAAA,uB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;;eAuCaX,Q","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n  /** set this to 'false' to hide the left side illustration/information section */\n  showInformationSection: boolean;\n  /** true if 'sign-up' screen-set is showing, otherwise false.\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n  signUp: boolean;\n  /** img src string for 'sign-up' placeholder image */\n  signUpPlaceholderImage?: string;\n  /** img src string for 'sign-in' placeholder image */\n  signInPlaceholderImage?: string;\n  /** img alt text string for 'sign-up' placeholder image */\n  signUpPlaceholderImageAlt?: string;\n  /** img alt text string for 'sign-in' placeholder image */\n  signInPlaceholderImageAlt?: string;\n  /** information header text string below 'sign-up' placeholder image */\n  signUpInformationHeader?: string;\n  /** information header text string below 'sign-in' placeholder image */\n  signInInformationHeader?: string;\n  /** information text string below 'sign-up' header text */\n  signUpInformationText?: string;\n  /** information text string below 'sign-in' header text */\n  signInInformationText?: string;\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n  screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n  showInformationSection,\n  signUp,\n  signUpPlaceholderImage,\n  signInPlaceholderImage,\n  signUpPlaceholderImageAlt,\n  signInPlaceholderImageAlt,\n  signUpInformationHeader,\n  signInInformationHeader,\n  signUpInformationText,\n  signInInformationText,\n  screenSetsContainerId,\n}: AuthPageProps) => {\n  return (\n    <>\n      {showInformationSection && (\n        <InformationContainer $color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n          <InformationContent>\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n            )}\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n          </InformationContent>\n        </InformationContainer>\n      )}\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n    </>\n  );\n};\n\nexport default AuthPage;\n"],"file":"AuthPage.cjs"}

package/dist/AuthPage/Information.cjs

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InformationText = exports.InformationImage = exports.InformationHeader = exports.InformationContent = exports.InformationContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _AuthPageSection = _interopRequireDefault(require("./_AuthPageSection"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var InformationContainer = (0, _styledComponents.default)(_AuthPageSection.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  background: ", ";\n\n  ", " {\n    display: flex;\n    padding-top: 56px;\n  }\n"])), function (props) {
+  return props.$color;
+}, _styles.BREAKPOINTS.MEDIUM);
+exports.InformationContainer = InformationContainer;
+
+var InformationContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ", " {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
+
+exports.InformationContent = InformationContent;
+
+var InformationHeader = _styledComponents.default.h2(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  font-weight: 300;\n  margin-bottom: 0;\n"])), (0, _typography.HeadlineXLStyling)(_styles.COLORS.black));
+
+exports.InformationHeader = InformationHeader;
+
+var InformationText = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin: 8px 0;\n"])), (0, _typography.ParagraphLStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
+
+exports.InformationText = InformationText;
+
+var InformationImage = _styledComponents.default.img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: 275px;\n  max-width: 100%;\n"])));
+
+exports.InformationImage = InformationImage;
+//# sourceMappingURL=Information.cjs.map

package/dist/AuthPage/Information.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AuthPage/Information.tsx"],"names":["InformationContainer","AuthPageSection","props","$color","BREAKPOINTS","MEDIUM","InformationContent","styled","div","LARGE","InformationHeader","h2","COLORS","black","InformationText","p","ParagraphTextStyle","Regular","neutral_600","InformationImage","img"],"mappings":";;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAG,+BAAOC,wBAAP,CAAH,0LAEjB,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAFiB,EAI7BC,oBAAYC,MAJiB,CAA1B;;;AAUA,IAAMC,kBAAkB,GAAGC,0BAAOC,GAAV,oSAQ3BJ,oBAAYK,KARe,CAAxB;;;;AAcA,IAAMC,iBAAiB,GAAGH,0BAAOI,EAAV,0IAC1B,mCAAkBC,eAAOC,KAAzB,CAD0B,CAAvB;;;;AAMA,IAAMC,eAAe,GAAGP,0BAAOQ,CAAV,kHACxB,mCAAkBC,2BAAmBC,OAArC,EAA8CL,eAAOM,WAArD,CADwB,CAArB;;;;AAKA,IAAMC,gBAAgB,GAAGZ,0BAAOa,GAAV,6HAAtB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle } from '../styles';\nimport { ComponentLStyling, HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ $color: string }>`\n  display: none;\n  background: ${(props) => props.$color};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    padding-top: 56px;\n  }\n`;\n\nexport const InformationContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ${BREAKPOINTS.LARGE} {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n`;\n\nexport const InformationHeader = styled.h2`\n  ${HeadlineXLStyling(COLORS.black)}\n  font-weight: 300;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n  height: 275px;\n  max-width: 100%;\n`;\n"],"file":"Information.cjs"}

package/dist/AuthPage/ScreenSetsContainer.cjs

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _AuthPageSection = _interopRequireDefault(require("./_AuthPageSection"));
+
+var _styles = require("../styles");
+
+var _templateObject;
+
+var ScreenSetsContainer = (0, _styledComponents.default)(_AuthPageSection.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ", ";\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ", " {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n"])), function (props) {
+  return props.centerContents ? 'center' : 'unset';
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.XLARGE);
+var _default = ScreenSetsContainer;
+exports.default = _default;
+//# sourceMappingURL=ScreenSetsContainer.cjs.map

package/dist/AuthPage/ScreenSetsContainer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"names":["ScreenSetsContainer","AuthPageSection","props","centerContents","BREAKPOINTS","MEDIUM","XLARGE"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,mBAAmB,GAAG,+BAAOC,wBAAP,CAAH,8bAGR,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,QAAvB,GAAkC,OAAvC;AAAA,CAHG,EAcrBC,oBAAYC,MAdS,EAqBrBD,oBAAYE,MArBS,CAAzB;eA4BeN,mB","sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\n"],"file":"ScreenSetsContainer.cjs"}

package/dist/AuthPage/_AuthPageSection.cjs

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _templateObject;
+
+var AuthPageSection = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ", " {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+
+var _default = AuthPageSection;
+exports.default = _default;
+//# sourceMappingURL=_AuthPageSection.cjs.map

package/dist/AuthPage/_AuthPageSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AuthPage/_AuthPageSection.tsx"],"names":["AuthPageSection","styled","section","BREAKPOINTS","MEDIUM"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,eAAe,GAAGC,0BAAOC,OAAV,kNAKjBC,oBAAYC,MALK,CAArB;;eAWeJ,e","sourcesContent":["import styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\n\nconst AuthPageSection = styled.section`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n`;\n\nexport default AuthPageSection;\n"],"file":"_AuthPageSection.cjs"}

package/dist/AuthPage/index.cjs

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AuthPage", {
+  enumerable: true,
+  get: function get() {
+    return _AuthPage.default;
+  }
+});
+Object.defineProperty(exports, "InformationContainer", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationContainer;
+  }
+});
+Object.defineProperty(exports, "InformationContent", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationContent;
+  }
+});
+Object.defineProperty(exports, "InformationHeader", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationHeader;
+  }
+});
+Object.defineProperty(exports, "InformationImage", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationImage;
+  }
+});
+Object.defineProperty(exports, "InformationText", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationText;
+  }
+});
+Object.defineProperty(exports, "ScreenSetsContainer", {
+  enumerable: true,
+  get: function get() {
+    return _ScreenSetsContainer.default;
+  }
+});
+Object.defineProperty(exports, "screenSetsErrorMessages_EN", {
+  enumerable: true,
+  get: function get() {
+    return _screenSetsErrorMessages.screenSetsErrorMessages_EN;
+  }
+});
+
+var _ScreenSetsContainer = _interopRequireDefault(require("./ScreenSetsContainer"));
+
+var _Information = require("./Information");
+
+var _AuthPage = _interopRequireDefault(require("./AuthPage"));
+
+var _screenSetsErrorMessages = require("./screenSetsErrorMessages");
+//# sourceMappingURL=index.cjs.map

package/dist/AuthPage/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AuthPage/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\nimport AuthPage from './AuthPage';\nimport { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';\n\nexport { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };\n"],"file":"index.cjs"}

package/dist/AuthPage/screenSetsErrorMessages.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.screenSetsErrorMessages_EN = void 0;
+var screenSetsErrorMessages_EN = {
+  email_already_exists: 'An account with that email already exists - try <a href class="sign-in-link" style="font-size: inherit;" data-switch-screen="gigya-login-screen">signing in</a>',
+  email_address_is_invalid: 'Invalid email address',
+  please_enter_fieldname: 'Enter your %fieldname'
+};
+exports.screenSetsErrorMessages_EN = screenSetsErrorMessages_EN;
+//# sourceMappingURL=screenSetsErrorMessages.cjs.map

package/dist/AuthPage/screenSetsErrorMessages.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AuthPage/screenSetsErrorMessages.ts"],"names":["screenSetsErrorMessages_EN","email_already_exists","email_address_is_invalid","please_enter_fieldname"],"mappings":";;;;;;AAAO,IAAMA,0BAA0B,GAAG;AACxCC,EAAAA,oBAAoB,EAClB,iKAFsC;AAGxCC,EAAAA,wBAAwB,EAAE,uBAHc;AAIxCC,EAAAA,sBAAsB,EAAE;AAJgB,CAAnC","sourcesContent":["export const screenSetsErrorMessages_EN = {\n  email_already_exists:\n    'An account with that email already exists - try <a href class=\"sign-in-link\" style=\"font-size: inherit;\" data-switch-screen=\"gigya-login-screen\">signing in</a>',\n  email_address_is_invalid: 'Invalid email address',\n  please_enter_fieldname: 'Enter your %fieldname',\n};\n"],"file":"screenSetsErrorMessages.cjs"}