@laerdal/life-react-components 3.0.1-dev.9 → 3.1.0

package/dist/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","AccordionMenu","AccordionMenuItem","ContentAccordion","AccordionMenuWrapper"],"sources":["../../src/Accordion/index.ts"],"sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\r\nexport {default as AccordionMenuItem} from './AccordionMenu';\r\nexport {ContentAccordion} from './ContentAccordion';\r\nexport {AccordionMenuWrapper} from './styles';\r\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,aAAa,QAAO,iBAAiB;AACxD,SAAQD,OAAO,IAAIE,iBAAiB,QAAO,iBAAiB;AAC5D,SAAQC,gBAAgB,QAAO,oBAAoB;AACnD,SAAQC,oBAAoB,QAAO,UAAU"}
+{"version":3,"file":"index.js","names":["default","AccordionMenu","AccordionMenuItem","ContentAccordion","AccordionMenuWrapper"],"sources":["../../src/Accordion/index.ts"],"sourcesContent":["export * from './AccordionMenu';\nexport * from './AccordionItem';\nexport * from './ContentAccordion';\nexport {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {default as ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,oBAAoB;AAClC,SAAQA,OAAO,IAAIC,aAAa,QAAO,iBAAiB;AACxD,SAAQD,OAAO,IAAIE,iBAAiB,QAAO,iBAAiB;AAC5D,SAAQF,OAAO,IAAIG,gBAAgB,QAAO,oBAAoB;AAC9D,SAAQC,oBAAoB,QAAO,UAAU"}

package/dist/Accordion/styles.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.AccordionMenuWrapper = exports.AccordionItemContainer = void 0;
+exports.AccordionMenuWrapper = exports.AccordionItemHeaderContainer = exports.AccordionItemContainer = exports.AccordionItemBodyContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
@@ -12,16 +12,16 @@ var _zIndexes = require("../styles/z-indexes");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 ItemHeaderContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _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 AccordionItemContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), ItemHeaderContainer, _styles.COLORS.neutral_100);
+var AccordionItemHeaderContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _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.AccordionItemHeaderContainer = AccordionItemHeaderContainer;
+var AccordionItemContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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, _styles.COLORS.neutral_100);
 exports.AccordionItemContainer = AccordionItemContainer;
-var ItemBodyContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"])), function (props) {
+var AccordionItemBodyContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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';
 }, _styles.COLORS.white, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), function (props) {
   return props.padding || '12px 24px';
 }, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), function (props) {
   return props.padding || '14px 32px';
 }, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
-exports.ItemBodyContainer = ItemBodyContainer;
+exports.AccordionItemBodyContainer = AccordionItemBodyContainer;
 //# sourceMappingURL=styles.cjs.map

package/dist/Accordion/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","ItemHeaderContainer","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","ItemBodyContainer","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 ItemHeaderContainer = 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) ${ItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nexport const ItemBodyContainer = 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,mBAAmB,GAAGF,yBAAM,CAACC,GAAG,0jCASzC,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,mBAAmB,EACXI,cAAM,CAACgB,WAAW,CAEhD;AAAC;AAEK,IAAMC,iBAAiB,GAAGvB,yBAAM,CAACC,GAAG,wPAC9B,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":["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';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles\n} 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\n\n\nexport const AccordionItemHeaderContainer = styled.div`\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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ${focusStyles}\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  }\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 AccordionItemContainer = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n`;\n\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '8px 16px'};\n  background: ${COLORS.white};\n  \n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n  \n  .medium & {\n    padding: ${(props) => props.padding || '12px 24px'};\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  }\n  \n  .large & {\n    padding: ${(props) => props.padding || '14px 32px'};\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n  }\n\n`;\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"}

package/dist/Accordion/styles.d.ts

@@ -1,6 +1,6 @@
-export declare const AccordionMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
-    padding?: string | undefined;
-}, never>;
+export declare const AccordionMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AccordionItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AccordionItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
+    padding?: string | undefined;
+}, never>;

package/dist/Accordion/styles.js

@@ -4,9 +4,9 @@ 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 ItemHeaderContainer = 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"])), ItemHeaderContainer, COLORS.neutral_100);
-export var ItemBodyContainer = 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) {
+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 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) {
   return props.padding || '12px 24px';

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","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","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 ItemHeaderContainer = 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) ${ItemHeaderContainer}:not(.active) {\r\n    border-bottom: 1px solid ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nexport const ItemBodyContainer = 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,mBAAmB,GAAGV,MAAM,CAACS,GAAG,4iCASzCL,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,mBAAmB,EACXT,MAAM,CAACsB,WAAW,CAEhD;AAED,OAAO,IAAMC,iBAAiB,GAAGxB,MAAM,CAACS,GAAG,0OAC9B,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","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';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles\n} 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\n\n\nexport const AccordionItemHeaderContainer = styled.div`\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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ${focusStyles}\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  }\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 AccordionItemContainer = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ${AccordionItemHeaderContainer}:not(.active) {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n`;\n\nexport const AccordionItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '8px 16px'};\n  background: ${COLORS.white};\n  \n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n  \n  .medium & {\n    padding: ${(props) => props.padding || '12px 24px'};\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  }\n  \n  .large & {\n    padding: ${(props) => props.padding || '14px 32px'};\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n  }\n\n`;\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"}

package/dist/AuthPage/AuthPage.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = 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"));
@@ -20,13 +20,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 Wrapper = _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);
+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,
     panel = _ref.panel,
     _ref$order = _ref.order,
     order = _ref$order === void 0 ? 'default' : _ref$order;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthPageWrapper, {
     className: order,
     children: [panel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel.Panel, _objectSpread(_objectSpread({}, panel), {}, {
       order: order,

package/dist/AuthPage/AuthPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage.cjs","names":["Wrapper","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\nconst Wrapper = 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\ntype 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    <Wrapper 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    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default AuthPage;\r\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAGtC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,0TAUtBC,mBAAW,CAACC,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,sBAAC,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,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,EACjE;AAEd,CAAC;AAAC;EAjBAC,KAAK,4BAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAAA,eAkBRD,QAAQ;AAAA"}
+{"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';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nexport const AuthPageWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n`;\n\nexport type AuthPageProps = {\n  panel?: PanelProps;\n  order?: 'default' | 'reverse';\n  screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n                    screenSetsContainerId,\n                    panel,\n                    order = 'default'\n                  }: AuthPageProps) => {\n  return (\n    <AuthPageWrapper className={order}>\n      {\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n      }\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n    </AuthPageWrapper>\n  );\n};\n\nexport default AuthPage;\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"}

package/dist/AuthPage/AuthPage.d.ts

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

package/dist/AuthPage/AuthPage.js

@@ -11,13 +11,13 @@ import { Panel } from "../Panel";
 import { BREAKPOINTS } from "../styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), BREAKPOINTS.MEDIUM);
+export var AuthPageWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), BREAKPOINTS.MEDIUM);
 var AuthPage = function AuthPage(_ref) {
   var screenSetsContainerId = _ref.screenSetsContainerId,
     panel = _ref.panel,
     _ref$order = _ref.order,
     order = _ref$order === void 0 ? 'default' : _ref$order;
-  return /*#__PURE__*/_jsxs(Wrapper, {
+  return /*#__PURE__*/_jsxs(AuthPageWrapper, {
     className: order,
     children: [panel && /*#__PURE__*/_jsx(Panel, _objectSpread(_objectSpread({}, panel), {}, {
       order: order,

package/dist/AuthPage/AuthPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage.js","names":["React","ScreenSetsContainer","styled","Panel","BREAKPOINTS","Wrapper","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\nconst Wrapper = 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\ntype 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    <Wrapper 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    </Wrapper>\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,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,4SAUtBF,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,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,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,EACjE;AAEd,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","AuthPageWrapper","div","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nexport const AuthPageWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n`;\n\nexport type AuthPageProps = {\n  panel?: PanelProps;\n  order?: 'default' | 'reverse';\n  screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n                    screenSetsContainerId,\n                    panel,\n                    order = 'default'\n                  }: AuthPageProps) => {\n  return (\n    <AuthPageWrapper className={order}>\n      {\n        panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n      }\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n    </AuthPageWrapper>\n  );\n};\n\nexport default AuthPage;\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"}

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":["ScreenSetsContainer","styled","section","props","centerContents","BREAKPOINTS","MEDIUM","LARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {BREAKPOINTS} from '../styles';\n\nconst ScreenSetsContainer = styled.section<{ centerContents: boolean }>`\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: ${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    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\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"}

package/dist/AuthPage/ScreenSetsContainer.d.ts

@@ -1,4 +1,4 @@
-declare const ScreenSetsContainer: import("styled-components").StyledComponent<"section", any, {
-    centerContents: boolean;
-}, never>;
-export default ScreenSetsContainer;
+declare const ScreenSetsContainer: import("styled-components").StyledComponent<"section", any, {
+    centerContents: boolean;
+}, never>;
+export default ScreenSetsContainer;

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","props","centerContents","MEDIUM","LARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {BREAKPOINTS} from '../styles';\n\nconst ScreenSetsContainer = styled.section<{ centerContents: boolean }>`\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: ${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    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\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"}

package/dist/AuthPage/index.cjs

@@ -1,9 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  ScreenSetsContainer: true,
+  AuthPage: true
+};
 Object.defineProperty(exports, "AuthPage", {
   enumerable: true,
   get: function get() {
@@ -16,6 +20,30 @@ Object.defineProperty(exports, "ScreenSetsContainer", {
     return _ScreenSetsContainer.default;
   }
 });
-var _ScreenSetsContainer = _interopRequireDefault(require("./ScreenSetsContainer"));
-var _AuthPage = _interopRequireDefault(require("./AuthPage"));
+var _ScreenSetsContainer = _interopRequireWildcard(require("./ScreenSetsContainer"));
+Object.keys(_ScreenSetsContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ScreenSetsContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ScreenSetsContainer[key];
+    }
+  });
+});
+var _AuthPage = _interopRequireWildcard(require("./AuthPage"));
+Object.keys(_AuthPage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AuthPage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AuthPage[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; }
 //# sourceMappingURL=index.cjs.map

package/dist/AuthPage/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\r\nimport AuthPage from './AuthPage';\r\n\r\nexport {ScreenSetsContainer, AuthPage};\r\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["export * from './ScreenSetsContainer';\nexport * from './AuthPage';\n\nexport { default as ScreenSetsContainer } from './ScreenSetsContainer';\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"}

package/dist/AuthPage/index.d.ts

@@ -1,3 +1,4 @@
-import ScreenSetsContainer from './ScreenSetsContainer';
-import AuthPage from './AuthPage';
-export { ScreenSetsContainer, AuthPage };
+export * from './ScreenSetsContainer';
+export * from './AuthPage';
+export { default as ScreenSetsContainer } from './ScreenSetsContainer';
+export { default as AuthPage } from './AuthPage';

package/dist/AuthPage/index.js

@@ -1,4 +1,5 @@
-import ScreenSetsContainer from './ScreenSetsContainer';
-import AuthPage from './AuthPage';
-export { ScreenSetsContainer, AuthPage };
+export * from './ScreenSetsContainer';
+export * from './AuthPage';
+export { default as ScreenSetsContainer } from './ScreenSetsContainer';
+export { default as AuthPage } from './AuthPage';
 //# sourceMappingURL=index.js.map

package/dist/AuthPage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ScreenSetsContainer","AuthPage"],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\r\nimport AuthPage from './AuthPage';\r\n\r\nexport {ScreenSetsContainer, AuthPage};\r\n"],"mappings":"AAAA,OAAOA,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAAQD,mBAAmB,EAAEC,QAAQ"}
+{"version":3,"file":"index.js","names":["default","ScreenSetsContainer","AuthPage"],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["export * from './ScreenSetsContainer';\nexport * from './AuthPage';\n\nexport { default as ScreenSetsContainer } from './ScreenSetsContainer';\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"}

package/dist/Banners/Banner.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = 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"));
@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 BannerContainer = _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) {
+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) {
   return props.bottom ? 'auto' : '0';
@@ -37,12 +37,17 @@ var BannerContainer = _styledComponents.default.div(_templateObject || (_templat
 }, function (props) {
   return props.linkFocused;
 }, _styles.COLORS.white);
-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 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 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) {
+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);
+exports.BannerCenterStyles = BannerCenterStyles;
+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 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"])));
+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"])));
+exports.BannerContentWrapperStyles = BannerContentWrapperStyles;
 var Banner = function Banner(_ref) {
   var size = _ref.size,
     _ref$type = _ref.type,
@@ -116,7 +121,7 @@ var Banner = function Banner(_ref) {
       break;
   }
   var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, _objectSpread(_objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainerStyles, _objectSpread(_objectSpread({
     "data-testid": testId,
     $type: bannerParams.typeColor,
     linkFocused: bannerParams.linkFocused,
@@ -127,7 +132,7 @@ var Banner = function Banner(_ref) {
     className: cls,
     role: "note"
   }, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenterStyles, {
       style: {
         color: bannerParams.accentColor
       },
@@ -135,7 +140,7 @@ var Banner = function Banner(_ref) {
       children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(bannerParams.icon, {
         color: bannerParams.accentColor,
         size: "24px"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapperStyles, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ComponentResponsive, {
           size: size,
           width: width,
@@ -153,8 +158,8 @@ var Banner = function Banner(_ref) {
             children: linkText
           })]
         })
-      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerCloseButtonWrapperStyles, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerCloseButtonContainerStyles, {
           $type: bannerParams.containerType,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
             variant: "secondary",

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","SystemIcons","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { SystemIcons } from '../icons';\r\nimport { IconButton } from '../Button';\r\nimport { getButtonStyle } from './styles';\r\nimport { Size } from '../types';\r\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\r\nimport { HyperLink } from '../HyperLink';\r\nimport { StyledLink } from '../HyperLink';\r\nimport { hasWindow } from '../utils/utils';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\r\n\r\nconst BannerContainer = styled.div<StyleBannerProps>`\r\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\r\n  min-height: 48px;\r\n  display: flex;\r\n  color: ${COLORS.black};\r\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\r\n  border-radius: 4px;\r\n\r\n  button:last-child {\r\n    line-height: 0;\r\n    margin: 0 0 0 8px;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 0 0 32px;\r\n    }\r\n    &.small {\r\n      margin: 0 0 0 8px;\r\n    }\r\n    &.medium {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    &.large {\r\n      margin: 0 0 0 32px;\r\n    }\r\n  }\r\n\r\n  ${StyledLink} {\r\n    &:link {\r\n      color: ${(props) => props.link};\r\n    }\r\n    &:visited {\r\n      color: ${(props) => props.linkVisited};\r\n    }\r\n    &:focus,\r\n    &:active {\r\n      background-color: ${(props) => props.linkFocused};\r\n      color: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.full-width-banner {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nconst BannerCenter = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 64px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n\r\n  .full-width-banner & {\r\n    margin: 0 16px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 32px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 64px;\r\n    }\r\n\r\n    &.small {\r\n      margin: 0 16px;\r\n    }\r\n\r\n    &.medium {\r\n      margin: 0 32px;\r\n    }\r\n\r\n    &.large {\r\n      margin: 0 64px;\r\n    }\r\n  }\r\n`;\r\n\r\nconst ButtonWrapper = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nconst ButtonContainer = styled.div<{ $type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\r\n`;\r\n\r\nconst BannerContentWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\r\n  link?: string;\r\n  linkText?: string;\r\n  linkAction?: (ev: React.MouseEvent) => void;\r\n  hover?: string;\r\n  bottom?: boolean;\r\n  testId?: string;\r\n  icon?: React.ReactNode;\r\n  onClose?: () => void;\r\n  noIcon?: boolean;\r\n  fullWidth?: boolean;\r\n};\r\n\r\nconst Banner: React.FunctionComponent<BannerProps> = ({\r\n  size,\r\n  type = 'neutral',\r\n  children,\r\n  bottom,\r\n  testId,\r\n  linkText,\r\n  link,\r\n  onClose,\r\n  icon,\r\n  noIcon,\r\n  linkAction,\r\n  fullWidth,\r\n  className,\r\n  ...rest\r\n}) => {\r\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  let bannerParams = {\r\n    typeColor: COLORS.primary_100,\r\n    accentColor: COLORS.primary_700,\r\n    hoverColor: COLORS.primary_20,\r\n    closeIconColor: COLORS.primary_500,\r\n    icon: SystemIcons.Tip,\r\n    containerType: type,\r\n    focusBgColor: COLORS.primary_200,\r\n    linkVisited: COLORS.primary_600,\r\n    linkFocused: COLORS.primary_800,\r\n  };\r\n  switch (type) {\r\n    case 'warning':\r\n      bannerParams.typeColor = COLORS.warning_100;\r\n      bannerParams.accentColor = COLORS.warning_700;\r\n      bannerParams.focusBgColor = COLORS.warning_200;\r\n      bannerParams.hoverColor = COLORS.warning_20;\r\n      bannerParams.icon = SystemIcons.Help;\r\n      bannerParams.closeIconColor = COLORS.warning_500;\r\n      bannerParams.linkVisited = COLORS.warning_800;\r\n      bannerParams.linkFocused = COLORS.warning_800;\r\n      break;\r\n    case 'critical':\r\n      bannerParams.typeColor = COLORS.critical_100;\r\n      bannerParams.accentColor = COLORS.critical_700;\r\n      bannerParams.focusBgColor = COLORS.critical_200;\r\n      bannerParams.hoverColor = COLORS.critical_20;\r\n      bannerParams.icon = SystemIcons.TechnicalWarning;\r\n      bannerParams.closeIconColor = COLORS.critical_500;\r\n      bannerParams.linkVisited = COLORS.critical_800;\r\n      bannerParams.linkFocused = COLORS.critical_800;\r\n      break;\r\n    case 'positive':\r\n      bannerParams.typeColor = COLORS.correct_100;\r\n      bannerParams.accentColor = COLORS.correct_700;\r\n      bannerParams.focusBgColor = COLORS.correct_200;\r\n      bannerParams.hoverColor = COLORS.correct_20;\r\n      bannerParams.icon = SystemIcons.ThumbsUp;\r\n      bannerParams.closeIconColor = COLORS.correct_500;\r\n      bannerParams.linkVisited = COLORS.correct_800;\r\n      bannerParams.linkFocused = COLORS.correct_800;\r\n      break;\r\n  }\r\n\r\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\r\n\r\n  return (\r\n    <BannerContainer\r\n      data-testid={testId}\r\n      $type={bannerParams.typeColor}\r\n      linkFocused={bannerParams.linkFocused}\r\n      linkVisited={bannerParams.linkVisited}\r\n      link={bannerParams.accentColor}\r\n      hover={bannerParams.hoverColor}\r\n      bottom={bottom}\r\n      className={cls}\r\n      role=\"note\"\r\n      {...rest}>\r\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\r\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\r\n        <BannerContentWrapper>\r\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\r\n            {children}&nbsp;\r\n            {link && linkText && (\r\n              <HyperLink\r\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\r\n                onClick={(e) => {\r\n                  if (linkAction) {\r\n                    e.preventDefault();\r\n                    linkAction(e);\r\n                  }\r\n                }}\r\n                href={link}\r\n                variant=\"default\">\r\n                {linkText}\r\n              </HyperLink>\r\n            )}\r\n          </ComponentResponsive>\r\n        </BannerContentWrapper>\r\n        {onClose && (\r\n          <ButtonWrapper>\r\n            <ButtonContainer $type={bannerParams.containerType}>\r\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\r\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\r\n              </IconButton>\r\n            </ButtonContainer>\r\n          </ButtonWrapper>\r\n        )}\r\n      </BannerCenter>\r\n    </BannerContainer>\r\n  );\r\n};\r\n\r\nexport default Banner;\r\n"],"mappings":"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"}
+{"version":3,"file":"Banner.cjs","names":["BannerContainerStyles","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenterStyles","ComponentMStyling","ComponentTextStyle","Regular","BannerCloseButtonWrapperStyles","BannerCloseButtonContainerStyles","getButtonStyle","BannerContentWrapperStyles","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","SystemIcons","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\nexport type StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nexport const BannerContainerStyles = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\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  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nexport const BannerCenterStyles = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\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    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 32px;\n    }\n    ${BREAKPOINTS.LARGE} {\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`;\n\nexport const BannerCloseButtonWrapperStyles = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nexport const BannerCloseButtonContainerStyles = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nexport const BannerContentWrapperStyles = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: SystemIcons.Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = SystemIcons.Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = SystemIcons.TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = SystemIcons.ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainerStyles\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      role=\"note\"\n      {...rest}>\n      <BannerCenterStyles style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapperStyles>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapperStyles>\n        {onClose && (\n          <BannerCloseButtonWrapperStyles>\n            <BannerCloseButtonContainerStyles $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </BannerCloseButtonContainerStyles>\n          </BannerCloseButtonWrapperStyles>\n        )}\n      </BannerCenterStyles>\n    </BannerContainerStyles>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}

package/dist/Banners/Banner.d.ts

@@ -1,18 +1,50 @@
-import * as React from 'react';
-import { Size } from '../types';
-type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
-    size?: Size.Small | Size.Medium | Size.Large;
-    type?: 'warning' | 'critical' | 'positive' | 'neutral';
-    link?: string;
-    linkText?: string;
-    linkAction?: (ev: React.MouseEvent) => void;
-    hover?: string;
-    bottom?: boolean;
-    testId?: string;
-    icon?: React.ReactNode;
-    onClose?: () => void;
-    noIcon?: boolean;
-    fullWidth?: boolean;
-};
-declare const Banner: React.FunctionComponent<BannerProps>;
-export default Banner;
+import * as React from 'react';
+import { Size } from '../types';
+/**
+ * Styles for <Banner />
+ */
+export type StyleBannerProps = BannerProps & {
+    $type: string;
+    linkVisited: string;
+    linkFocused: string;
+};
+export declare const BannerContainerStyles: import("styled-components").StyledComponent<"div", any, React.HTMLAttributes<HTMLDivElement> & {
+    size?: Size.Small | Size.Medium | Size.Large | undefined;
+    type?: "positive" | "critical" | "warning" | "neutral" | undefined;
+    link?: string | undefined;
+    linkText?: string | undefined;
+    linkAction?: ((ev: React.MouseEvent) => void) | undefined;
+    hover?: string | undefined;
+    bottom?: boolean | undefined;
+    testId?: string | undefined;
+    icon?: React.ReactNode;
+    onClose?: (() => void) | undefined;
+    noIcon?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+} & {
+    $type: string;
+    linkVisited: string;
+    linkFocused: string;
+}, never>;
+export declare const BannerCenterStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerCloseButtonWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerCloseButtonContainerStyles: import("styled-components").StyledComponent<"div", any, {
+    $type?: string | undefined;
+}, never>;
+export declare const BannerContentWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: Size.Small | Size.Medium | Size.Large;
+    type?: 'warning' | 'critical' | 'positive' | 'neutral';
+    link?: string;
+    linkText?: string;
+    linkAction?: (ev: React.MouseEvent) => void;
+    hover?: string;
+    bottom?: boolean;
+    testId?: string;
+    icon?: React.ReactNode;
+    onClose?: () => void;
+    noIcon?: boolean;
+    fullWidth?: boolean;
+};
+declare const Banner: React.FunctionComponent<BannerProps>;
+export default Banner;