@p14c/branding-themes-utilities 6.860.3

package/dist/index.modern.js

@@ -0,0 +1,1637 @@
+import _ from 'lodash';
+import astroTheme$1 from '@pingux/astro/lib/cjs/styles/theme';
+import { GlobalStyles, Box, Image } from '@pingux/astro';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider, useTheme } from '@emotion/react';
+import Box$1 from '@pingux/astro/lib/cjs/components/Box';
+import sanitizeHtml from 'sanitize-html';
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+var buttonText = {
+  fontSize: 'md',
+  fontFamily: 'standard',
+  color: 'neutral.20'
+};
+var buttonHover = {
+  color: 'active',
+  borderColor: 'active'
+};
+var buttonFocus = {
+  outline: 'none',
+  boxShadow: 'focus'
+};
+
+var buttonBase = _objectSpread2(_objectSpread2({}, buttonText), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'neutral.60',
+  borderRadius: 2,
+  display: 'block',
+  padding: '9px',
+  boxShadow: 'none',
+  minHeight: 40,
+  height: 'auto',
+  textOverflow: 'ellipsis',
+  cursor: 'pointer',
+  width: '100%',
+  outline: 'none',
+  '&.is-hovered': _objectSpread2({}, buttonHover),
+  '&.is-pressed': {
+    color: buttonText.color,
+    borderColor: 'neutral.60'
+  },
+  '&.is-focused': _objectSpread2({}, buttonFocus)
+});
+
+var endUserButtons = {
+  default: _objectSpread2({}, buttonBase),
+  iconButton: {
+    justifyContent: 'center',
+    appearance: 'none',
+    alignItems: 'center',
+    alignSelf: 'baseline',
+    display: 'inline-flex !important',
+    flexGrow: 0,
+    flexShrink: 0,
+    borderRadius: '100%',
+    cursor: 'pointer',
+    bg: 'transparent',
+    p: '3px',
+    width: 'inherit',
+    height: 'inherit',
+    path: {
+      fill: 'neutral.20'
+    },
+    outline: 'none',
+    '&.is-hovered': {
+      bg: 'neutral.90'
+    },
+    '&.is-pressed': {
+      path: {
+        fill: 'white'
+      },
+      bg: 'active'
+    }
+  },
+  primary: _objectSpread2(_objectSpread2({}, buttonBase), {}, {
+    color: 'white',
+    bg: 'active',
+    borderColor: 'active',
+    '&.is-hovered': {
+      bg: 'activeHover',
+      borderColor: 'activeHover'
+    },
+    '&.is-pressed': {
+      bg: 'active',
+      borderColor: 'active'
+    }
+  }),
+  secondary: _objectSpread2({}, buttonBase),
+  tertiary: _objectSpread2(_objectSpread2({}, buttonBase), {}, {
+    fontSize: 'sm',
+    py: 'xs',
+    px: 'md',
+    width: 'auto',
+    mx: 'auto',
+    minHeight: 'initial'
+  }),
+  comboBox: {
+    bg: 'transparent',
+    color: 'black',
+    padding: 0,
+    svg: {
+      fill: ' #798087',
+      height: 30,
+      width: 30
+    }
+  }
+};
+var airButtons = {
+  primary: {
+    width: 125,
+    borderWidth: 0,
+    marginRight: 'auto !important'
+  }
+};
+var focusButtons = {
+  primary: {
+    width: '100%',
+    borderWidth: 0,
+    fontWeight: 800
+  }
+};
+var muralButtons = {
+  primary: {
+    width: '60%',
+    borderWidth: 0,
+    fontWeight: 800
+  }
+};
+var pingDefaultButtons = {
+  primary: {
+    width: '100%',
+    borderWidth: 0
+  }
+};
+var slateButtons = {
+  primary: {
+    width: '60%',
+    borderWidth: 0,
+    marginRight: 'auto !important',
+    fontSize: 18
+  }
+};
+var splitButtons = {
+  primary: {
+    width: '50%',
+    borderWidth: 0,
+    fontWeight: 700,
+    textTransform: 'uppercase'
+  }
+};
+var templateOverrides = {
+  air: airButtons,
+  focus: focusButtons,
+  mural: muralButtons,
+  default: pingDefaultButtons,
+  slate: slateButtons,
+  split: splitButtons
+};
+var defaultThemeOverrides = function defaultThemeOverrides(defaultTheme) {
+  return {
+    primary: {
+      bg: defaultTheme.configuration.buttonColor,
+      borderColor: defaultTheme.configuration.buttonColor,
+      color: defaultTheme.configuration.buttonTextColor,
+      '&.is-hovered, &.is-active': {
+        bg: defaultTheme.configuration.buttonColor,
+        borderColor: defaultTheme.configuration.buttonColor,
+        opacity: 0.9
+      },
+      '&.is-focused': {
+        bg: defaultTheme.configuration.buttonColor,
+        borderColor: defaultTheme.configuration.buttonColor
+      }
+    }
+  };
+};
+
+var buttons = {
+  __proto__: null,
+  templateOverrides: templateOverrides,
+  defaultThemeOverrides: defaultThemeOverrides,
+  'default': endUserButtons
+};
+
+var wordWrap = {
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word'
+};
+
+var baseFont = _objectSpread2(_objectSpread2({}, wordWrap), {}, {
+  fontFamily: 'proxima-nova, sans-serif !important',
+  WebkitFontSmoothing: 'antialiased',
+  textTransform: 'none'
+});
+
+var fieldHelperText = _objectSpread2(_objectSpread2({}, baseFont), {}, {
+  fontSize: 'md',
+  p: '15px !important',
+  borderRadius: '0 0 2px 2px',
+  animation: 'fade-down-in 0.2s',
+  '&::first-letter': {
+    textTransform: 'uppercase !important'
+  },
+  '&.is-default': {
+    backgroundColor: 'fieldHelperText.defaultBackground',
+    color: 'fieldHelperText.default'
+  },
+  '&.is-error': {
+    backgroundColor: 'fieldHelperText.errorBackground',
+    color: 'fieldHelperText.error'
+  }
+});
+
+var endUserText = {
+  base: _objectSpread2(_objectSpread2({}, baseFont), {}, {
+    color: 'neutral.20',
+    fontSize: 'md'
+  }),
+  bodyWeak: _objectSpread2(_objectSpread2({}, baseFont), {}, {
+    fontSize: 'sm',
+    color: 'text.secondary'
+  }),
+  heading: _objectSpread2(_objectSpread2({}, baseFont), {}, {
+    color: 'neutral.20',
+    fontWeight: '400',
+    fontSize: 'lg',
+    fontFamily: 'standard'
+  }),
+  subheading: _objectSpread2(_objectSpread2({}, baseFont), {}, {
+    fontSize: 'md'
+  }),
+  label: _objectSpread2(_objectSpread2({}, baseFont), {}, {
+    fontSize: 15,
+    fontWeight: 600,
+    color: 'text.secondary'
+  }),
+  input: _objectSpread2(_objectSpread2({}, baseFont), {}, {
+    color: 'neutral.30',
+    fontSize: 15,
+    fontWeight: 600,
+    container: {
+      position: 'relative'
+    }
+  }),
+  fieldHelperText: fieldHelperText
+};
+var defaultThemeOverrides$1 = function defaultThemeOverrides(defaultTheme) {
+  return {
+    heading: {
+      color: defaultTheme.configuration.headingTextColor
+    },
+    subheading: {
+      color: defaultTheme.configuration.headingTextColor
+    },
+    base: {
+      color: defaultTheme.configuration.bodyTextColor
+    }
+  };
+};
+
+var text = {
+  __proto__: null,
+  wordWrap: wordWrap,
+  defaultThemeOverrides: defaultThemeOverrides$1,
+  'default': endUserText
+};
+
+var endUserInput = _objectSpread2(_objectSpread2({}, endUserText.input), {}, {
+  position: 'relative',
+  background: 'white',
+  borderColor: 'neutral.40',
+  borderWidth: '1px !important',
+  borderStyle: 'solid',
+  borderRadius: 2,
+  display: 'block',
+  boxSizing: 'border-box',
+  width: '100%',
+  px: 10,
+  paddingTop: 10,
+  paddingBottom: 10,
+  color: 'neutral.30',
+  outline: 'none',
+  '&:focus': {
+    borderColor: 'activeHover'
+  },
+  '&:after': {
+    display: 'none'
+  }
+});
+
+endUserInput.small = _objectSpread2(_objectSpread2({}, endUserInput.default), {}, {
+  '&:focus': {
+    outline: 'none',
+    borderColor: 'activeHover'
+  },
+  background: 'white',
+  borderRadius: 2,
+  fontWeight: 500,
+  color: '#4C4C4C',
+  height: '28px',
+  pb: '2px,',
+  pt: '2px',
+  pl: 'sm',
+  pr: 'sm'
+});
+endUserInput.containedIcon = {
+  position: 'absolute',
+  right: 0,
+  top: '50%',
+  transform: 'translate(-50%, -50%)'
+};
+var slateInput = {
+  borderTop: 0,
+  borderLeft: 0,
+  borderRight: 0,
+  borderRadius: 0,
+  outline: 0,
+  paddingTop: 15,
+  paddingBottom: 10,
+  borderBottomWidth: 1,
+  borderBottomStyle: 'solid',
+  background: '#f5f5f5',
+  '.is-float-label &': {
+    background: 'transparent'
+  }
+};
+slateInput.small = _objectSpread2(_objectSpread2({}, slateInput), {}, {
+  backgroundColor: 'transparent',
+  paddingTop: 10
+});
+var templateOverrides$1 = {
+  slate: slateInput
+};
+var defaultThemeOverrides$2 = function defaultThemeOverrides(defaultTheme) {
+  return {
+    borderColor: defaultTheme.configuration.buttonColor,
+    small: {
+      borderColor: defaultTheme.configuration.buttonColor
+    }
+  };
+};
+
+var input = {
+  __proto__: null,
+  slateInput: slateInput,
+  templateOverrides: templateOverrides$1,
+  defaultThemeOverrides: defaultThemeOverrides$2,
+  'default': endUserInput
+};
+
+var container = {
+  position: 'relative'
+};
+
+var input$1 = _objectSpread2(_objectSpread2({}, endUserInput), {}, {
+  pr: 'xl',
+  '.is-float-label &': {
+    height: 49,
+    paddingBottom: 5,
+    paddingTop: '15px !important'
+  }
+});
+
+var slateComboBox = {
+  input: _objectSpread2(_objectSpread2({}, slateInput), {}, {
+    paddingTop: 10,
+    paddingBottom: 5,
+    height: 43,
+    '.is-float-label &': _objectSpread2(_objectSpread2({}, slateInput['.is-float-label &']), {}, {
+      height: 43,
+      paddingBottom: 10
+    }),
+    '&:focus': {
+      borderColor: null
+    },
+    listBoxPopup: {
+      borderRadius: 0
+    }
+  })
+};
+var templateOverrides$2 = {
+  slate: slateComboBox
+};
+var defaultThemeOverrides$3 = function defaultThemeOverrides(defaultTheme) {
+  return {
+    input: {
+      borderColor: defaultTheme.configuration.buttonColor
+    }
+  };
+};
+var endUserComboBox = {
+  container: container,
+  input: input$1
+};
+
+var comboBox = {
+  __proto__: null,
+  templateOverrides: templateOverrides$2,
+  defaultThemeOverrides: defaultThemeOverrides$3,
+  'default': endUserComboBox
+};
+
+var activeFloatLabel = {
+  fontWeight: '400 !important',
+  fontSize: '13px',
+  transform: 'translate(0px, -9px) scale(0.75)',
+  textTransform: 'uppercase !important',
+  transition: 'all 0.05s'
+};
+
+var radioLabel = _objectSpread2(_objectSpread2({}, endUserText.base), {}, {
+  marginBottom: 3,
+  cursor: 'pointer',
+  div: {
+    flexShrink: 0
+  },
+  alignItems: 'center'
+});
+
+var checkboxLabel = _objectSpread2(_objectSpread2({}, endUserText.base), {}, {
+  cursor: 'pointer',
+  div: {
+    flexShrink: 0
+  },
+  alignItems: 'center'
+});
+
+var focusFloatLabel = {
+  color: 'text.active'
+};
+
+var endUserLabel = _objectSpread2(_objectSpread2({}, endUserText.label), {}, {
+  display: 'block',
+  mb: 'xs',
+  alignItems: 'center',
+  lineHeight: '1em',
+  '&.is-float-label': {
+    position: 'absolute',
+    zIndex: 1,
+    top: '17px',
+    left: '10px',
+    mb: 0,
+    transformOrigin: 'top left',
+    transition: 'all 0.2s ease-out',
+    pointerEvents: 'none',
+    '& + div > input': {
+      paddingTop: 20
+    }
+  },
+  radio: radioLabel,
+  checkbox: checkboxLabel,
+  '.is-float-label-active &.is-float-label': _objectSpread2({}, activeFloatLabel),
+  '.has-focus-within &.is-float-label': _objectSpread2({}, focusFloatLabel),
+  indicator: {
+    display: 'none !important'
+  }
+});
+
+var slateLabel = {
+  '&.is-float-label': {
+    zIndex: 1,
+    top: '15px',
+    left: '10px',
+    '& + div > input': {
+      paddingTop: 15
+    }
+  },
+  '.is-float-label-active &.is-float-label': {
+    transform: 'translate(0px, -13px) scale(0.75)'
+  }
+};
+var templateOverrides$3 = {
+  slate: slateLabel
+};
+var defaultThemeOverrides$4 = function defaultThemeOverrides(defaultTheme) {
+  return {
+    radio: {
+      color: defaultTheme.configuration.bodyTextColor
+    },
+    checkbox: {
+      color: defaultTheme.configuration.bodyTextColor
+    }
+  };
+};
+
+var label = {
+  __proto__: null,
+  templateOverrides: templateOverrides$3,
+  defaultThemeOverrides: defaultThemeOverrides$4,
+  'default': endUserLabel
+};
+
+var listBoxPopup = _objectSpread2(_objectSpread2({}, endUserInput), {}, {
+  position: 'absolute',
+  width: '100%',
+  padding: 0,
+  zIndex: 2,
+  borderTop: 'none',
+  background: 'white',
+  boxShadow: 'standard'
+});
+
+var option = _objectSpread2(_objectSpread2({}, endUserText.base), {}, {
+  px: 'md',
+  py: 'sm',
+  alignItems: 'center',
+  outline: 'none',
+  cursor: 'pointer',
+  '&.is-selected': _objectSpread2(_objectSpread2({}, endUserText.inputValue), {}, {
+    pl: 0
+  }),
+  '&.is-focused': {
+    color: 'white',
+    bg: 'active'
+  }
+});
+
+var transparent = {
+  select: {
+    bg: 'transparent'
+  },
+  '> div:after': {
+    bg: 'transparent'
+  }
+};
+var arrow = {
+  position: 'absolute',
+  top: '50%',
+  right: 10,
+  transform: 'translateY(-50%)'
+};
+
+var endUserSelect = _objectSpread2(_objectSpread2({}, endUserInput), {}, {
+  arrow: arrow,
+  lineHeight: 'unset',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  svg: {
+    height: 30,
+    width: 30
+  },
+  '&.is-focused': {
+    boxShadow: 'focus'
+  },
+  '& :after': {
+    display: 'none'
+  },
+  '.is-float-label &': {
+    height: 49,
+    paddingBottom: 5,
+    paddingTop: 15
+  },
+  listBoxPopup: listBoxPopup,
+  option: option,
+  transparent: transparent
+});
+
+var slateSelect = _objectSpread2(_objectSpread2({}, slateInput), {}, {
+  paddingTop: 10,
+  paddingBottom: 5,
+  height: 43,
+  '.is-float-label &': _objectSpread2(_objectSpread2({}, slateInput['.is-float-label &']), {}, {
+    height: 43,
+    paddingBottom: 10
+  }),
+  '&:focus': {
+    borderColor: null
+  },
+  listBoxPopup: {
+    borderRadius: 0
+  }
+});
+
+var templateOverrides$4 = {
+  slate: slateSelect
+};
+var defaultThemeOverrides$5 = function defaultThemeOverrides(defaultTheme) {
+  return {
+    borderColor: defaultTheme.configuration.buttonColor,
+    listBoxPopup: {
+      borderColor: defaultTheme.configuration.buttonColor
+    },
+    option: {
+      '&.is-focused': {
+        color: defaultTheme.configuration.buttonTextColor,
+        bg: defaultTheme.configuration.buttonColor
+      }
+    }
+  };
+};
+
+var select = {
+  __proto__: null,
+  templateOverrides: templateOverrides$4,
+  defaultThemeOverrides: defaultThemeOverrides$5,
+  'default': endUserSelect
+};
+
+var endUserRadio = {
+  width: 20,
+  height: 20,
+  mr: 'sm',
+  'input:focus ~ &': {
+    bg: 'transparent'
+  },
+  'input ~ &.is-focused': {
+    bg: 'highlight'
+  }
+};
+var defaultThemeOverrides$6 = function defaultThemeOverrides(defaultTheme) {
+  return {
+    color: defaultTheme.configuration.buttonColor
+  };
+};
+
+var radio = {
+  __proto__: null,
+  defaultThemeOverrides: defaultThemeOverrides$6,
+  'default': endUserRadio
+};
+
+var endUserCheckbox = _objectSpread2(_objectSpread2({}, endUserText.base), {}, {
+  mr: 'sm',
+  'input:focus ~ &': {
+    bg: 'transparent'
+  },
+  'input ~ &.is-focused': {
+    outline: 'none',
+    boxShadow: 'focus'
+  }
+});
+
+var defaultThemeOverrides$7 = function defaultThemeOverrides(defaultTheme) {
+  return {
+    color: defaultTheme.configuration.buttonColor
+  };
+};
+
+var checkbox = {
+  __proto__: null,
+  defaultThemeOverrides: defaultThemeOverrides$7,
+  'default': endUserCheckbox
+};
+
+var applyCustomizations = function applyCustomizations(themeModule, defaultTheme) {
+  var base = _.cloneDeep(themeModule.default);
+
+  var templateOverrides = themeModule.templateOverrides ? themeModule.templateOverrides[defaultTheme.template] || {} : {};
+  var defaultThemeOverrides = themeModule.defaultThemeOverrides ? themeModule.defaultThemeOverrides(defaultTheme) : {};
+  return _.merge(base, _.merge(_.cloneDeep(templateOverrides), defaultThemeOverrides));
+};
+
+var endUserForms = {
+  input: endUserInput,
+  select: endUserSelect,
+  radio: endUserRadio,
+  label: endUserLabel,
+  checkbox: endUserCheckbox,
+  comboBox: endUserComboBox
+};
+var defaultThemeOverrides$8 = function defaultThemeOverrides(defaultTheme) {
+  return {
+    input: applyCustomizations(input, defaultTheme),
+    select: applyCustomizations(select, defaultTheme),
+    radio: applyCustomizations(radio, defaultTheme),
+    label: applyCustomizations(label, defaultTheme),
+    checkbox: applyCustomizations(checkbox, defaultTheme),
+    comboBox: applyCustomizations(comboBox, defaultTheme)
+  };
+};
+
+var forms = {
+  __proto__: null,
+  defaultThemeOverrides: defaultThemeOverrides$8,
+  'default': endUserForms
+};
+
+var textColors = {
+  secondary: '#798087',
+  active: '#2996cc'
+};
+var fieldHelperTextColors = {
+  default: '#3d454d',
+  defaultBackground: '#e1eef5',
+  error: '#a31300',
+  errorBackground: '#eddad9'
+};
+var endUserColors = {
+  active: '#2996cc',
+  activeHover: '#3d88ae',
+  critical: '#a31300',
+  warning: '#eeb91c',
+  success: '#21934c',
+  neutral: {
+    10: '#575f67',
+    20: '#686f77',
+    30: '#798087',
+    40: '#8b9197',
+    50: '#9da2a8',
+    60: '#afb4b8',
+    70: '#c2c6ca',
+    80: '#d5d8db',
+    90: '#e8ebed',
+    95: '#f8f8f8'
+  },
+  line: {
+    hairline: '#8b9197'
+  },
+  card: '#FFFFFF',
+  background: '#EDEDED',
+  text: textColors,
+  fieldHelperText: fieldHelperTextColors
+};
+var airColors = {
+  button: '#FF6600',
+  buttonText: '#FFFFFF',
+  bodyText: '#341C0B',
+  headingText: '#002942',
+  link: '#313B87',
+  card: '#FFFFFF',
+  background: '#F0F8FF',
+  headerBackground: '#002942'
+};
+var focusColors = {
+  button: '#cb0020',
+  buttonText: '#ffffff',
+  bodyText: '#4a4a4a',
+  headingText: '#cb0020',
+  link: '#2996cc',
+  card: '#fcfcfc',
+  background: '#ededed'
+};
+var muralColors = {
+  button: '#61b375',
+  buttonText: '#ffffff',
+  bodyText: '#000000',
+  headingText: '#000000',
+  link: '#2996cc',
+  card: '#fcfcfc',
+  background: ''
+};
+var pingDefaultColors = {
+  button: '#2996cc',
+  buttonText: '#ffffff',
+  bodyText: '#686f77',
+  headingText: '#686f77',
+  link: '#2996cc',
+  card: '#ffffff',
+  background: '#ededed'
+};
+var slateColors = {
+  button: '#4A4A4A',
+  buttonText: '#FFFFFF',
+  bodyText: '#4C4C4C',
+  headingText: '#4A4A4A',
+  link: '#5F5F5F',
+  card: '#FFFFFF',
+  background: ''
+};
+var splitColors = {
+  button: '#263956',
+  buttonText: '#ffffff',
+  bodyText: '#263956',
+  headingText: '#686f77',
+  link: '#263956',
+  card: '#fcfcfc',
+  background: '#263956'
+};
+var templateOverrides$5 = {
+  air: airColors,
+  focus: focusColors,
+  mural: muralColors,
+  default: pingDefaultColors,
+  slate: slateColors,
+  split: splitColors
+};
+var defaultThemeOverrides$9 = function defaultThemeOverrides(defaultTheme) {
+  return {
+    cardBg: defaultTheme.configuration.cardColor,
+    logoBg: defaultTheme.configuration.headerBackgroundColor,
+    line: {
+      hairline: defaultTheme.configuration.buttonColor
+    }
+  };
+};
+
+var colors = {
+  __proto__: null,
+  templateOverrides: templateOverrides$5,
+  defaultThemeOverrides: defaultThemeOverrides$9,
+  'default': endUserColors
+};
+
+var container$1 = _objectSpread2(_objectSpread2({}, endUserInput), {}, {
+  position: 'absolute',
+  width: '100%',
+  padding: 0,
+  zIndex: 100,
+  background: 'white',
+  boxShadow: 'standard',
+  color: '#4aba78'
+});
+
+var defaultThemeOverrides$a = function defaultThemeOverrides(defaultTheme) {
+  return {
+    container: {
+      borderColor: defaultTheme.configuration.buttonColor
+    }
+  };
+};
+var endUserPopoverMenu = {
+  container: container$1
+};
+
+var popoverMenu = {
+  __proto__: null,
+  defaultThemeOverrides: defaultThemeOverrides$a,
+  'default': endUserPopoverMenu
+};
+
+var listBox = {
+  outline: 'none',
+  option: {
+    px: 'md',
+    py: 'sm',
+    alignItems: 'center',
+    outline: 'none',
+    wordBreak: 'break-word',
+    color: '#798087',
+    cursor: 'pointer',
+    '&.is-selected': {
+      pl: 0
+    },
+    '&.is-focused': {
+      color: 'white',
+      bg: 'active'
+    }
+  }
+};
+var defaultThemeOverrides$b = function defaultThemeOverrides(defaultTheme) {
+  return {
+    option: {
+      '&.is-focused': {
+        color: defaultTheme.configuration.buttonTextColor,
+        bg: defaultTheme.configuration.buttonColor
+      }
+    }
+  };
+};
+
+var listBox$1 = {
+  __proto__: null,
+  defaultThemeOverrides: defaultThemeOverrides$b,
+  'default': listBox
+};
+
+var endUserLink = {
+  color: 'active',
+  textDecoration: 'none',
+  fontFamily: 'standard',
+  cursor: 'pointer',
+  outline: 'none',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': {
+    textDecoration: 'underline'
+  },
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  }
+};
+var defaultThemeOverrides$c = function defaultThemeOverrides(defaultTheme) {
+  return {
+    color: defaultTheme.configuration.linkTextColor
+  };
+};
+
+var link = {
+  __proto__: null,
+  defaultThemeOverrides: defaultThemeOverrides$c,
+  'default': endUserLink
+};
+
+var backgroundType = {
+  default: 'DEFAULT',
+  image: 'IMAGE',
+  color: 'COLOR',
+  none: 'NONE'
+};
+var logoType = {
+  none: 'NONE',
+  image: 'IMAGE'
+};
+var getLogo = function getLogo(defaultTheme) {
+  var _defaultTheme$configu;
+
+  if (!(defaultTheme !== null && defaultTheme !== void 0 && defaultTheme.configuration) || defaultTheme.configuration.logoType === logoType.none) {
+    return null;
+  }
+
+  return ((_defaultTheme$configu = defaultTheme.configuration.logo) === null || _defaultTheme$configu === void 0 ? void 0 : _defaultTheme$configu.href) || null;
+};
+var getBackground = function getBackground(defaultTheme) {
+  var _defaultTheme$configu2, _defaultTheme$configu3;
+
+  var type = (defaultTheme === null || defaultTheme === void 0 ? void 0 : (_defaultTheme$configu2 = defaultTheme.configuration) === null || _defaultTheme$configu2 === void 0 ? void 0 : _defaultTheme$configu2.backgroundType) || backgroundType.default;
+  var backgroundColor = null;
+  var backgroundImage = null;
+
+  switch (type) {
+    case backgroundType.color:
+      backgroundColor = defaultTheme.configuration.backgroundColor || null;
+      break;
+
+    case backgroundType.image:
+      backgroundImage = ((_defaultTheme$configu3 = defaultTheme.configuration.backgroundImage) === null || _defaultTheme$configu3 === void 0 ? void 0 : _defaultTheme$configu3.href) || null;
+      break;
+
+    case backgroundType.none:
+      backgroundColor = 'white';
+      break;
+  }
+
+  return {
+    backgroundImage: backgroundImage,
+    backgroundColor: backgroundColor
+  };
+};
+var getCardBackgroundColor = function getCardBackgroundColor(defaultTheme) {
+  var _defaultTheme$configu4;
+
+  return (defaultTheme === null || defaultTheme === void 0 ? void 0 : (_defaultTheme$configu4 = defaultTheme.configuration) === null || _defaultTheme$configu4 === void 0 ? void 0 : _defaultTheme$configu4.cardColor) || null;
+};
+var getFooter = function getFooter(defaultTheme) {
+  var _defaultTheme$configu5;
+
+  return defaultTheme === null || defaultTheme === void 0 ? void 0 : (_defaultTheme$configu5 = defaultTheme.configuration) === null || _defaultTheme$configu5 === void 0 ? void 0 : _defaultTheme$configu5.footer;
+};
+
+var brandingThemesPageContainer = {
+  display: 'inline-block !important',
+  position: 'relative',
+  flexGrow: 1,
+  width: '100%',
+  backgroundRepeat: 'repeat',
+  backgroundColor: 'background'
+};
+var muralBrandingThemesPageContainer = {
+  backgroundImage: 'url("https://assets.pingone.com/ux/branding-themes/0.22.0/mural/bg.jpg")',
+  backgroundColor: '',
+  backgroundPosition: 'center',
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: 'cover'
+};
+var slateBrandingThemesPageContainer = {
+  backgroundImage: 'url("https://assets.pingone.com/ux/branding-themes/0.22.0/slate/bg.jpg")',
+  backgroundColor: '',
+  backgroundPosition: 'center',
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: 'cover'
+};
+var templateOverrides$6 = {
+  mural: muralBrandingThemesPageContainer,
+  slate: slateBrandingThemesPageContainer
+};
+var defaultThemeOverrides$d = function defaultThemeOverrides(defaultTheme) {
+  var _getBackground = getBackground(defaultTheme),
+      backgroundImage = _getBackground.backgroundImage,
+      backgroundColor = _getBackground.backgroundColor;
+
+  var isSlateOrMural = defaultTheme.template === 'slate' || defaultTheme.template === 'mural';
+
+  switch (defaultTheme.configuration.backgroundType) {
+    case backgroundType.default:
+      return {};
+
+    case backgroundType.image:
+      return backgroundImage ? {
+        backgroundImage: "url(\"" + backgroundImage + "\")",
+        backgroundColor: isSlateOrMural ? '#798087' : '#ffffff'
+      } : {
+        backgroundColor: ''
+      };
+
+    case backgroundType.none:
+      return {
+        backgroundColor: '#ffffff00',
+        backgroundImage: ''
+      };
+
+    case backgroundType.color:
+    default:
+      return {
+        backgroundImage: '',
+        backgroundColor: backgroundColor || 'background'
+      };
+  }
+};
+
+var pageContainer = {
+  __proto__: null,
+  templateOverrides: templateOverrides$6,
+  defaultThemeOverrides: defaultThemeOverrides$d,
+  'default': brandingThemesPageContainer
+};
+
+var brandingThemesLogoContainer = {
+  padding: '50px 30px 0px 30px',
+  marginRight: 'auto',
+  marginLeft: 'auto'
+};
+var splitBrandingThemesLogoContainer = {
+  width: '35%',
+  minWidth: 150,
+  marginRight: 10,
+  padding: '50px 30px',
+  justifyContent: 'center',
+  '@media all and (max-width: 600px)': {
+    borderRight: 'none',
+    width: 'auto',
+    margin: 0,
+    borderBottomWidth: 4,
+    borderBottomStyle: 'solid'
+  }
+};
+var airBrandingThemesLogoContainer = {
+  position: 'fixed',
+  flexShrink: 0,
+  top: 0,
+  left: 0,
+  right: 0,
+  width: '100%',
+  padding: '10px 20px',
+  backgroundColor: 'logoBg',
+  minHeight: 50,
+  maxHeight: 100,
+  zIndex: 1000,
+  '@media all and (max-width: 600px)': {
+    position: 'relative'
+  }
+};
+var slateBrandingThemesLogoContainer = {
+  padding: '50px 30px 0px 30px',
+  marginLeft: 0
+};
+var muralBrandingThemesLogoContainer = {
+  padding: '50px 30px 0px 30px',
+  borderRight: 'none'
+};
+var templateOverrides$7 = {
+  air: airBrandingThemesLogoContainer,
+  split: splitBrandingThemesLogoContainer,
+  slate: slateBrandingThemesLogoContainer,
+  mural: muralBrandingThemesLogoContainer
+};
+var defaultThemeOverrides$e = function defaultThemeOverrides(defaultTheme) {
+  return defaultTheme.template === 'split' ? {
+    background: getCardBackgroundColor(defaultTheme) || '#fff'
+  } : {};
+};
+
+var logoContainer = {
+  __proto__: null,
+  templateOverrides: templateOverrides$7,
+  defaultThemeOverrides: defaultThemeOverrides$e,
+  'default': brandingThemesLogoContainer
+};
+
+var brandingThemesPageContent = {
+  margin: 25,
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  '@media only screen and (max-width: 480px)': {
+    margin: 0
+  }
+};
+var airBrandingThemesPageContent = {
+  paddingTop: 90,
+  paddingBottom: 125,
+  '@media only screen and (max-width: 600px)': {
+    padding: 0,
+    margin: 0
+  }
+};
+var templateOverrides$8 = {
+  air: airBrandingThemesPageContent
+};
+
+var pageContent = {
+  __proto__: null,
+  templateOverrides: templateOverrides$8,
+  'default': brandingThemesPageContent
+};
+
+var brandingThemesCard = {
+  boxShadow: '0 1px 4px 1px hsl(210deg 6% 50% / 35%)',
+  maxWidth: 450,
+  width: '100%',
+  margin: 10,
+  backgroundColor: 'card',
+  '@media only screen and (max-width: 480px)': {
+    maxWidth: '100%',
+    width: '100%',
+    height: '100%',
+    boxShadow: 'none'
+  },
+  '@media only screen and (max-width: 600px)': {
+    margin: 0,
+    maxWidth: '100%',
+    width: '100%'
+  }
+};
+var splitBrandingThemesCard = {
+  flexDirection: 'row !important',
+  maxWidth: 600,
+  marginBottom: 40,
+  marginTop: 20,
+  borderRadius: 3,
+  background: 'transparent',
+  boxShadow: 'none',
+  '@media all and (max-width: 600px)': {
+    borderRadius: 0,
+    flexDirection: 'column !important'
+  }
+};
+var slateBrandingThemesCard = {
+  marginRight: '60%',
+  maxWidth: '40%',
+  boxShadow: 'none',
+  '@media all and (max-width: 600px)': {
+    marginRight: 0
+  }
+};
+var muralBrandingThemesCard = {
+  marginBottom: '20px',
+  marginTop: '80px',
+  marginLeft: '80px',
+  borderRadius: '3px',
+  marginRight: 'auto',
+  boxShadow: 'none',
+  '@media all and (max-width: 600px)': {
+    borderRadius: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 0,
+    marginBottom: 0
+  }
+};
+var templateOverrides$9 = {
+  split: splitBrandingThemesCard,
+  slate: slateBrandingThemesCard,
+  mural: muralBrandingThemesCard
+};
+var defaultThemeOverrides$f = function defaultThemeOverrides(defaultTheme) {
+  return {
+    backgroundColor: getCardBackgroundColor(defaultTheme)
+  };
+};
+
+var card = {
+  __proto__: null,
+  templateOverrides: templateOverrides$9,
+  defaultThemeOverrides: defaultThemeOverrides$f,
+  'default': brandingThemesCard
+};
+
+var brandingThemesFormContainer = {
+  width: '100%',
+  padding: '50px 30px',
+  marginRight: 'auto',
+  marginLeft: 'auto'
+};
+var splitBrandingThemesFormContainer = {
+  '@media all and (min-width: 600px)': {
+    width: '65%'
+  }
+};
+var templateOverrides$a = {
+  split: splitBrandingThemesFormContainer
+};
+var defaultThemeOverrides$g = function defaultThemeOverrides(defaultTheme) {
+  return defaultTheme.template === 'split' ? {
+    background: getCardBackgroundColor(defaultTheme) || '#fff'
+  } : {};
+};
+
+var formContainer = {
+  __proto__: null,
+  templateOverrides: templateOverrides$a,
+  defaultThemeOverrides: defaultThemeOverrides$g,
+  'default': brandingThemesFormContainer
+};
+
+var brandingThemesFooterContainer = {
+  backgroundColor: 'cardBg',
+  paddingTop: 25,
+  textAlign: 'center'
+};
+var airBrandingThemesFooterContainer = {
+  position: 'fixed',
+  left: 0,
+  bottom: 0,
+  right: 0,
+  backgroundColor: '#fff',
+  padding: '25px 20px',
+  maxHeight: 150,
+  zIndex: 1000,
+  alignItems: 'center',
+  overflow: 'hidden',
+  '@media all and (max-width: 600px)': {
+    position: 'relative',
+    padding: 0,
+    paddingTop: 25,
+    backgroundColor: 'cardBg',
+    maxHeight: 'inherit'
+  }
+};
+var slateBrandingThemesFooterContainer = {
+  textAlign: 'start'
+};
+var templateOverrides$b = {
+  air: airBrandingThemesFooterContainer,
+  slate: slateBrandingThemesFooterContainer
+};
+
+var footer = {
+  __proto__: null,
+  templateOverrides: templateOverrides$b,
+  'default': brandingThemesFooterContainer
+};
+
+var brandingThemesLogo = {
+  maxHeight: 80,
+  maxWidth: '100%',
+  marginRight: 'auto',
+  marginLeft: 'auto',
+  flexShrink: 0
+};
+var airBrandingThemesLogo = {
+  marginLeft: 0
+};
+var slateBrandingThemesLogo = {
+  marginLeft: 0
+};
+var templateOverrides$c = {
+  air: airBrandingThemesLogo,
+  slate: slateBrandingThemesLogo
+};
+
+var logo = {
+  __proto__: null,
+  templateOverrides: templateOverrides$c,
+  'default': brandingThemesLogo
+};
+
+var brandingThemesSpacer = {
+  content: '""',
+  display: 'flex',
+  flexGrow: 1
+};
+
+var brandingThemesTopSpacer = _objectSpread2(_objectSpread2({}, brandingThemesSpacer), {}, {
+  maxHeight: 225
+});
+
+var brandingThemesVariants = {
+  brandingThemesPageContainer: brandingThemesPageContainer,
+  brandingThemesPageContent: brandingThemesPageContent,
+  brandingThemesCard: brandingThemesCard,
+  brandingThemesLogoContainer: brandingThemesLogoContainer,
+  brandingThemesLogo: brandingThemesLogo,
+  brandingThemesFooterContainer: brandingThemesFooterContainer,
+  brandingThemesFormContainer: brandingThemesFormContainer,
+  brandingThemesTopSpacer: brandingThemesTopSpacer,
+  brandingThemesBottomSpacer: brandingThemesSpacer
+};
+var defaultThemeOverrides$h = function defaultThemeOverrides(defaultTheme) {
+  return {
+    brandingThemesPageContainer: applyCustomizations(pageContainer, defaultTheme),
+    brandingThemesLogoContainer: applyCustomizations(logoContainer, defaultTheme),
+    brandingThemesCard: applyCustomizations(card, defaultTheme),
+    brandingThemesLogo: applyCustomizations(logo, defaultTheme),
+    brandingThemesFooterContainer: applyCustomizations(footer, defaultTheme),
+    brandingThemesPageContent: applyCustomizations(pageContent, defaultTheme),
+    brandingThemesFormContainer: applyCustomizations(formContainer, defaultTheme)
+  };
+};
+
+var layoutVariants = {
+  __proto__: null,
+  defaultThemeOverrides: defaultThemeOverrides$h,
+  'default': brandingThemesVariants
+};
+
+var brandingThemesImages = {
+  brandingThemesLogo: brandingThemesLogo
+};
+var defaultThemeOverrides$i = function defaultThemeOverrides(defaultTheme) {
+  return {
+    brandingThemesLogo: applyCustomizations(logo, defaultTheme)
+  };
+};
+
+var images = {
+  __proto__: null,
+  defaultThemeOverrides: defaultThemeOverrides$i,
+  'default': brandingThemesImages
+};
+
+var endUserSeparator = {
+  bg: 'line.hairline',
+  width: '100%',
+  height: '1px',
+  my: '5px',
+  '&.is-vertical': {
+    width: '1px',
+    height: '100%',
+    mx: '5px'
+  }
+};
+
+var base = 10;
+var space = {
+  xs: base * 0.5,
+  sm: base,
+  md: base * 1.5,
+  lg: base * 2.5,
+  xl: base * 4,
+  xx: base * 6.5
+};
+var fontSizes = {
+  xs: '11px',
+  sm: '13px',
+  md: '15px',
+  lg: '22px',
+  xl: '28px',
+  xx: '36px'
+};
+var fontWeights = {
+  regular: 400,
+  light: 300,
+  semibold: 600,
+  bold: 700
+};
+var card$1 = {
+  bg: 'cardBg',
+  boxShadow: 'overlay',
+  boxSizing: 'border-box',
+  margin: '0 auto',
+  maxWidth: 400,
+  minHeight: 200,
+  position: 'relative',
+  width: '100%',
+  p: 'xl'
+};
+var shadows = {
+  overlay: '0 1px 4px 1px rgba(121, 128, 135, 0.35)',
+  standard: '0 1px 3px rgba(121, 128, 135, 0.35)',
+  row: '0 0 9px rgba(121, 128, 135, 0.35)',
+  focus: '0 0 5px rgba(121, 128, 135, 0.35)'
+};
+var endUserTheme = {
+  name: 'End User',
+  fonts: {
+    standard: '"proxima-nova", "helvetica", "arial", sans-serif'
+  },
+  space: space,
+  shadows: shadows,
+  colors: endUserColors,
+  buttons: endUserButtons,
+  fontSizes: fontSizes,
+  fontWeights: fontWeights,
+  text: endUserText,
+  forms: endUserForms,
+  images: brandingThemesImages,
+  styles: {
+    a: endUserLink
+  },
+  variants: _objectSpread2({
+    card: card$1,
+    boxes: {
+      inputInContainerSlot: {
+        position: 'absolute',
+        bg: 'transparent',
+        right: 'sm',
+        top: '50%',
+        transform: 'translateY(-50%)'
+      }
+    },
+    separator: endUserSeparator,
+    listBox: listBox,
+    popoverMenu: endUserPopoverMenu,
+    link: endUserLink
+  }, brandingThemesVariants)
+};
+var defaultThemeOverrides$j = function defaultThemeOverrides(defaultTheme) {
+  return {
+    colors: applyCustomizations(colors, defaultTheme),
+    buttons: applyCustomizations(buttons, defaultTheme),
+    text: applyCustomizations(text, defaultTheme),
+    forms: applyCustomizations(forms, defaultTheme),
+    images: applyCustomizations(images, defaultTheme),
+    variants: _objectSpread2({
+      link: applyCustomizations(link, defaultTheme),
+      listBox: applyCustomizations(listBox$1, defaultTheme),
+      popoverMenu: applyCustomizations(popoverMenu, defaultTheme)
+    }, applyCustomizations(layoutVariants, defaultTheme))
+  };
+};
+
+var endUserTheme$1 = {
+  __proto__: null,
+  defaultThemeOverrides: defaultThemeOverrides$j,
+  'default': endUserTheme
+};
+
+var astroModifications = {
+  forms: {
+    label: {
+      checkbox: _objectSpread2(_objectSpread2(_objectSpread2({}, astroTheme$1.text.base), wordWrap), {}, {
+        div: {
+          flexShrink: 0
+        }
+      }),
+      radio: _objectSpread2(_objectSpread2(_objectSpread2({}, astroTheme$1.text.base), wordWrap), {}, {
+        div: {
+          flexShrink: 0
+        }
+      }),
+      indicator: {
+        display: 'none !important'
+      }
+    }
+  }
+};
+var astroTheme = _.merge(_.cloneDeep(astroTheme$1), astroModifications);
+
+var getTheme = function getTheme(themeName, defaultTheme) {
+  switch (themeName) {
+    case 'astro':
+      return astroTheme;
+
+    case 'end-user':
+    default:
+      if (defaultTheme) {
+        return applyCustomizations(endUserTheme$1, defaultTheme);
+      }
+
+      return endUserTheme;
+  }
+};
+
+var ThemeWrapper = function ThemeWrapper(_ref) {
+  var theme = _ref.theme,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme || astroTheme
+  }, /*#__PURE__*/React.createElement(Box, {
+    height: "100%"
+  }, children)));
+};
+
+ThemeWrapper.propTypes = {
+  theme: PropTypes.shape(),
+  children: PropTypes.element.isRequired
+};
+ThemeWrapper.defaultProps = {
+  theme: null
+};
+
+var sanitizeHtmlOptions = {
+  allowedTags: ['a', 'b', 'blockquote', 'br', 'cite', 'code', 'dd', 'dl', 'dt', 'em', 'i', 'li', 'ol', 'p', 'pre', 'q', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'u', 'ul', 'h1', 'h2', 'h3', 'hr'],
+  allowedAttributes: {
+    a: ['href', 'target'],
+    blockquote: ['cite'],
+    q: ['cite'],
+    '*': ['class']
+  }
+};
+
+var sanitize = function sanitize(string) {
+  return sanitizeHtml(string, sanitizeHtmlOptions);
+};
+
+var ThemedMarkdown = function ThemedMarkdown(_ref) {
+  var _theme$text, _theme$text2, _theme$text2$heading, _theme$text3, _theme$text3$heading, _theme$text4, _theme$text4$heading, _theme$variants, _theme$variants$link, _theme$colors, _theme$colors$line;
+
+  var html = _ref.html;
+  var theme = useTheme();
+  var styles = {
+    display: 'block !important',
+    lineHeight: '1 !important',
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word'
+  };
+  var themeStyles = theme ? _objectSpread2(_objectSpread2({}, (_theme$text = theme.text) === null || _theme$text === void 0 ? void 0 : _theme$text.base), {}, {
+    'h1, h2, h3': {
+      color: (_theme$text2 = theme.text) === null || _theme$text2 === void 0 ? void 0 : (_theme$text2$heading = _theme$text2.heading) === null || _theme$text2$heading === void 0 ? void 0 : _theme$text2$heading.color,
+      fontWeight: (_theme$text3 = theme.text) === null || _theme$text3 === void 0 ? void 0 : (_theme$text3$heading = _theme$text3.heading) === null || _theme$text3$heading === void 0 ? void 0 : _theme$text3$heading.fontWeight,
+      fontFamily: (_theme$text4 = theme.text) === null || _theme$text4 === void 0 ? void 0 : (_theme$text4$heading = _theme$text4.heading) === null || _theme$text4$heading === void 0 ? void 0 : _theme$text4$heading.fontFamily
+    },
+    a: {
+      color: (_theme$variants = theme.variants) === null || _theme$variants === void 0 ? void 0 : (_theme$variants$link = _theme$variants.link) === null || _theme$variants$link === void 0 ? void 0 : _theme$variants$link.color,
+      textDecoration: 'none'
+    },
+    'a:hover': {
+      textDecoration: 'underline'
+    },
+    hr: {
+      width: '100%',
+      height: '1px !important',
+      border: 'none',
+      margin: '5px 0 !important',
+      backgroundColor: ((_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : (_theme$colors$line = _theme$colors.line) === null || _theme$colors$line === void 0 ? void 0 : _theme$colors$line.hairline) || '#e4e6e9'
+    }
+  }) : {};
+  return /*#__PURE__*/React.createElement(Box$1, {
+    "data-id": "html-box",
+    sx: _objectSpread2(_objectSpread2({}, styles), themeStyles),
+    dangerouslySetInnerHTML: {
+      __html: sanitize(html)
+    }
+  });
+};
+
+ThemedMarkdown.propTypes = {
+  html: PropTypes.string.isRequired
+};
+
+var ThemedPage = function ThemedPage(props) {
+  var defaultTheme = props.defaultTheme,
+      children = props.children;
+  var theme = getTheme('end-user', defaultTheme);
+  var logo = getLogo(defaultTheme);
+  var footer = getFooter(defaultTheme);
+  return /*#__PURE__*/React.createElement(ThemeWrapper, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(Box, {
+    variant: "brandingThemesPageContainer",
+    "data-id": "page-container"
+  }, /*#__PURE__*/React.createElement(Box, {
+    variant: "brandingThemesPageContent",
+    "data-id": "page-content"
+  }, /*#__PURE__*/React.createElement(Box, {
+    variant: "brandingThemesTopSpacer",
+    "data-id": "top-spacer"
+  }), /*#__PURE__*/React.createElement(Box, {
+    variant: "brandingThemesCard",
+    "data-id": "card"
+  }, (logo || (defaultTheme === null || defaultTheme === void 0 ? void 0 : defaultTheme.template) === 'air') && /*#__PURE__*/React.createElement(Box, {
+    variant: "brandingThemesLogoContainer",
+    "data-id": "logo-container"
+  }, logo && /*#__PURE__*/React.createElement(Image, {
+    variant: "brandingThemesLogo",
+    src: logo,
+    "data-id": "logo"
+  })), /*#__PURE__*/React.createElement(Box, {
+    variant: "brandingThemesFormContainer",
+    "data-id": "form-container"
+  }, children, (footer || (defaultTheme === null || defaultTheme === void 0 ? void 0 : defaultTheme.template) === 'air') && /*#__PURE__*/React.createElement(Box, {
+    variant: "brandingThemesFooterContainer",
+    "data-id": "footer-container"
+  }, footer && /*#__PURE__*/React.createElement(ThemedMarkdown, {
+    html: footer
+  })))), /*#__PURE__*/React.createElement(Box, {
+    variant: "brandingThemesBottomSpacer",
+    "data-id": "bottom-spacer"
+  }))));
+};
+
+ThemedPage.propTypes = {
+  defaultTheme: PropTypes.shape().isRequired,
+  children: PropTypes.element.isRequired
+};
+
+export { ThemedMarkdown, ThemedPage, getTheme };
+//# sourceMappingURL=index.modern.js.map