@laerdal/life-react-components 1.4.1-dev.8 → 1.5.0

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"}

package/dist/Banners/Banner.cjs

@@ -0,0 +1,190 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _Button = require("../Button");
+
+var _styles2 = require("./styles");
+
+var _typography = require("../styles/typography");
+
+var _HyperLink = require("../HyperLink");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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 BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ", " !important;\n  }\n"])), function (props) {
+  return props.$type ? props.$type : _styles.COLORS.correct_100;
+}, _styles.COLORS.black, function (props) {
+  return props.bottom ? 'auto' : '0';
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, function (props) {
+  return props.link;
+});
+
+var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n"])), function (props) {
+  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
+
+var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n"])));
+
+var ButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: contents;\n  ", ";\n"])), function (props) {
+  return props.$type ? (0, _styles2.getButtonStyle)(props.$type) : null;
+});
+
+var BannerContentWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
+
+var Banner = function Banner(_ref) {
+  var size = _ref.size,
+      type = _ref.type,
+      children = _ref.children,
+      bottom = _ref.bottom,
+      testId = _ref.testId,
+      linkText = _ref.linkText,
+      link = _ref.link,
+      onClose = _ref.onClose,
+      icon = _ref.icon,
+      noIcon = _ref.noIcon,
+      linkAction = _ref.linkAction;
+
+  var _React$useState = React.useState(window.innerWidth),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      width = _React$useState2[0],
+      setWidth = _React$useState2[1];
+
+  React.useEffect(function () {
+    function handleResize() {
+      setWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+  });
+  var bannerParams = {
+    typeColor: _styles.COLORS.primary_100,
+    accentColor: _styles.COLORS.primary_700,
+    hoverColor: _styles.COLORS.primary_20,
+    closeIconColor: _styles.COLORS.primary_500,
+    icon: _SystemIcons.Tip,
+    containerType: 'neutral',
+    focusBgColor: _styles.COLORS.primary_200
+  };
+  var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
+
+  if (formatTypeToLowerCase == 'warning') {
+    bannerParams.typeColor = _styles.COLORS.warning_100;
+    bannerParams.accentColor = _styles.COLORS.warning_700;
+    bannerParams.focusBgColor = _styles.COLORS.warning_200;
+    bannerParams.hoverColor = _styles.COLORS.warning_20;
+    bannerParams.icon = _SystemIcons.Help;
+    bannerParams.closeIconColor = _styles.COLORS.warning_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+  } else if (formatTypeToLowerCase == 'critical') {
+    bannerParams.typeColor = _styles.COLORS.critical_100;
+    bannerParams.accentColor = _styles.COLORS.critical_700;
+    bannerParams.focusBgColor = _styles.COLORS.critical_200;
+    bannerParams.hoverColor = _styles.COLORS.critical_20;
+    bannerParams.icon = _SystemIcons.TechnicalWarning;
+    bannerParams.closeIconColor = _styles.COLORS.critical_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+  } else if (formatTypeToLowerCase == 'positive') {
+    bannerParams.typeColor = _styles.COLORS.correct_100;
+    bannerParams.accentColor = _styles.COLORS.correct_700;
+    bannerParams.focusBgColor = _styles.COLORS.correct_200;
+    bannerParams.hoverColor = _styles.COLORS.correct_20;
+    bannerParams.icon = _SystemIcons.ThumbsUp;
+    bannerParams.closeIconColor = _styles.COLORS.correct_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
+    "data-testid": testId,
+    $type: bannerParams.typeColor,
+    link: bannerParams.accentColor,
+    hover: bannerParams.hoverColor,
+    bottom: bottom,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
+      $color: bannerParams.accentColor,
+      className: size,
+      children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(bannerParams.icon, {
+        color: bannerParams.accentColor,
+        size: "24px"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
+          size: size,
+          width: width,
+          color: bannerParams.accentColor,
+          children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
+            id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+            onClick: function onClick(e) {
+              if (linkAction) {
+                e.preventDefault();
+                linkAction(e);
+              }
+            },
+            href: link,
+            variant: "default",
+            children: linkText
+          })]
+        })
+      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+          $type: bannerParams.containerType,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            variant: "secondary",
+            shape: "circular",
+            useTransparentBackground: true,
+            focusBackgroundColor: bannerParams.focusBgColor,
+            action: function action() {
+              return onClose();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+              color: bannerParams.closeIconColor,
+              size: "24px"
+            })
+          })
+        })
+      })]
+    })
+  });
+};
+
+Banner.propTypes = {
+  type: _propTypes.default.string,
+  link: _propTypes.default.string,
+  linkText: _propTypes.default.string,
+  linkAction: _propTypes.default.func,
+  hover: _propTypes.default.string,
+  bottom: _propTypes.default.bool,
+  testId: _propTypes.default.string,
+  icon: _propTypes.default.node,
+  onClose: _propTypes.default.func,
+  noIcon: _propTypes.default.bool
+};
+var _default = Banner;
+exports.default = _default;
+//# sourceMappingURL=Banner.cjs.map