@telus-uds/components-web 1.12.0 → 2.1.0

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -95,10 +95,16 @@ const getItems = (items, params, concatenatePaths) => {
     const isLast = i === filteredItems.length - 1;
     const breadcrumbName = getBreadcrumbName(item, params);
     const href = getPath(item.path, params, concatenatePaths, paths);
+    const {
+      LinkRouter,
+      linkRouterProps
+    } = item;
     return {
       breadcrumbName,
       href,
       current: isLast,
+      LinkRouter,
+      linkRouterProps,
       ...omitProps(selectProps(item))
     };
   });
@@ -126,7 +132,6 @@ const Breadcrumbs = _ref2 => {
     linkRouterProps,
     params = {},
     tokens,
-    reactRouterLinkComponent,
     routes,
     variant,
     LinkRouter,
@@ -183,7 +188,6 @@ const Breadcrumbs = _ref2 => {
           href,
           current,
           breadcrumbName,
-          reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
@@ -194,9 +198,8 @@ const Breadcrumbs = _ref2 => {
           tokens: tokens,
           key: href,
           linkRouterProps: { ...linkRouterProps,
-            itemLinkRouterProps
+            ...itemLinkRouterProps
           },
-          reactRouterLinkComponent: linkComponent,
           variant: { ...variant,
             size: 'micro'
           },
@@ -225,12 +228,6 @@ Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
    */
   params: _propTypes.default.object,
 
-  /**
-   * React Router Link component.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-
   /**
    * An array of routes to be displayed as breadcrumbs.
    */

package/lib/Breadcrumbs/Item/Item.js

@@ -71,7 +71,6 @@ const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
 const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   let {
     href,
-    reactRouterLinkComponent: ReactRouterLink,
     children,
     current = false,
     tokens,
@@ -79,6 +78,8 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
       light: true
     },
     // `light` variant (shared with the `Link` component) is default by design
+    LinkRouter,
+    linkRouterProps,
     ...rest
   } = _ref5;
   const {
@@ -90,15 +91,9 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     fontSize,
     ...themeTokens
   } = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
-
-  const linkOptions = _componentsBase.clickProps.toPressProps(selectProps(rest));
-
-  if (ReactRouterLink) {
-    linkOptions.to = href;
-  } else {
-    linkOptions.href = href;
-  }
-
+  const linkOptions = { ..._componentsBase.clickProps.toPressProps(selectProps(rest)),
+    href
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, { ...themeTokens,
     children: current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       tokens: {
@@ -109,26 +104,14 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
       },
       children: children
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [ReactRouterLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactRouterLink, { ...linkOptions,
-        tokens: {
-          color,
-          blockFontSize: fontSize
-        } // TODO refactor
-        // eslint-disable-next-line react/no-unstable-nested-components
-        ,
-        component: props => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...props,
-            variant: variant
-          });
-        },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...linkOptions,
         ref: ref,
-        children: children
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...linkOptions,
         tokens: {
           color,
           blockFontSize: fontSize
         },
-        ref: ref,
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps,
         variant: variant,
         children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, { ...themeTokens,
@@ -156,18 +139,11 @@ Item.propTypes = { ...selectedSystemPropTypes,
   current: _propTypes.default.bool,
 
   /**
-   * Target URL. This will be converted to `to` if the `reactRouterLinkComponent`
+   * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
   href: _propTypes.default.string.isRequired,
 
-  /**
-   * React Router Link component. This will be passed down from the parent
-   * `<Breadcrumbs>` if the parent has a `reactRouterLinkComponent` provided.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-
   /**
    * Variant to render.
    */
@@ -179,12 +155,9 @@ Item.propTypes = { ...selectedSystemPropTypes,
 
 Item.defaultProps = {
   current: false,
-  reactRouterLinkComponent: undefined,
   variant: {
     light: true
   }
 };
-
-var _default = (0, _componentsBase.withLinkRouter)(Item);
-
+var _default = Item;
 exports.default = _default;

package/lib/Footnote/Footnote.js

@@ -52,7 +52,6 @@ const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
-    boxShadow: '0 0 16px 0 rgba(0, 0, 0, 0.1)',
     transform: 'translateY(100%)',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
@@ -95,14 +94,20 @@ const StyledHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-1563bo5-2"
 })(_ref3 => {
   let {
-    headerMargin
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom
   } = _ref3;
   return {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    margin: headerMargin
+    paddingTop: footnoteHeaderPaddingTop,
+    paddingBottom: footnoteHeaderPaddingBottom,
+    paddingRight: footnoteHeaderPaddingRight,
+    paddingLeft: footnoteHeaderPaddingLeft
   };
 });
 
@@ -202,6 +207,7 @@ const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
+    backgroundColor: 'white',
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -295,6 +301,14 @@ const Footnote = props => {
     footnoteBodyPaddingRight,
     footnoteBodyPaddingTop,
     footnoteBodyPaddingBottom,
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom,
+    headerLineHeight,
+    headerFontSize,
+    headerFontName,
+    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -506,13 +520,16 @@ const Footnote = props => {
             ref: headerRef,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHeader, {
               ref: headingRef,
+              footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
+              footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
+              footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
+              footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
               headerMargin: headerMargin,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-                block: true,
-                heading: true,
-                tabIndex: -1,
-                variant: {
-                  size: 'h4'
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                style: {
+                  fontSize: `${headerFontSize}px`,
+                  lineHeight: `${headerLineHeight}px`,
+                  fontFamily: `${headerFontName}${headerFontWeight}normal`
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {

package/lib/index.js

@@ -22,6 +22,7 @@ var _exportNames = {
   QuantitySelector: true,
   IconButton: true,
   transformGradient: true,
+  ssrStyles: true,
   Breadcrumbs: true,
   BlockQuote: true,
   OptimizeImage: true,
@@ -272,6 +273,12 @@ Object.defineProperty(exports, "WebVideo", {
     return _WebVideo.default;
   }
 });
+Object.defineProperty(exports, "ssrStyles", {
+  enumerable: true,
+  get: function () {
+    return _utils.ssrStyles;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {

package/lib/utils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "deprecate", {
+  enumerable: true,
+  get: function () {
+    return _logger.deprecate;
+  }
+});
 Object.defineProperty(exports, "htmlAttrs", {
   enumerable: true,
   get: function () {
@@ -21,6 +27,12 @@ Object.defineProperty(exports, "renderStructuredContent", {
     return _renderStructuredContent.default;
   }
 });
+Object.defineProperty(exports, "ssrStyles", {
+  enumerable: true,
+  get: function () {
+    return _ssr.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -46,16 +58,18 @@ Object.defineProperty(exports, "warn", {
   }
 });
 
+var _logger = require("./logger");
+
 var _transforms = require("./transforms");
 
 var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
 
 var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
 
-var _logger = require("./logger");
-
 var _media = _interopRequireDefault(require("./media"));
 
+var _ssr = _interopRequireDefault(require("./ssr"));
+
 var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
 
 var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));

package/lib/utils/ssr.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _componentsBase = require("@telus-uds/components-base");
+
+/**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Allium app';
+  let {
+    styleGetters = [],
+    collectStyles = renderedApp => renderedApp
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const sheet = new _styledComponents.ServerStyleSheet();
+
+  const getStyledComponentsStyles = () => {
+    const styles = sheet.getStyleElement();
+    sheet.seal();
+    return styles;
+  };
+
+  return (0, _componentsBase.ssrStyles)(appName, {
+    styleGetters: [getStyledComponentsStyles, ...styleGetters],
+    collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
+  });
+};
+
+var _default = ssrStyles;
+exports.default = _default;

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -75,10 +75,16 @@ const getItems = (items, params, concatenatePaths) => {
     const isLast = i === filteredItems.length - 1;
     const breadcrumbName = getBreadcrumbName(item, params);
     const href = getPath(item.path, params, concatenatePaths, paths);
+    const {
+      LinkRouter,
+      linkRouterProps
+    } = item;
     return {
       breadcrumbName,
       href,
       current: isLast,
+      LinkRouter,
+      linkRouterProps,
       ...omitProps(selectProps(item))
     };
   });
@@ -106,7 +112,6 @@ const Breadcrumbs = _ref2 => {
     linkRouterProps,
     params = {},
     tokens,
-    reactRouterLinkComponent,
     routes,
     variant,
     LinkRouter,
@@ -165,7 +170,6 @@ const Breadcrumbs = _ref2 => {
           href,
           current,
           breadcrumbName,
-          reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
@@ -176,9 +180,8 @@ const Breadcrumbs = _ref2 => {
           tokens: tokens,
           key: href,
           linkRouterProps: { ...linkRouterProps,
-            itemLinkRouterProps
+            ...itemLinkRouterProps
           },
-          reactRouterLinkComponent: linkComponent,
           variant: { ...variant,
             size: 'micro'
           },
@@ -207,12 +210,6 @@ Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
    */
   params: PropTypes.object,
 
-  /**
-   * React Router Link component.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * An array of routes to be displayed as breadcrumbs.
    */

package/lib-module/Breadcrumbs/Item/Item.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens, withLinkRouter } from '@telus-uds/components-base';
+import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
 import { htmlAttrs } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -51,7 +51,6 @@ const IconContainer = /*#__PURE__*/styled.span.withConfig({
 const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {
     href,
-    reactRouterLinkComponent: ReactRouterLink,
     children,
     current = false,
     tokens,
@@ -59,6 +58,8 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
       light: true
     },
     // `light` variant (shared with the `Link` component) is default by design
+    LinkRouter,
+    linkRouterProps,
     ...rest
   } = _ref5;
   const {
@@ -70,14 +71,9 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
     fontSize,
     ...themeTokens
   } = useThemeTokens('Breadcrumbs', tokens, variant);
-  const linkOptions = clickProps.toPressProps(selectProps(rest));
-
-  if (ReactRouterLink) {
-    linkOptions.to = href;
-  } else {
-    linkOptions.href = href;
-  }
-
+  const linkOptions = { ...clickProps.toPressProps(selectProps(rest)),
+    href
+  };
   return /*#__PURE__*/_jsx(StyledItemContainer, { ...themeTokens,
     children: current ? /*#__PURE__*/_jsx(Typography, {
       tokens: {
@@ -88,26 +84,14 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
       },
       children: children
     }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [ReactRouterLink ? /*#__PURE__*/_jsx(ReactRouterLink, { ...linkOptions,
-        tokens: {
-          color,
-          blockFontSize: fontSize
-        } // TODO refactor
-        // eslint-disable-next-line react/no-unstable-nested-components
-        ,
-        component: props => {
-          return /*#__PURE__*/_jsx(Link, { ...props,
-            variant: variant
-          });
-        },
+      children: [/*#__PURE__*/_jsx(Link, { ...linkOptions,
         ref: ref,
-        children: children
-      }) : /*#__PURE__*/_jsx(Link, { ...linkOptions,
         tokens: {
           color,
           blockFontSize: fontSize
         },
-        ref: ref,
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps,
         variant: variant,
         children: children
       }), /*#__PURE__*/_jsx(IconContainer, { ...themeTokens,
@@ -135,18 +119,11 @@ Item.propTypes = { ...selectedSystemPropTypes,
   current: PropTypes.bool,
 
   /**
-   * Target URL. This will be converted to `to` if the `reactRouterLinkComponent`
+   * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
   href: PropTypes.string.isRequired,
 
-  /**
-   * React Router Link component. This will be passed down from the parent
-   * `<Breadcrumbs>` if the parent has a `reactRouterLinkComponent` provided.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * Variant to render.
    */
@@ -158,9 +135,8 @@ Item.propTypes = { ...selectedSystemPropTypes,
 
 Item.defaultProps = {
   current: false,
-  reactRouterLinkComponent: undefined,
   variant: {
     light: true
   }
 };
-export default withLinkRouter(Item);
+export default Item;

package/lib-module/Footnote/Footnote.js

@@ -31,7 +31,6 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
-    boxShadow: '0 0 16px 0 rgba(0, 0, 0, 0.1)',
     transform: 'translateY(100%)',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
@@ -72,14 +71,20 @@ const StyledHeader = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1563bo5-2"
 })(_ref3 => {
   let {
-    headerMargin
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom
   } = _ref3;
   return {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    margin: headerMargin
+    paddingTop: footnoteHeaderPaddingTop,
+    paddingBottom: footnoteHeaderPaddingBottom,
+    paddingRight: footnoteHeaderPaddingRight,
+    paddingLeft: footnoteHeaderPaddingLeft
   };
 });
 const StyledFootnoteBody = /*#__PURE__*/styled.div.withConfig({
@@ -176,6 +181,7 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
+    backgroundColor: 'white',
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -267,6 +273,14 @@ const Footnote = props => {
     footnoteBodyPaddingRight,
     footnoteBodyPaddingTop,
     footnoteBodyPaddingBottom,
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom,
+    headerLineHeight,
+    headerFontSize,
+    headerFontName,
+    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -478,13 +492,16 @@ const Footnote = props => {
             ref: headerRef,
             children: /*#__PURE__*/_jsxs(StyledHeader, {
               ref: headingRef,
+              footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
+              footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
+              footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
+              footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
               headerMargin: headerMargin,
-              children: [/*#__PURE__*/_jsx(Typography, {
-                block: true,
-                heading: true,
-                tabIndex: -1,
-                variant: {
-                  size: 'h4'
+              children: [/*#__PURE__*/_jsx("h2", {
+                style: {
+                  fontSize: `${headerFontSize}px`,
+                  lineHeight: `${headerLineHeight}px`,
+                  fontFamily: `${headerFontName}${headerFontWeight}normal`
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/_jsx(CloseButton, {

package/lib-module/index.js

@@ -37,4 +37,5 @@ export { default as TermsAndConditions } from './TermsAndConditions';
 export { default as NavigationBar } from './NavigationBar';
 export { default as Progress } from './Progress';
 export { default as SkeletonProvider } from './SkeletonProvider';
+export { ssrStyles } from './utils';
 export * from './baseExports';

package/lib-module/utils/index.js

@@ -1,8 +1,9 @@
+import { warn, deprecate } from './logger';
 import { transformGradient } from './transforms';
 import useTypographyTheme from './useTypographyTheme';
 import htmlAttrs from './htmlAttrs';
-import { warn } from './logger';
 import media from './media';
+import ssrStyles from './ssr';
 import renderStructuredContent from './renderStructuredContent';
 import useOverlaidPosition from './useOverlaidPosition';
-export { htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, useOverlaidPosition };
+export { deprecate, htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, useOverlaidPosition };

package/lib-module/utils/ssr.js

@@ -0,0 +1,41 @@
+import { ServerStyleSheet } from 'styled-components';
+import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base';
+/**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+
+const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Allium app';
+  let {
+    styleGetters = [],
+    collectStyles = renderedApp => renderedApp
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const sheet = new ServerStyleSheet();
+
+  const getStyledComponentsStyles = () => {
+    const styles = sheet.getStyleElement();
+    sheet.seal();
+    return styles;
+  };
+
+  return baseSsrStyles(appName, {
+    styleGetters: [getStyledComponentsStyles, ...styleGetters],
+    collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
+  });
+};
+
+export default ssrStyles;