@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Notification/Notification.js

@@ -0,0 +1,437 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _ViewportProvider = require("../ViewportProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectContainerStyles = tokens => ({
+  ...tokens
+});
+const selectTextStyles = (tokens, themeOptions, isDismissible) => {
+  const textTokens = (0, _utils.selectTokens)('Typography', tokens);
+  const styles = {
+    ...textTokens,
+    themeOptions,
+    overflow: 'hidden'
+  };
+  if (!isDismissible) {
+    styles.flexShrink = 1;
+  }
+  return (0, _ThemeProvider.applyTextStyles)(styles);
+};
+const selectIconProps = _ref => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
+const selectIconContainerStyles = _ref2 => {
+  let {
+    iconGap
+  } = _ref2;
+  return {
+    paddingRight: iconGap,
+    placeContent: 'start'
+  };
+};
+const selectDismissIconProps = _ref3 => {
+  let {
+    dismissIconSize,
+    dismissIconColor
+  } = _ref3;
+  return {
+    size: dismissIconSize,
+    color: dismissIconColor
+  };
+};
+const selectDismissButtonContainerStyles = _ref4 => {
+  let {
+    dismissButtonGap
+  } = _ref4;
+  return {
+    paddingLeft: dismissButtonGap,
+    placeContent: 'start'
+  };
+};
+const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
+  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  paddingRight: themeTokens?.containerPaddingRight,
+  paddingLeft: themeTokens?.containerPaddingLeft
+});
+const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
+  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
+    let [vp, viewportTokens] = _ref5;
+    acc[vp] = selectContainerStyles({
+      ...viewportTokens
+    });
+    return acc;
+  }, {});
+  const selectContainerMediaQueryStyles = (0, _utils.createMediaQueryStyles)(transformedSelectContainerStyles);
+  const {
+    ids: containerIds,
+    styles: containerStyles
+  } = _utils.StyleSheet.create({
+    container: {
+      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      ...selectContainerMediaQueryStyles
+    }
+  });
+  const {
+    ids: contentContainerIds,
+    styles: contentContainerStyles
+  } = _utils.StyleSheet.create({
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...(0, _utils.createMediaQueryStyles)({
+        xs: {
+          maxWidth: themeOptions?.contentMaxWidth?.xs || '100%'
+        },
+        md: {
+          maxWidth: themeOptions?.contentMaxWidth?.md || '100%'
+        },
+        lg: {
+          maxWidth: themeOptions?.contentMaxWidth?.lg || '100%'
+        },
+        sm: {
+          maxWidth: themeOptions?.contentMaxWidth?.sm || '100%'
+        },
+        xl: {
+          maxWidth: themeOptions?.contentMaxWidth?.xl || '100%'
+        }
+      })
+    }
+  });
+  const {
+    ids: staticContentContainerIds,
+    styles: staticContentContainerStyles
+  } = _utils.StyleSheet.create({
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  });
+  const {
+    ids: iconContainerIds,
+    styles: iconContainerStyles
+  } = _utils.StyleSheet.create({
+    iconContainer: selectIconContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: dismissButtonContainerIds,
+    styles: dismissButtonContainerStyles
+  } = _utils.StyleSheet.create({
+    dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: textIds,
+    styles: textStyles
+  } = _utils.StyleSheet.create({
+    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
+  });
+  const {
+    styles: selectIconPropsStyles
+  } = _utils.StyleSheet.create({
+    selectIconProps: selectIconProps(themeTokens[viewport])
+  });
+  const {
+    styles: selectDismissIconPropsStyles
+  } = _utils.StyleSheet.create({
+    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
+  });
+
+  // eslint-disable-next-line no-param-reassign
+  mediaIdsRef.current = {
+    containerIds,
+    contentContainerIds,
+    staticContentContainerIds,
+    iconContainerIds,
+    dismissButtonContainerIds,
+    textIds
+  };
+  return {
+    containerStyles,
+    contentContainerStyles,
+    staticContentContainerStyles,
+    iconContainerStyles,
+    dismissButtonContainerStyles,
+    textStyles,
+    selectIconPropsStyles,
+    selectDismissIconPropsStyles
+  };
+};
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
+  containerStyles: {
+    container: {
+      flexDirection: system === true && viewport === 'xl' || _Platform.default.OS === 'android' ? 'row' : 'inherit',
+      ...selectContainerStyles(themeTokens)
+    }
+  },
+  contentContainerStyles: {
+    contentContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
+    }
+  },
+  staticContentContainerStyles: {
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  },
+  iconContainerStyles: {
+    iconContainer: {
+      ...selectIconContainerStyles(themeTokens)
+    }
+  },
+  dismissButtonContainerStyles: {
+    dismissButtonContainer: {
+      ...selectDismissButtonContainerStyles(themeTokens)
+    }
+  },
+  textStyles: {
+    text: {
+      ...selectTextStyles(themeTokens, themeOptions, dismissible)
+    }
+  },
+  selectIconPropsStyles: {
+    selectIconProps: {
+      ...selectIconProps(themeTokens)
+    }
+  },
+  selectDismissIconPropsStyles: {
+    selectDismissIconProps: {
+      ...selectDismissIconProps(themeTokens)
+    }
+  }
+});
+
+/**
+ * A banner that highlights important messages:
+ * - Status message to show there is an error or outage of services
+ * - Confirmation message in response to user action
+ * - Account information letting the user know they have almost used all their data
+ *
+ * ## Usage criteria
+ * - Use simple text content only, such as bold test or links. Don’t use other complex components or paragraphs
+ * - Show notifications before the content that the message is related to, otherwise show at the top of the main content
+ * - Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
+ * - When showing multiple notifications, show them in order of importance from top to bottom
+ * - Use variants to visually show the type of message contained within the Notification.
+ * - The icon and colour will indicate meaning and importance
+ *
+ * ### Variants
+ * - Use `variant.style` to set the visual style of the notification
+ * - Use `dismissible` prop to enable dismissible functionality
+ * - Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
+ *
+ * ### When to use the system prop?
+ * - Use `system` to show system-based messages coming from the application
+ * - Don’t use `system` when the message is in response to user action
+ *
+ * ## Variants
+ *
+ * #### Success
+ * Use the success variant to provide feedback of a successful operation. The message will include an icon to indicate meaning and importance.
+ *
+ * #### Warning
+ * Use the warning variant to provide feedback of a warning; users would still be able to proceed forward.
+ * The message will include an icon to indicate meaning and importance.
+ *
+ * #### Error
+ * Use the error variant to provide feedback of a failed operation. The message will include an icon to indicate meaning and importance.
+ *
+ * #### Dismissible
+ * Dismissible notifications should only be used for default or success notifications where there is no action needed from the user.
+ * If the information is passive then it should be dismissible as indicated by an interactive close button on the far right.
+ * If the notification requires an action then make the option(s) clear with a `ChevronLink` or `Link`.
+ *
+ * Use the `dismissible` prop to allow users to dismiss the Notification at any time. Once dismissed, the Notification is removed from the DOM.
+ *
+ * Please note:
+ *
+ * - Default and Success variants are dismissible
+ * - Error and Warning variants are not dismissible
+ *
+ * #### System message
+ * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
+ * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
+ */
+const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    system,
+    dismissible,
+    copy = 'en',
+    tokens,
+    variant,
+    onDismiss,
+    ...rest
+  } = _ref6;
+  const [isDismissed, setIsDismissed] = _react.default.useState(false);
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const getCopy = (0, _useCopy.default)({
+    dictionary: _dictionary.default,
+    copy
+  });
+
+  // TODO: Remove this once the system style variant is deprecated
+  const isSystemEnabled = system || variant?.style?.includes('system');
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Notification', tokens, variant, {
+    system: isSystemEnabled,
+    viewport
+  });
+  const maxWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  const notificationComponentRef = _react.default.useRef({
+    containerStyles: {},
+    contentContainerStyles: {},
+    staticContentContainerStyles: {},
+    iconContainerStyles: {},
+    dismissButtonContainerStyles: {},
+    textStyles: {},
+    selectIconPropsStyles: {},
+    selectDismissIconPropsStyles: {}
+  });
+  const mediaIdsRef = _react.default.useRef({
+    containerIds: {},
+    contentContainerIds: {},
+    staticContentContainerIds: {},
+    iconContainerIds: {},
+    dismissButtonContainerIds: {},
+    textIds: {},
+    selectIconPropsIds: {},
+    selectDismissIconPropsIds: {}
+  });
+  if (enableMediaQueryStyleSheet) {
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
+  } else {
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
+  }
+  if (isDismissed) {
+    return null;
+  }
+  const content = (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
+    textStyles: notificationComponentRef.current.textStyles.text,
+    variant
+  }) : children, {
+    style: notificationComponentRef.current.textStyles.text
+  });
+  const {
+    icon: IconComponent,
+    dismissIcon: DismissIconComponent,
+    dismissIconColor
+  } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
+  const onDismissPress = () => {
+    setIsDismissed(true);
+    onDismiss?.();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: notificationComponentRef.current.containerStyles.container,
+    dataSet: mediaIdsRef && {
+      media: mediaIdsRef.current.containerIds.container
+    },
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: notificationComponentRef.current.contentContainerStyles.contentContainer,
+      dataSet: mediaIdsRef && {
+        media: mediaIdsRef.current.contentContainerIds.contentContainer
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: notificationComponentRef.current.staticContentContainerStyles.staticContentContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
+        },
+        children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: notificationComponentRef.current.iconContainerStyles.iconContainer,
+          dataSet: mediaIdsRef && {
+            media: mediaIdsRef.current.iconContainerIds.iconContainer
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+            ...notificationComponentRef.current.selectIconPropsStyles.selectIconProps
+          })
+        }), content && typeof content === 'function' ? content({
+          textStyles: notificationComponentRef.current.textStyles.text,
+          variant
+        }) : content]
+      }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          action: "close",
+          onPress: onDismissPress,
+          icon: DismissIconComponent,
+          accessibilityRole: "button",
+          accessibilityLabel: getCopy('dismiss'),
+          variant: {
+            inverse: dismissIconColor === '#ffffff',
+            size: 'small'
+          },
+          children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, {
+            ...notificationComponentRef.current.selectDismissIconPropsStyles.selectDismissIconProps
+          })
+        })
+      })]
+    })
+  });
+});
+Notification.displayName = 'Notification';
+Notification.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Content of the `Notification`.
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
+  /**
+   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
+   */
+  system: _propTypes.default.bool,
+  /**
+   * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
+   */
+  dismissible: _propTypes.default.bool,
+  /**
+   * Select English or French copy for the accessible label of the dismiss button.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
+    dismiss: _propTypes.default.string
+  })]),
+  /**
+   * Callback function called when the dismiss button is clicked
+   */
+  onDismiss: _propTypes.default.func,
+  tokens: (0, _utils.getTokensPropType)('Notification'),
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = Notification;

package/lib/cjs/Notification/dictionary.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    dismiss: 'Close'
+  },
+  fr: {
+    dismiss: 'Fermer'
+  }
+};

package/lib/cjs/Notification/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Notification = _interopRequireDefault(require("./Notification"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Notification.default;

package/lib/cjs/OrderedList/Item.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _ItemBase = _interopRequireDefault(require("./ItemBase"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontHeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName,
+    itemColor,
+    itemTextColor
+  } = _ref;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontWeight: itemFontHeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor || itemTextColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  });
+};
+const selectItemCounterStyles = _ref2 => {
+  let {
+    itemBulletContainerWidth,
+    itemBulletTextAlign,
+    itemFontWeight,
+    itemFontSize,
+    itemFontName,
+    itemLineHeight,
+    themeOptions,
+    itemColor,
+    itemTextColor
+  } = _ref2;
+  return {
+    color: itemColor || itemTextColor,
+    width: itemBulletContainerWidth,
+    textAlign: itemBulletTextAlign,
+    ...(0, _ThemeProvider.applyTextStyles)({
+      fontWeight: itemFontWeight,
+      fontSize: itemFontSize,
+      fontName: itemFontName,
+      themeOptions
+    }),
+    lineHeight: itemLineHeight * itemFontSize
+  };
+};
+const selectItemContentStyles = (_ref3, isLastChild) => {
+  let {
+    interItemMargin,
+    listGutter,
+    ...themeTokens
+  } = _ref3;
+  return {
+    ...themeTokens,
+    marginLeft: listGutter,
+    marginBottom: !isLastChild ? interItemMargin : 0
+  };
+};
+const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+  let {
+    children,
+    index,
+    isLastChild,
+    title,
+    tokens = {},
+    variant,
+    ...rest
+  } = _ref4;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('OrderedList', tokens, variant);
+  const headingTokens = title && {
+    lineHeight: themeTokens.itemLineHeight,
+    fontSize: themeTokens.itemFontSize,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
+    fontName: themeTokens.headerFontName,
+    fontWeight: themeTokens.headerFontWeight
+  };
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const itemContent = (0, _utils.wrapStringsInText)(children, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  const itemCounter = (0, _utils.wrapStringsInText)(`${index}.`, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ItemBase.default, {
+    ref: ref,
+    style: {
+      ...staticStyles.container,
+      ...themeTokens
+    },
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.itemCounter, selectItemCounterStyles(themeTokens)],
+      children: itemCounter
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)],
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: 'h4'
+          },
+          tokens: headingTokens,
+          children: title
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: itemContent
+      })]
+    })]
+  });
+});
+Item.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Item content
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Item index
+   */
+  index: _propTypes.default.number,
+  /**
+   * If true, the item is the last one on the list
+   */
+  isLastChild: _propTypes.default.bool,
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
+  title: _propTypes.default.string,
+  /**
+   * Item tokens
+   */
+  tokens: (0, _utils.getTokensPropType)('OrderedList'),
+  /**
+   * Item variant
+   */
+  variant: _utils.variantProp.propType
+};
+Item.displayName = 'OrderedListItem';
+var _default = exports.default = Item;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  itemCounter: {
+    alignItems: 'flex-end'
+  },
+  itemContent: {
+    flexShrink: 1
+  }
+});

package/lib/cjs/OrderedList/ItemBase.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+
+const getAccessibilityRole = () => _Platform.default.select({
+  ios: 'listitem',
+  android: 'none',
+  web: 'listitem'
+});
+const Item = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    accessibilityRole: getAccessibilityRole(),
+    ref: ref,
+    style: [staticStyles.container, style],
+    ...rest,
+    children: children
+  });
+});
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Item custom styles
+   */
+  style: _propTypes.default.object
+};
+Item.displayName = 'OrderedListItem';
+var _default = exports.default = Item;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    display: 'flex'
+  }
+});