@laerdal/life-react-components 1.4.1-dev.11 → 1.4.1-dev.14.full

package/dist/cjs/Accordion/ContentAccordion.js

@@ -1,172 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ContentAccordionWrapper = exports.ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderIcon = exports.ContentAccordionItemHeader = exports.ContentAccordionItemContentHeader = exports.ContentAccordionItemContentFooter = exports.ContentAccordionItemContentBody = exports.ContentAccordionItemContent = exports.ContentAccordionItem = exports.ContentAccordion = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _types = require("../types");
-
-var _icons = require("../icons");
-
-var _typography = require("../styles/typography");
-
-var _styles = require("../styles");
-
-var _zIndexes = require("../styles/z-indexes");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-var ContentAccordionItemHeader = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    background-color: ", ";\n    z-index: ", ";\n    outline: none;\n  }\n\n  &:active {\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n    z-index: ", ";\n  }\n"])), _styles.COLORS.neutral_600, _styles.COLORS.primary_700, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.white, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active);
-
-exports.ContentAccordionItemHeader = ContentAccordionItemHeader;
-
-var ContentAccordionItemHeaderIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
-
-exports.ContentAccordionItemHeaderIcon = ContentAccordionItemHeaderIcon;
-
-var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));
-
-exports.ContentAccordionItemHeaderText = ContentAccordionItemHeaderText;
-
-var ContentAccordionItemContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  flex-direction: column;\n"])));
-
-exports.ContentAccordionItemContent = ContentAccordionItemContent;
-
-var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n"])));
-
-exports.ContentAccordionItemContentHeader = ContentAccordionItemContentHeader;
-
-var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n"])));
-
-exports.ContentAccordionItemContentBody = ContentAccordionItemContentBody;
-
-var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n"])));
-
-exports.ContentAccordionItemContentFooter = ContentAccordionItemContentFooter;
-
-var ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), _styles.COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, _styles.COLORS.neutral_300);
-
-exports.ContentAccordionItem = ContentAccordionItem;
-
-var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null));
-
-exports.ContentAccordionWrapper = ContentAccordionWrapper;
-
-var ContentAccordion = function ContentAccordion(props) {
-  var _props$size;
-
-  var _React$useState = _react.default.useState([]),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      opened = _React$useState2[0],
-      setOpened = _React$useState2[1];
-
-  _react.default.useEffect(function () {
-    if (props.multi) {
-      setOpened(props.items.filter(function (item) {
-        return item.active;
-      }).map(function (item) {
-        return item.key;
-      }));
-    } else {
-      var _props$items$find;
-
-      var active = (_props$items$find = props.items.find(function (item) {
-        return !!item.active;
-      })) === null || _props$items$find === void 0 ? void 0 : _props$items$find.key;
-
-      if (active) {
-        setOpened([active]);
-      }
-    }
-  }, [props.items, props.multi]);
-
-  var onItemClick = function onItemClick(item) {
-    if (item.disabled) return;
-
-    if (opened.includes(item.key)) {
-      setOpened(opened.filter(function (key) {
-        return key !== item.key;
-      }));
-    } else {
-      if (props.multi) {
-        setOpened([].concat((0, _toConsumableArray2.default)(opened), [item.key]));
-      } else {
-        setOpened([item.key]);
-      }
-    }
-  };
-
-  var renderItem = function renderItem(item) {
-    var isActive = opened.includes(item.key);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItem, {
-      id: "item_".concat(item.key),
-      className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : ''),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemHeader, {
-        tabIndex: !item.disabled ? 0 : undefined,
-        onMouseDown: function onMouseDown(e) {
-          return e.preventDefault();
-        },
-        onClick: function onClick() {
-          return !item.disabled && onItemClick(item);
-        },
-        onKeyPress: function onKeyPress(event) {
-          return event.key === 'Enter' && onItemClick(item);
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemHeaderIcon, {
-          children: props.multi ? isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Plus, {}) : isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemHeaderText, {
-          children: item.title
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemContent, {
-        children: [item.header && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentHeader, {
-          children: item.header
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentBody, {
-          children: item.body
-        }), item.footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentFooter, {
-          children: item.footer
-        })]
-      })]
-    }, item.key);
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionWrapper, {
-    className: ''.concat(" ".concat((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium)),
-    children: props.items.map(function (item) {
-      return renderItem(item);
-    })
-  });
-};
-
-exports.ContentAccordion = ContentAccordion;
-ContentAccordion.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
-    title: _propTypes.default.string.isRequired,
-    header: _propTypes.default.string,
-    body: _propTypes.default.any.isRequired,
-    footer: _propTypes.default.any,
-    disabled: _propTypes.default.bool,
-    active: _propTypes.default.bool
-  })).isRequired,
-  multi: _propTypes.default.bool
-};
-var _default = ContentAccordion;
-exports.default = _default;
-//# sourceMappingURL=ContentAccordion.js.map

package/dist/cjs/Accordion/ContentAccordion.js.map

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

package/dist/cjs/Accordion/index.js

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

package/dist/cjs/Accordion/index.js.map

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

package/dist/cjs/Accordion/styles.js

@@ -1,52 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.HeaderIconContainer = exports.AccordionMenuWrapper = exports.AccordionItemContainer = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styles = require("../styles");
-
-var _zIndexes = require("../styles/z-indexes");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var AccordionMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
-
-exports.AccordionMenuWrapper = AccordionMenuWrapper;
-
-var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ", ";\n"])), function (props) {
-  return props.displaySeparator ? "1px solid ".concat(_styles.COLORS.neutral_100) : '';
-});
-
-exports.AccordionItemContainer = AccordionItemContainer;
-var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", "!important;\n  color: ", ";\n  pointer-events: none;\n  svg {\n    color: ", "!important;\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
-
-var ItemHeaderContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ", ";\n  cursor: ", ";\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  ", "\n  :hover {\n    background: ", ";\n  }\n\n  :hover .headerLabel {\n    color: ", ";\n  }\n\n  :active .headerLabel {\n    color: ", ";\n  }\n\n  :hover svg {\n    color: ", ";\n  }\n\n  :active svg {\n    color: ", ";\n  }\n\n  :active {\n    background: ", ";\n  }\n  \n  :focus:not(:active){\n    z-index: ", ";\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n  }\n"])), _styles.COLORS.neutral_20, function (props) {
-  return props.isDisabled ? 'not-allowed' : 'pointer';
-}, function (props) {
-  return props.isDisabled ? disabledState : '';
-}, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_500);
-
-exports.ItemHeaderContainer = ItemHeaderContainer;
-
-var HeaderIconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: auto;\n"])));
-
-exports.HeaderIconContainer = HeaderIconContainer;
-
-var ItemBodyContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px;\n  margin: 12px 0;\n  background: ", ";\n"])), _styles.COLORS.white);
-
-exports.ItemBodyContainer = ItemBodyContainer;
-//# sourceMappingURL=styles.js.map

package/dist/cjs/Accordion/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","isDisabled","primary_20","primary_700","primary_800","primary_100","Z_INDEXES","focus","primary_500","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;AAQP,IAAMC,aAAa,OAAGC,qBAAH,2MACHH,eAAOI,KADJ,EAERJ,eAAOK,WAFC,EAKNL,eAAOK,WALD,CAAnB;;AASO,IAAMC,mBAAmB,GAAGX,0BAAOC,GAAV,grBAMhBI,eAAOO,UANS,EAOpB,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACU,UAAN,GAAmB,aAAnB,GAAmC,SAA/C;AAAA,CAPoB,EAa5B,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACU,UAAN,GAAmBN,aAAnB,GAAmC,EAA/C;AAAA,CAb4B,EAedF,eAAOS,UAfO,EAmBnBT,eAAOU,WAnBY,EAuBnBV,eAAOW,WAvBY,EA2BnBX,eAAOU,WA3BY,EA+BnBV,eAAOW,WA/BY,EAmCdX,eAAOY,WAnCO,EAuCjBC,oBAAUC,KAvCO,EAwCDd,eAAOe,WAxCN,EAwCkCf,eAAOe,WAxCzC,CAAzB;;;;AA4CA,IAAMC,mBAAmB,GAAGrB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMqB,iBAAiB,GAAGtB,0BAAOC,GAAV,sJAGdI,eAAOI,KAHO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nconst disabledState = css`\n  background: ${COLORS.white}!important;\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  svg {\n    color: ${COLORS.neutral_300}!important;\n  }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean, isActive: boolean }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ${COLORS.neutral_20};\n  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  ${(props) => (props.isDisabled ? disabledState : '')}\n  :hover {\n    background: ${COLORS.primary_20};\n  }\n\n  :hover .headerLabel {\n    color: ${COLORS.primary_700};\n  }\n\n  :active .headerLabel {\n    color: ${COLORS.primary_800};\n  }\n\n  :hover svg {\n    color: ${COLORS.primary_700};\n  }\n\n  :active svg {\n    color: ${COLORS.primary_800};\n  }\n\n  :active {\n    background: ${COLORS.primary_100};\n  }\n  \n  :focus:not(:active){\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n  padding: 0px 16px;\n  margin: 12px 0;\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}

package/dist/cjs/AuthPage/AuthPage.js

@@ -1,80 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styles = require("../styles");
-
-var _ScreenSetsContainer = _interopRequireDefault(require("./ScreenSetsContainer"));
-
-var _Information = require("./Information");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/**
- * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.
- * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).
- * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.
- */
-var AuthPage = function AuthPage(_ref) {
-  var showInformationSection = _ref.showInformationSection,
-      signUp = _ref.signUp,
-      signUpPlaceholderImage = _ref.signUpPlaceholderImage,
-      signInPlaceholderImage = _ref.signInPlaceholderImage,
-      signUpPlaceholderImageAlt = _ref.signUpPlaceholderImageAlt,
-      signInPlaceholderImageAlt = _ref.signInPlaceholderImageAlt,
-      signUpInformationHeader = _ref.signUpInformationHeader,
-      signInInformationHeader = _ref.signInInformationHeader,
-      signUpInformationText = _ref.signUpInformationText,
-      signInInformationText = _ref.signInInformationText,
-      screenSetsContainerId = _ref.screenSetsContainerId;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [showInformationSection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Information.InformationContainer, {
-      $color: signUp ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Information.InformationContent, {
-        children: [(signUpPlaceholderImage || signInPlaceholderImage) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Information.InformationImage, {
-          src: signUp ? signUpPlaceholderImage : signInPlaceholderImage,
-          alt: signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt
-        }), (signUpInformationHeader || signInInformationHeader) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Information.InformationHeader, {
-          children: signUp ? signUpInformationHeader : signInInformationHeader
-        }), (signUpInformationText || signInInformationText) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Information.InformationText, {
-          children: signUp ? signUpInformationText : signInInformationText
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenSetsContainer.default, {
-      id: screenSetsContainerId,
-      centerContents: !showInformationSection
-    })]
-  });
-};
-
-AuthPage.propTypes = {
-  showInformationSection: _propTypes.default.bool.isRequired,
-  signUp: _propTypes.default.bool.isRequired,
-  signUpPlaceholderImage: _propTypes.default.string,
-  signInPlaceholderImage: _propTypes.default.string,
-  signUpPlaceholderImageAlt: _propTypes.default.string,
-  signInPlaceholderImageAlt: _propTypes.default.string,
-  signUpInformationHeader: _propTypes.default.string,
-  signInInformationHeader: _propTypes.default.string,
-  signUpInformationText: _propTypes.default.string,
-  signInInformationText: _propTypes.default.string,
-  screenSetsContainerId: _propTypes.default.string.isRequired
-};
-var _default = AuthPage;
-exports.default = _default;
-//# sourceMappingURL=AuthPage.js.map

package/dist/cjs/AuthPage/AuthPage.js.map

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

package/dist/cjs/AuthPage/Information.js

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

package/dist/cjs/AuthPage/Information.js.map

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

package/dist/cjs/AuthPage/ScreenSetsContainer.js

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

package/dist/cjs/AuthPage/ScreenSetsContainer.js.map

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

package/dist/cjs/AuthPage/_AuthPageSection.js

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

package/dist/cjs/AuthPage/_AuthPageSection.js.map

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

package/dist/cjs/AuthPage/index.js

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

package/dist/cjs/AuthPage/index.js.map

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

package/dist/cjs/AuthPage/screenSetsErrorMessages.js

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

package/dist/cjs/AuthPage/screenSetsErrorMessages.js.map

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