@laerdal/life-react-components 3.6.0 → 3.6.1

package/dist/Accordion/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","AccordionItemHeaderContainer","ComponentSStyling","ComponentTextStyle","Regular","COLORS","neutral_600","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","AccordionItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  :focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  :hover {\r\n    background: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  :active {\r\n    color: ${COLORS.primary_800};\r\n    background: ${COLORS.primary_100};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${COLORS.white}!important;\r\n    color: ${COLORS.neutral_300};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${COLORS.neutral_300}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\r\n  padding: ${(props) => props.padding || '8px 16px'};\r\n  background: ${COLORS.white};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":";;;;;;;;AAAA;AACA;AAQA;AAAgD;AAEzC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,kLAK7C;AAAC;AAIK,IAAMC,4BAA4B,GAAGF,yBAAM,CAACC,GAAG,0jCASlD,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAe/D,IAAAC,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAWjE,IAAAE,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAUjEG,mBAAW,EAICJ,cAAM,CAACK,UAAU,EACtBL,cAAM,CAACM,WAAW,EAChBC,mBAAS,CAACC,KAAK,EAIjBR,cAAM,CAACS,WAAW,EACbT,cAAM,CAACU,WAAW,EACrBH,mBAAS,CAACI,MAAM,EAIlBX,cAAM,CAACY,WAAW,EAIbZ,cAAM,CAACa,KAAK,EACjBb,cAAM,CAACc,WAAW,EAIhBd,cAAM,CAACc,WAAW,CAGhC;AAAC;AAEK,IAAMC,sBAAsB,GAAGrB,yBAAM,CAACC,GAAG,uQAMzBC,4BAA4B,EACpBI,cAAM,CAACgB,WAAW,CAEhD;AAAC;AAEK,IAAMC,0BAA0B,GAAGvB,yBAAM,CAACC,GAAG,wPACvC,UAACuB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,UAAU;AAAA,GACnCnB,cAAM,CAACa,KAAK,EAExB,IAAAhB,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGxC,UAACmB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChD,IAAAjB,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAI1C,UAACmB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChD,IAAAhB,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,CAGxD;AAAC"}
+{"version":3,"file":"styles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_zIndexes","_templateObject","_templateObject2","_templateObject3","_templateObject4","AccordionMenuWrapper","styled","div","_taggedTemplateLiteral2","exports","AccordionItemHeaderContainer","props","ComponentSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","ComponentMStyling","ComponentLStyling","focusStyles","Z_INDEXES","hover","active","AccordionItemContainer","AccordionItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  :focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  :hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  :active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${props => COLORS.getColor('white', props.theme)}!important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\r\n  padding: ${(props) => props.padding || '8px 16px'};\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Accordion/styles.js

@@ -4,11 +4,37 @@ import styled from 'styled-components';
 import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } 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 AccordionItemHeaderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\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"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, 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 AccordionItemContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), AccordionItemHeaderContainer, COLORS.neutral_100);
+export var AccordionItemHeaderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\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"])), function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
+}, focusStyles, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, Z_INDEXES.hover, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, Z_INDEXES.active, function (props) {
+  return COLORS.getColor('neutral_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+});
+export var AccordionItemContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), AccordionItemHeaderContainer, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+});
 export var AccordionItemBodyContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"])), function (props) {
   return props.padding || '8px 16px';
-}, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), function (props) {
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, ComponentSStyling(ComponentTextStyle.Regular, null), function (props) {
   return props.padding || '12px 24px';
 }, ComponentMStyling(ComponentTextStyle.Regular, null), function (props) {
   return props.padding || '14px 32px';

package/dist/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","AccordionItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  :focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  :hover {\r\n    background: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  :active {\r\n    color: ${COLORS.primary_800};\r\n    background: ${COLORS.primary_100};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${COLORS.white}!important;\r\n    color: ${COLORS.neutral_300};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${COLORS.neutral_300}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\r\n  padding: ${(props) => props.padding || '8px 16px'};\r\n  background: ${COLORS.white};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAe,mBAAmB;AAC/C,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,QACN,WAAW;AAClB,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,IAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAG,oKAK7C;AAID,OAAO,IAAMC,4BAA4B,GAAGV,MAAM,CAACS,GAAG,4iCASlDL,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAe/DT,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAWjEV,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAUjEN,WAAW,EAICL,MAAM,CAACY,UAAU,EACtBZ,MAAM,CAACa,WAAW,EAChBP,SAAS,CAACQ,KAAK,EAIjBd,MAAM,CAACe,WAAW,EACbf,MAAM,CAACgB,WAAW,EACrBV,SAAS,CAACW,MAAM,EAIlBjB,MAAM,CAACkB,WAAW,EAIblB,MAAM,CAACmB,KAAK,EACjBnB,MAAM,CAACoB,WAAW,EAIhBpB,MAAM,CAACoB,WAAW,CAGhC;AAED,OAAO,IAAMC,sBAAsB,GAAGtB,MAAM,CAACS,GAAG,yPAMzBC,4BAA4B,EACpBT,MAAM,CAACsB,WAAW,CAEhD;AAED,OAAO,IAAMC,0BAA0B,GAAGxB,MAAM,CAACS,GAAG,0OACvC,UAACgB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,UAAU;AAAA,GACnCzB,MAAM,CAACmB,KAAK,EAExBhB,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAGxC,UAACc,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChDvB,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAI1C,UAACc,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChDxB,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,CAGxD"}
+{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","_templateObject","_taggedTemplateLiteral","AccordionItemHeaderContainer","_templateObject2","props","Regular","getColor","theme","hover","active","AccordionItemContainer","_templateObject3","AccordionItemBodyContainer","_templateObject4","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles\r\n} from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\n\r\n\r\nexport const AccordionItemHeaderContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  div:last-child {\r\n    margin-left: auto;\r\n  }\r\n\r\n  padding: 0 16px;\r\n  min-height: 48px;\r\n  \r\n  svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  \r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 24px;\r\n    min-height: 56px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    padding: 0 32px;\r\n    min-height: 64px;\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  :focus:not(:active) {\r\n    ${focusStyles}\r\n  }\r\n\r\n  :hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  :active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.active {\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    background: ${props => COLORS.getColor('white', props.theme)}!important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)}!important;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  \r\n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\r\n  padding: ${(props) => props.padding || '8px 16px'};\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  \r\n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  \r\n  .medium & {\r\n    padding: ${(props) => props.padding || '12px 24px'};\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n  \r\n  .large & {\r\n    padding: ${(props) => props.padding || '14px 32px'};\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/AuthPage/AuthPage.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.AuthPageWrapper = void 0;
+exports["default"] = exports.AuthPageWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -16,11 +16,11 @@ var _Panel = require("../Panel");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-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; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var AuthPageWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var AuthPageWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 exports.AuthPageWrapper = AuthPageWrapper;
 var AuthPage = function AuthPage(_ref) {
   var screenSetsContainerId = _ref.screenSetsContainerId,
@@ -32,16 +32,16 @@ var AuthPage = function AuthPage(_ref) {
     children: [panel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel.Panel, _objectSpread(_objectSpread({}, panel), {}, {
       order: order,
       className: "panel ".concat(panel.className || '')
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenSetsContainer.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenSetsContainer["default"], {
       id: screenSetsContainerId,
       centerContents: !panel
     })]
   });
 };
 AuthPage.propTypes = {
-  order: _propTypes.default.oneOf(['default', 'reverse']),
-  screenSetsContainerId: _propTypes.default.string.isRequired
+  order: _propTypes["default"].oneOf(['default', 'reverse']),
+  screenSetsContainerId: _propTypes["default"].string.isRequired
 };
 var _default = AuthPage;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=AuthPage.cjs.map

package/dist/AuthPage/AuthPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage.cjs","names":["AuthPageWrapper","styled","div","BREAKPOINTS","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ScreenSetsContainer from './ScreenSetsContainer';\r\nimport styled from \"styled-components\";\r\nimport {Panel, PanelProps} from \"../Panel\";\r\nimport {BREAKPOINTS} from \"../styles\";\r\n\r\n\r\nexport const AuthPageWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  height: 100%;\r\n\r\n  .panel {\r\n    flex: 1;\r\n    display: none;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    .panel {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.reverse {\r\n    flex-direction: row-reverse;\r\n  }\r\n`;\r\n\r\nexport type AuthPageProps = {\r\n  panel?: PanelProps;\r\n  order?: 'default' | 'reverse';\r\n  screenSetsContainerId: string;\r\n};\r\n\r\nconst AuthPage = ({\r\n                    screenSetsContainerId,\r\n                    panel,\r\n                    order = 'default'\r\n                  }: AuthPageProps) => {\r\n  return (\r\n    <AuthPageWrapper className={order}>\r\n      {\r\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\r\n      }\r\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\r\n    </AuthPageWrapper>\r\n  );\r\n};\r\n\r\nexport default AuthPage;\r\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAG/B,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG,0TAUrCC,mBAAW,CAACC,MAAM,CASrB;AAAC;AAQF,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,sBAAC,eAAe;IAAC,SAAS,EAAEA,KAAM;IAAA,WAE9BD,KAAK,iBAAI,qBAAC,YAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,qBAAC,4BAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACzD;AAEtB,CAAC;AAAC;EAjBAC,KAAK,4BAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAAA,eAkBRD,QAAQ;AAAA"}
+{"version":3,"file":"AuthPage.cjs","names":["React","_interopRequireWildcard","require","_ScreenSetsContainer","_interopRequireDefault","_styledComponents","_Panel","_styles","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","AuthPageWrapper","styled","div","_taggedTemplateLiteral2","BREAKPOINTS","MEDIUM","exports","AuthPage","_ref","screenSetsContainerId","panel","_ref$order","order","jsxs","className","children","jsx","Panel","concat","id","centerContents","propTypes","_propTypes","oneOf","string","isRequired","_default"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ScreenSetsContainer from './ScreenSetsContainer';\r\nimport styled from \"styled-components\";\r\nimport {Panel, PanelProps} from \"../Panel\";\r\nimport {BREAKPOINTS} from \"../styles\";\r\n\r\n\r\nexport const AuthPageWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  height: 100%;\r\n\r\n  .panel {\r\n    flex: 1;\r\n    display: none;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    .panel {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.reverse {\r\n    flex-direction: row-reverse;\r\n  }\r\n`;\r\n\r\nexport type AuthPageProps = {\r\n  panel?: PanelProps;\r\n  order?: 'default' | 'reverse';\r\n  screenSetsContainerId: string;\r\n};\r\n\r\nconst AuthPage = ({\r\n                    screenSetsContainerId,\r\n                    panel,\r\n                    order = 'default'\r\n                  }: AuthPageProps) => {\r\n  return (\r\n    <AuthPageWrapper className={order}>\r\n      {\r\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\r\n      }\r\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\r\n    </AuthPageWrapper>\r\n  );\r\n};\r\n\r\nexport default AuthPage;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/AuthPage/AuthPage.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { PanelProps } from "../Panel";
 export declare const AuthPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export type AuthPageProps = {
@@ -6,5 +6,5 @@ export type AuthPageProps = {
     order?: 'default' | 'reverse';
     screenSetsContainerId: string;
 };
-declare const AuthPage: ({ screenSetsContainerId, panel, order }: AuthPageProps) => JSX.Element;
+declare const AuthPage: ({ screenSetsContainerId, panel, order }: AuthPageProps) => React.JSX.Element;
 export default AuthPage;

package/dist/AuthPage/AuthPage.js

@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _templateObject;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
 import ScreenSetsContainer from './ScreenSetsContainer';
 import styled from "styled-components";

package/dist/AuthPage/AuthPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage.js","names":["React","ScreenSetsContainer","styled","Panel","BREAKPOINTS","AuthPageWrapper","div","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ScreenSetsContainer from './ScreenSetsContainer';\r\nimport styled from \"styled-components\";\r\nimport {Panel, PanelProps} from \"../Panel\";\r\nimport {BREAKPOINTS} from \"../styles\";\r\n\r\n\r\nexport const AuthPageWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  height: 100%;\r\n\r\n  .panel {\r\n    flex: 1;\r\n    display: none;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    .panel {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.reverse {\r\n    flex-direction: row-reverse;\r\n  }\r\n`;\r\n\r\nexport type AuthPageProps = {\r\n  panel?: PanelProps;\r\n  order?: 'default' | 'reverse';\r\n  screenSetsContainerId: string;\r\n};\r\n\r\nconst AuthPage = ({\r\n                    screenSetsContainerId,\r\n                    panel,\r\n                    order = 'default'\r\n                  }: AuthPageProps) => {\r\n  return (\r\n    <AuthPageWrapper className={order}>\r\n      {\r\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\r\n      }\r\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\r\n    </AuthPageWrapper>\r\n  );\r\n};\r\n\r\nexport default AuthPage;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,KAAK,QAAmB,UAAU;AAC1C,SAAQC,WAAW,QAAO,WAAW;AAAC;AAAA;AAGtC,OAAO,IAAMC,eAAe,GAAGH,MAAM,CAACI,GAAG,4SAUrCF,WAAW,CAACG,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,MAAC,eAAe;IAAC,SAAS,EAAEA,KAAM;IAAA,WAE9BD,KAAK,iBAAI,KAAC,KAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,KAAC,mBAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACzD;AAEtB,CAAC;AAAC;EAjBAC,KAAK,aAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAkBvB,eAAeD,QAAQ"}
+{"version":3,"file":"AuthPage.js","names":["React","ScreenSetsContainer","styled","Panel","BREAKPOINTS","jsx","_jsx","jsxs","_jsxs","AuthPageWrapper","div","_templateObject","_taggedTemplateLiteral","MEDIUM","AuthPage","_ref","screenSetsContainerId","panel","_ref$order","order","className","children","_objectSpread","concat","id","centerContents","propTypes","_pt","oneOf","string","isRequired"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ScreenSetsContainer from './ScreenSetsContainer';\r\nimport styled from \"styled-components\";\r\nimport {Panel, PanelProps} from \"../Panel\";\r\nimport {BREAKPOINTS} from \"../styles\";\r\n\r\n\r\nexport const AuthPageWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  height: 100%;\r\n\r\n  .panel {\r\n    flex: 1;\r\n    display: none;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    .panel {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  &.reverse {\r\n    flex-direction: row-reverse;\r\n  }\r\n`;\r\n\r\nexport type AuthPageProps = {\r\n  panel?: PanelProps;\r\n  order?: 'default' | 'reverse';\r\n  screenSetsContainerId: string;\r\n};\r\n\r\nconst AuthPage = ({\r\n                    screenSetsContainerId,\r\n                    panel,\r\n                    order = 'default'\r\n                  }: AuthPageProps) => {\r\n  return (\r\n    <AuthPageWrapper className={order}>\r\n      {\r\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\r\n      }\r\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\r\n    </AuthPageWrapper>\r\n  );\r\n};\r\n\r\nexport default AuthPage;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,KAAK,QAAmB,UAAU;AAC1C,SAAQC,WAAW,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGtC,OAAO,IAAMC,eAAe,GAAGP,MAAM,CAACQ,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,+OAUrCR,WAAW,CAACS,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAIyB;EAAA,IAHnBC,qBAAqB,GAAAD,IAAA,CAArBC,qBAAqB;IACrBC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,UAAA,GAAAH,IAAA,CACLI,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;EAEnC,oBACEV,KAAA,CAACC,eAAe;IAACW,SAAS,EAAED,KAAM;IAAAE,QAAA,GAE9BJ,KAAK,iBAAIX,IAAA,CAACH,KAAK,EAAAmB,aAAA,CAAAA,aAAA,KAAKL,KAAK;MAAEE,KAAK,EAAEA,KAAM;MAACC,SAAS,WAAAG,MAAA,CAAWN,KAAK,CAACG,SAAS,IAAI,EAAE;IAAG,EAAC,CAAC,eAEzFd,IAAA,CAACL,mBAAmB;MAACuB,EAAE,EAAER,qBAAsB;MAACS,cAAc,EAAE,CAACR;IAAM,CAAC,CAAC;EAAA,CAC1D,CAAC;AAEtB,CAAC;AAACH,QAAA,CAAAY,SAAA;EAjBAP,KAAK,EAAAQ,GAAA,CAAAC,KAAA,EAAG,SAAS,EAAG,SAAS;EAC7BZ,qBAAqB,EAAAW,GAAA,CAAAE,MAAA,CAAAC;AAAA;AAkBvB,eAAehB,QAAQ","ignoreList":[]}

package/dist/AuthPage/ScreenSetsContainer.cjs

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+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 ScreenSetsContainer = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\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    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"])), function (props) {
+var ScreenSetsContainer = _styledComponents["default"].section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\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    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"])), function (props) {
   return props.centerContents ? 'center' : 'unset';
 }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 var _default = ScreenSetsContainer;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=ScreenSetsContainer.cjs.map

package/dist/AuthPage/ScreenSetsContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSetsContainer.cjs","names":["ScreenSetsContainer","styled","section","props","centerContents","BREAKPOINTS","MEDIUM","LARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst ScreenSetsContainer = styled.section<{ centerContents: boolean }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n  box-sizing: border-box;\r\n\r\n  padding: 8px;\r\n  width: 100%;\r\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\r\n\r\n  .gigya-screen-caption {\r\n    display: none;\r\n  }\r\n\r\n  .gigya-screen {\r\n    max-width: 100%;\r\n    margin: auto;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    padding: 24px;\r\n    width: 50%;\r\n\r\n    .gigya-screen {\r\n      margin: 0;\r\n      padding: 36px 25px !important;\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    .gigya-screen {\r\n      max-width: 550px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport default ScreenSetsContainer;\r\n"],"mappings":";;;;;;;;AAAA;AACA;AAAsC;AAEtC,IAAMA,mBAAmB,GAAGC,yBAAM,CAACC,OAAO,8iBAQzB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,QAAQ,GAAG,OAAO;AAAA,CAAC,EAWjEC,mBAAW,CAACC,MAAM,EAUlBD,mBAAW,CAACE,KAAK,CAKpB;AAAC,eAEaP,mBAAmB;AAAA"}
+{"version":3,"file":"ScreenSetsContainer.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_templateObject","ScreenSetsContainer","styled","section","_taggedTemplateLiteral2","props","centerContents","BREAKPOINTS","MEDIUM","LARGE","_default","exports"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst ScreenSetsContainer = styled.section<{ centerContents: boolean }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n  box-sizing: border-box;\r\n\r\n  padding: 8px;\r\n  width: 100%;\r\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\r\n\r\n  .gigya-screen-caption {\r\n    display: none;\r\n  }\r\n\r\n  .gigya-screen {\r\n    max-width: 100%;\r\n    margin: auto;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    padding: 24px;\r\n    width: 50%;\r\n\r\n    .gigya-screen {\r\n      margin: 0;\r\n      padding: 36px 25px !important;\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    .gigya-screen {\r\n      max-width: 550px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport default ScreenSetsContainer;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAsC,IAAAE,eAAA;AAEtC,IAAMC,mBAAmB,GAAGC,4BAAM,CAACC,OAAO,CAAAH,eAAA,KAAAA,eAAA,OAAAI,uBAAA,+eAQzB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,QAAQ,GAAG,OAAO;AAAA,CAAC,EAWjEC,mBAAW,CAACC,MAAM,EAUlBD,mBAAW,CAACE,KAAK,CAKpB;AAAC,IAAAC,QAAA,GAEaT,mBAAmB;AAAAU,OAAA,cAAAD,QAAA","ignoreList":[]}

package/dist/AuthPage/ScreenSetsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSetsContainer.js","names":["styled","BREAKPOINTS","ScreenSetsContainer","section","props","centerContents","MEDIUM","LARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst ScreenSetsContainer = styled.section<{ centerContents: boolean }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n  box-sizing: border-box;\r\n\r\n  padding: 8px;\r\n  width: 100%;\r\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\r\n\r\n  .gigya-screen-caption {\r\n    display: none;\r\n  }\r\n\r\n  .gigya-screen {\r\n    max-width: 100%;\r\n    margin: auto;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    padding: 24px;\r\n    width: 50%;\r\n\r\n    .gigya-screen {\r\n      margin: 0;\r\n      padding: 36px 25px !important;\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    .gigya-screen {\r\n      max-width: 550px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport default ScreenSetsContainer;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,mBAAmB,GAAGF,MAAM,CAACG,OAAO,giBAQzB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,QAAQ,GAAG,OAAO;AAAA,CAAC,EAWjEJ,WAAW,CAACK,MAAM,EAUlBL,WAAW,CAACM,KAAK,CAKpB;AAED,eAAeL,mBAAmB"}
+{"version":3,"file":"ScreenSetsContainer.js","names":["styled","BREAKPOINTS","ScreenSetsContainer","section","_templateObject","_taggedTemplateLiteral","props","centerContents","MEDIUM","LARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst ScreenSetsContainer = styled.section<{ centerContents: boolean }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n  box-sizing: border-box;\r\n\r\n  padding: 8px;\r\n  width: 100%;\r\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\r\n\r\n  .gigya-screen-caption {\r\n    display: none;\r\n  }\r\n\r\n  .gigya-screen {\r\n    max-width: 100%;\r\n    margin: auto;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    padding: 24px;\r\n    width: 50%;\r\n\r\n    .gigya-screen {\r\n      margin: 0;\r\n      padding: 36px 25px !important;\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    .gigya-screen {\r\n      max-width: 550px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport default ScreenSetsContainer;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,mBAAmB,GAAGF,MAAM,CAACG,OAAO,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,meAQzB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,QAAQ,GAAG,OAAO;AAAA,CAAC,EAWjEN,WAAW,CAACO,MAAM,EAUlBP,WAAW,CAACQ,KAAK,CAKpB;AAED,eAAeP,mBAAmB","ignoreList":[]}

package/dist/AuthPage/__tests__/AuthPage.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import '@testing-library/jest-dom';
+import { AuthPage, Size, SystemIcons } from '../..';
+import 'jest-styled-components';
+
+
+
+
+describe('<AuthPage />', () => {
+  it('Renders AuthPage component', async () => {
+    const { getByText, container, getByTestId } = render(
+      <AuthPage
+        screenSetsContainerId="gigya_test"
+        panel={{
+          title: 'Sign in header',
+          content: 'Sign in information',
+        }}
+      />,
+    );
+    //expect gygia container displayed
+    expect(container.querySelector('[id="gigya_test"]')).toBeTruthy();
+    //expect sign in header and info text displayed
+    expect(getByText('Sign in header')).toBeTruthy();
+    expect(getByText('Sign in information')).toBeTruthy();
+  });
+});

package/dist/AuthPage/index.cjs

@@ -11,13 +11,13 @@ var _exportNames = {
 Object.defineProperty(exports, "AuthPage", {
   enumerable: true,
   get: function get() {
-    return _AuthPage.default;
+    return _AuthPage["default"];
   }
 });
 Object.defineProperty(exports, "ScreenSetsContainer", {
   enumerable: true,
   get: function get() {
-    return _ScreenSetsContainer.default;
+    return _ScreenSetsContainer["default"];
   }
 });
 var _ScreenSetsContainer = _interopRequireWildcard(require("./ScreenSetsContainer"));
@@ -44,6 +44,6 @@ Object.keys(_AuthPage).forEach(function (key) {
     }
   });
 });
-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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 //# sourceMappingURL=index.cjs.map

package/dist/AuthPage/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["export * from './ScreenSetsContainer';\r\nexport * from './AuthPage';\r\n\r\nexport { default as ScreenSetsContainer } from './ScreenSetsContainer';\r\nexport { default as AuthPage } from './AuthPage';"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAA2B;AAAA"}
+{"version":3,"file":"index.cjs","names":["_ScreenSetsContainer","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_AuthPage","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["export * from './ScreenSetsContainer';\r\nexport * from './AuthPage';\r\n\r\nexport { default as ScreenSetsContainer } from './ScreenSetsContainer';\r\nexport { default as AuthPage } from './AuthPage';"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,oBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAJ,oBAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,oBAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,oBAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,SAAA,GAAAd,uBAAA,CAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAW,SAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,SAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,SAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AAA2B,SAAAU,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAhB,wBAAAgB,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAN,GAAA,CAAAG,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAApB,cAAA,CAAAC,IAAA,CAAAQ,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAf,GAAA,IAAAe,CAAA,CAAAC,GAAA,IAAA3B,MAAA,CAAAS,cAAA,CAAAY,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,cAAAP,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA","ignoreList":[]}

package/dist/AuthPage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","ScreenSetsContainer","AuthPage"],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["export * from './ScreenSetsContainer';\r\nexport * from './AuthPage';\r\n\r\nexport { default as ScreenSetsContainer } from './ScreenSetsContainer';\r\nexport { default as AuthPage } from './AuthPage';"],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,YAAY;AAE1B,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,uBAAuB;AACtE,SAASD,OAAO,IAAIE,QAAQ,QAAQ,YAAY"}
+{"version":3,"file":"index.js","names":["default","ScreenSetsContainer","AuthPage"],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["export * from './ScreenSetsContainer';\r\nexport * from './AuthPage';\r\n\r\nexport { default as ScreenSetsContainer } from './ScreenSetsContainer';\r\nexport { default as AuthPage } from './AuthPage';"],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,YAAY;AAE1B,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,uBAAuB;AACtE,SAASD,OAAO,IAAIE,QAAQ,QAAQ,YAAY","ignoreList":[]}

package/dist/Banners/Banner.cjs

@@ -5,14 +5,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BannerContentWrapperStyles = exports.BannerContainerStyles = exports.BannerCloseButtonWrapperStyles = exports.BannerCloseButtonContainerStyles = exports.BannerCenterStyles = void 0;
+exports["default"] = exports.BannerContentWrapperStyles = exports.BannerContainerStyles = exports.BannerCloseButtonWrapperStyles = exports.BannerCloseButtonContainerStyles = exports.BannerCenterStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 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 _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
 var _icons = require("../icons");
 var _Button = require("../Button");
@@ -22,13 +22,18 @@ var _utils = require("../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
 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; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var BannerContainerStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\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  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
-  return props.$type ? props.$type : _styles.COLORS.correct_100;
-}, _styles.COLORS.black, function (props) {
+/**
+ * Styles for <Banner />
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var BannerContainerStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\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  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
+  return props.$type ? props.$type : _styles.COLORS.getColor('correct_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('black', props.theme);
+}, function (props) {
   return props.bottom ? 'auto' : '0';
 }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _HyperLink.StyledLink, function (props) {
   return props.link;
@@ -36,18 +41,21 @@ var BannerContainerStyles = _styledComponents.default.div(_templateObject || (_t
   return props.linkVisited;
 }, function (props) {
   return props.linkFocused;
-}, _styles.COLORS.white);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
 exports.BannerContainerStyles = BannerContainerStyles;
-var BannerCenterStyles = _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 64px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 32px;\n    }\n    ", " {\n      margin: 0 64px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 32px;\n    }\n\n    &.large {\n      margin: 0 64px;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
+var BannerCenterStyles = _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 64px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 32px;\n    }\n    ", " {\n      margin: 0 64px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 32px;\n    }\n\n    &.large {\n      margin: 0 64px;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 exports.BannerCenterStyles = BannerCenterStyles;
-var BannerCloseButtonWrapperStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n"])));
+var BannerCloseButtonWrapperStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0 0 0 auto;\n"])));
 exports.BannerCloseButtonWrapperStyles = BannerCloseButtonWrapperStyles;
-var BannerCloseButtonContainerStyles = _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 BannerCloseButtonContainerStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: contents;\n  ", ";\n"])), function (props) {
+  return props.$type ? (0, _styles2.getButtonStyle)(props.$type, props.theme) : null;
 });
 exports.BannerCloseButtonContainerStyles = BannerCloseButtonContainerStyles;
-var BannerContentWrapperStyles = _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 BannerContentWrapperStyles = _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"])));
 exports.BannerContentWrapperStyles = BannerContentWrapperStyles;
+/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
 var Banner = function Banner(_ref) {
   var size = _ref.size,
     _ref$type = _ref.type,
@@ -63,9 +71,10 @@ var Banner = function Banner(_ref) {
     linkAction = _ref.linkAction,
     fullWidth = _ref.fullWidth,
     className = _ref.className,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var theme = (0, _styledComponents.useTheme)();
   var _React$useState = React.useState((0, _utils.hasWindow)() ? window.innerWidth : -1),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     width = _React$useState2[0],
     setWidth = _React$useState2[1];
   React.useEffect(function () {
@@ -78,46 +87,42 @@ var Banner = function Banner(_ref) {
     };
   }, []);
   var bannerParams = {
-    typeColor: _styles.COLORS.primary_100,
-    accentColor: _styles.COLORS.primary_700,
-    hoverColor: _styles.COLORS.primary_20,
-    closeIconColor: _styles.COLORS.primary_500,
+    typeColor: _styles.COLORS.getColor('primary_100', theme),
+    accentColor: _styles.COLORS.getColor('primary_700', theme),
+    closeIconColor: _styles.COLORS.getColor('primary_500', theme),
     icon: _icons.SystemIcons.Tip,
     containerType: type,
-    focusBgColor: _styles.COLORS.primary_200,
-    linkVisited: _styles.COLORS.primary_600,
-    linkFocused: _styles.COLORS.primary_800
+    focusBgColor: _styles.COLORS.getColor('primary_200', theme),
+    linkVisited: _styles.COLORS.getColor('primary_600', theme),
+    linkFocused: _styles.COLORS.getColor('primary_800', theme)
   };
   switch (type) {
     case '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.typeColor = _styles.COLORS.getColor('warning_100', theme);
+      bannerParams.accentColor = _styles.COLORS.getColor('warning_700', theme);
+      bannerParams.focusBgColor = _styles.COLORS.getColor('warning_200', theme);
       bannerParams.icon = _icons.SystemIcons.Help;
-      bannerParams.closeIconColor = _styles.COLORS.warning_500;
-      bannerParams.linkVisited = _styles.COLORS.warning_800;
-      bannerParams.linkFocused = _styles.COLORS.warning_800;
+      bannerParams.closeIconColor = _styles.COLORS.getColor('warning_500', theme);
+      bannerParams.linkVisited = _styles.COLORS.getColor('warning_800', theme);
+      bannerParams.linkFocused = _styles.COLORS.getColor('warning_800', theme);
       break;
     case '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.typeColor = _styles.COLORS.getColor('critical_100', theme);
+      bannerParams.accentColor = _styles.COLORS.getColor('critical_700', theme);
+      bannerParams.focusBgColor = _styles.COLORS.getColor('critical_200', theme);
       bannerParams.icon = _icons.SystemIcons.TechnicalWarning;
-      bannerParams.closeIconColor = _styles.COLORS.critical_500;
-      bannerParams.linkVisited = _styles.COLORS.critical_800;
-      bannerParams.linkFocused = _styles.COLORS.critical_800;
+      bannerParams.closeIconColor = _styles.COLORS.getColor('critical_500', theme);
+      bannerParams.linkVisited = _styles.COLORS.getColor('critical_800', theme);
+      bannerParams.linkFocused = _styles.COLORS.getColor('critical_800', theme);
       break;
     case '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.typeColor = _styles.COLORS.getColor('correct_100', theme);
+      bannerParams.accentColor = _styles.COLORS.getColor('correct_700', theme);
+      bannerParams.focusBgColor = _styles.COLORS.getColor('correct_200', theme);
       bannerParams.icon = _icons.SystemIcons.ThumbsUp;
-      bannerParams.closeIconColor = _styles.COLORS.correct_500;
-      bannerParams.linkVisited = _styles.COLORS.correct_800;
-      bannerParams.linkFocused = _styles.COLORS.correct_800;
+      bannerParams.closeIconColor = _styles.COLORS.getColor('correct_500', theme);
+      bannerParams.linkVisited = _styles.COLORS.getColor('correct_800', theme);
+      bannerParams.linkFocused = _styles.COLORS.getColor('correct_800', theme);
       break;
   }
   var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
@@ -127,7 +132,6 @@ var Banner = function Banner(_ref) {
     linkFocused: bannerParams.linkFocused,
     linkVisited: bannerParams.linkVisited,
     link: bannerParams.accentColor,
-    hover: bannerParams.hoverColor,
     bottom: bottom,
     className: cls,
     role: "note"
@@ -165,7 +169,6 @@ var Banner = function Banner(_ref) {
             variant: "secondary",
             shape: "circular",
             useTransparentBackground: true,
-            focusBackgroundColor: bannerParams.focusBgColor,
             action: function action() {
               return onClose();
             },
@@ -180,18 +183,17 @@ var Banner = function Banner(_ref) {
   }));
 };
 Banner.propTypes = {
-  type: _propTypes.default.oneOf(['warning', 'critical', 'positive', 'neutral']),
-  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,
-  fullWidth: _propTypes.default.bool
+  type: _propTypes["default"].oneOf(['warning', 'critical', 'positive', 'neutral']),
+  link: _propTypes["default"].string,
+  linkText: _propTypes["default"].string,
+  linkAction: _propTypes["default"].func,
+  bottom: _propTypes["default"].bool,
+  testId: _propTypes["default"].string,
+  icon: _propTypes["default"].node,
+  onClose: _propTypes["default"].func,
+  noIcon: _propTypes["default"].bool,
+  fullWidth: _propTypes["default"].bool
 };
 var _default = Banner;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=Banner.cjs.map