@atlaskit/smart-card 17.0.1 → 17.3.0

package/dist/esm/view/EmbedCard/views/ErroredView.js

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { fontSize } from '@atlaskit/theme/constants';
+import { R300 } from '@atlaskit/theme/colors';
+import { Frame } from '../../BlockCard/components/Frame';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+import { gs } from '../../BlockCard/utils';
+export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
+  var onRetry = _ref.onRetry,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-errored-view' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+  return jsx(Frame, {
+    inheritDimensions: inheritDimensions,
+    compact: true,
+    isSelected: isSelected,
+    testId: testId
+  }, jsx(ErrorIcon, {
+    size: "small",
+    primaryColor: R300,
+    label: "error-icon"
+  }), jsx("span", {
+    css: {
+      fontSize: "".concat(fontSize(), "px"),
+      marginLeft: gs(0.5),
+      marginRight: gs(0.5),
+      display: '-webkit-box',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      WebkitLineClamp: 1,
+      WebkitBoxOrient: 'vertical',
+      // Fallback options.
+      maxHeight: gs(3)
+    }
+  }, jsx(FormattedMessage, messages.could_not_load_link)), jsx(Button, {
+    testId: "err-view-retry",
+    appearance: "link",
+    spacing: "none",
+    onClick: onRetry
+  }, jsx(FormattedMessage, messages.try_again)));
+};

package/dist/esm/view/EmbedCard/views/ForbiddenView.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { EmbedCardUnresolvedView } from './UnresolvedView';
+import { LockImage } from '../../BlockCard/utils/constants';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+export var EmbedCardForbiddenView = function EmbedCardForbiddenView(_ref) {
+  var _action$promise;
+
+  var link = _ref.link,
+      context = _ref.context,
+      isSelected = _ref.isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-forbidden-view' : _ref$testId,
+      onAuthorise = _ref.onAuthorise,
+      inheritDimensions = _ref.inheritDimensions,
+      onClick = _ref.onClick,
+      _ref$requestAccessCon = _ref.requestAccessContext,
+      requestAccessContext = _ref$requestAccessCon === void 0 ? {} : _ref$requestAccessCon;
+  var icon = context && context.icon && /*#__PURE__*/React.createElement(ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+  var descriptiveMessageKey = requestAccessContext.descriptiveMessageKey,
+      callToActionMessageKey = requestAccessContext.callToActionMessageKey,
+      action = requestAccessContext.action;
+  var onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorise;
+  var showButton = true;
+  /**
+   * if there is a request access context, but no action to perform, do not show any button.
+   * By default, a "Try another account" button shows, but with request access context, we don't
+   * want to encourage users to try another account, if their request is already pending, etc.
+   */
+
+  if (!callToActionMessageKey && descriptiveMessageKey) {
+    showButton = false;
+  }
+
+  var descriptionKey = descriptiveMessageKey !== null && descriptiveMessageKey !== void 0 ? descriptiveMessageKey : 'invalid_permissions_description';
+  var buttonTextKey = callToActionMessageKey !== null && callToActionMessageKey !== void 0 ? callToActionMessageKey : 'try_another_account';
+  var buttonProps;
+
+  if (showButton) {
+    buttonProps = {
+      appearance: 'default',
+      text: buttonTextKey,
+      testId: (action === null || action === void 0 ? void 0 : action.id) || 'connect-other-account'
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+    image: LockImage,
+    title: "invalid_permissions",
+    description: descriptionKey,
+    context: context && context.text,
+    button: buttonProps,
+    onClick: onEmbedCardClick,
+    testId: testId
+  }));
+};

package/dist/esm/view/EmbedCard/views/NotFoundView.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { EmbedCardUnresolvedView } from './UnresolvedView';
+import { NotFoundImage } from '../../BlockCard/utils/constants';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+export var EmbedCardNotFoundView = function EmbedCardNotFoundView(_ref) {
+  var link = _ref.link,
+      context = _ref.context,
+      isSelected = _ref.isSelected,
+      inheritDimensions = _ref.inheritDimensions,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-not-found-view' : _ref$testId,
+      onClick = _ref.onClick;
+  var icon = context && context.icon && /*#__PURE__*/React.createElement(ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+    image: NotFoundImage,
+    title: "not_found_title",
+    description: "not_found_description",
+    context: context && context.text,
+    testId: testId
+  }));
+};

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -0,0 +1,55 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import LinkGlyph from '@atlaskit/icon/glyph/link';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+import { Frame } from '../components/Frame';
+export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref, embedIframeRef) {
+  var link = _ref.link,
+      context = _ref.context,
+      onClick = _ref.onClick,
+      isSelected = _ref.isSelected,
+      isFrameVisible = _ref.isFrameVisible,
+      preview = _ref.preview,
+      title = _ref.title,
+      isTrusted = _ref.isTrusted,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-resolved-view' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+  var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
+  var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
+  var text = title || (context === null || context === void 0 ? void 0 : context.text);
+  var linkGlyph = React.useMemo(function () {
+    return jsx(LinkGlyph, {
+      label: "icon",
+      size: "small",
+      testId: "embed-card-fallback-icon"
+    });
+  }, []);
+  var icon = React.useMemo(function () {
+    if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+
+    return jsx(ImageIcon, {
+      src: src,
+      default: linkGlyph
+    });
+  }, [src, linkGlyph, iconFromContext]);
+  return jsx(ExpandedFrame, {
+    isSelected: isSelected,
+    isFrameVisible: isFrameVisible,
+    href: link,
+    testId: testId,
+    icon: icon,
+    text: text,
+    onClick: onClick,
+    inheritDimensions: inheritDimensions
+  }, jsx(Frame, {
+    url: preview === null || preview === void 0 ? void 0 : preview.src,
+    isTrusted: isTrusted,
+    testId: testId,
+    ref: embedIframeRef
+  }));
+});

package/dist/esm/view/EmbedCard/views/UnauthorisedView.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { EmbedCardUnresolvedView } from './UnresolvedView';
+import { CelebrationImage } from '../../BlockCard/utils/constants';
+import { ExpandedFrame } from '../components/ExpandedFrame';
+import { ImageIcon } from '../components/ImageIcon';
+export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
+  var link = _ref.link,
+      context = _ref.context,
+      isSelected = _ref.isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'embed-card-unauthorized-view' : _ref$testId,
+      onAuthorise = _ref.onAuthorise,
+      inheritDimensions = _ref.inheritDimensions,
+      onClick = _ref.onClick;
+  var icon = context && context.icon && /*#__PURE__*/React.createElement(ImageIcon, {
+    src: typeof context.icon === 'string' ? context.icon : undefined
+  });
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    href: link,
+    icon: icon,
+    text: context && context.text,
+    isVisible: true,
+    isSelected: isSelected,
+    inheritDimensions: inheritDimensions,
+    onClick: onClick,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
+    image: CelebrationImage,
+    title: "connect_link_account_card_name",
+    description: "connect_link_account_card_description",
+    context: context && context.text,
+    button: {
+      appearance: 'primary',
+      text: 'connect_link_account_card',
+      testId: 'connect-account'
+    },
+    onClick: onAuthorise,
+    testId: testId
+  }));
+};

package/dist/esm/view/EmbedCard/views/UnresolvedView.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import { fontSize } from '@atlaskit/theme/constants';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+import { gs as gridSize } from '../../BlockCard/utils';
+export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
+  var image = _ref.image,
+      title = _ref.title,
+      description = _ref.description,
+      button = _ref.button,
+      context = _ref.context,
+      onClick = _ref.onClick,
+      testId = _ref.testId;
+  return jsx("div", {
+    css: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingTop: gridSize(4.5),
+      paddingBottom: gridSize(6)
+    },
+    "data-testid": "".concat(testId, "-unresolved-container")
+  }, jsx("img", {
+    src: image,
+    css: {
+      height: gridSize(14),
+      marginBottom: gridSize(4)
+    }
+  }), jsx("span", {
+    css: {
+      fontSize: gridSize(2.5),
+      marginBottom: gridSize(1.5),
+      width: gridSize(50),
+      textAlign: 'center'
+    }
+  }, jsx(FormattedMessage, _extends({}, messages[title], {
+    values: {
+      context: context
+    }
+  }))), jsx("span", {
+    css: {
+      fontSize: fontSize(),
+      marginBottom: gridSize(2.5),
+      textAlign: 'center',
+      width: gridSize(50),
+      lineHeight: gridSize(3)
+    }
+  }, jsx(FormattedMessage, _extends({}, messages[description], {
+    values: {
+      context: context
+    }
+  }))), button && jsx(Button, {
+    testId: "button-".concat(button.testId || testId),
+    appearance: button.appearance,
+    onClick: onClick
+  }, jsx(FormattedMessage, _extends({}, messages[button.text], {
+    values: {
+      context: context
+    }
+  }))));
+};

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -0,0 +1,82 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import { SmartLinkSize } from '../../../../../constants';
+import Tooltip from '@atlaskit/tooltip';
+import { getIconSizeStyles } from '../../utils';
+import { tokens } from '../../../../../utils/token';
+import { handleOnClick } from '../../../../../utils';
+
+var getWidth = function getWidth(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return '1.5rem';
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+
+var getIconStyles = function getIconStyles(size) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), tokens.actionIcon, getIconSizeStyles(getWidth(size)));
+};
+
+var ActionIcon = function ActionIcon(_ref) {
+  var size = _ref.size,
+      testId = _ref.testId,
+      icon = _ref.icon;
+  return jsx("span", {
+    css: getIconStyles(size),
+    "data-testid": "".concat(testId, "-icon")
+  }, icon);
+};
+
+var Action = function Action(_ref2) {
+  var _ref2$appearance = _ref2.appearance,
+      appearance = _ref2$appearance === void 0 ? 'subtle' : _ref2$appearance,
+      content = _ref2.content,
+      onClick = _ref2.onClick,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? SmartLinkSize.Medium : _ref2$size,
+      _ref2$testId = _ref2.testId,
+      testId = _ref2$testId === void 0 ? 'smart-action' : _ref2$testId,
+      icon = _ref2.icon,
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? 'before' : _ref2$iconPosition,
+      tooltipMessage = _ref2.tooltipMessage;
+
+  if (!onClick) {
+    return null;
+  }
+
+  var iconBefore = iconPosition === 'before' ? jsx(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
+  var iconAfter = iconPosition === 'after' ? jsx(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
+  return jsx(Tooltip, {
+    content: tooltipMessage
+  }, jsx(Button, {
+    spacing: "none",
+    appearance: appearance,
+    testId: testId,
+    onClick: handleOnClick(onClick),
+    iconBefore: iconBefore,
+    iconAfter: iconAfter
+  }, content));
+};
+
+export default Action;

package/dist/esm/view/FlexibleCard/components/actions/action/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/actions/index.js

@@ -0,0 +1,8 @@
+import { ActionName } from '../../../../constants';
+import { createUIAction } from './utils'; // Attention: Keep the export name and action name the same.
+// This will help reducing the code for mapping action inside
+// createAction and renderActionItems
+// UIActions infer that you do not need to get any data from the context.
+// DataActions infer that the action depends on the data from the context.
+
+export var DeleteAction = createUIAction(ActionName.DeleteAction);

package/dist/esm/view/FlexibleCard/components/actions/utils.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ActionName } from '../../../../constants';
+import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import React, { useContext } from 'react';
+import Action from './action';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../../messages';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+
+var actionMappings = _defineProperty({}, ActionName.DeleteAction, {
+  component: Action,
+  props: {
+    testId: 'smart-action-delete-action',
+    icon: /*#__PURE__*/React.createElement(CrossIcon, {
+      label: "Delete"
+    }),
+    toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
+  }
+});
+
+var getContextKey = function getContextKey(name) {
+  // Attempt to predict context prop name in advance to reduce the amount of
+  // code run during runtime
+  return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
+};
+
+var getActionData = function getActionData(actionName, contextKey, context) {
+  if (!context) {
+    return undefined;
+  }
+
+  var data = context[contextKey];
+
+  switch (actionName) {
+    default:
+      return data;
+  }
+};
+
+export var createDataAction = function createDataAction(name) {
+  var _ref = actionMappings[name] || {},
+      BaseAction = _ref.component,
+      props = _ref.props;
+
+  var contextKey = getContextKey(name);
+
+  if (!BaseAction) {
+    throw Error("Action ".concat(name, " does not exist."));
+  }
+
+  return function (overrides) {
+    var context = useContext(FlexibleUiContext);
+    var data = getActionData(name, contextKey, context);
+    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides));
+  };
+};
+export var createUIAction = function createUIAction(name) {
+  var _ref2 = actionMappings[name] || {},
+      BaseAction = _ref2.component,
+      props = _ref2.props;
+
+  if (!BaseAction) {
+    throw Error("Action ".concat(name, " does not exist."));
+  }
+
+  return function (overrides) {
+    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, overrides));
+  };
+};

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import ButtonGroup from '@atlaskit/button/button-group';
+import { renderActionItems } from '../utils';
+import { SmartLinkSize } from '../../../../../constants';
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
+
+var ActionGroup = function ActionGroup(_ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size;
+  // Currently we only have delete action available, this prevents others from adding more delete actions
+  var actionsToRender = items.slice(0, 1);
+  return jsx("div", {
+    css: styles
+  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size)));
+};
+
+export default ActionGroup;

package/dist/esm/view/FlexibleCard/components/blocks/action-group/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -1,59 +1,15 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _templateObject;
 
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
+import { getBaseStyles, renderChildren } from '../utils';
 
-var getDirectionStyles = function getDirectionStyles(direction) {
-  switch (direction) {
-    case SmartLinkDirection.Vertical:
-      return {
-        flexDirection: 'column',
-        alignItems: 'flex-start'
-      };
-
-    case SmartLinkDirection.Horizontal:
-    default:
-      return {
-        flexDirection: 'row',
-        alignItems: 'center'
-      };
-  }
-};
-
-var getGapSize = function getGapSize(size) {
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return '1.25rem';
-
-    case SmartLinkSize.Large:
-      return '1rem';
-
-    case SmartLinkSize.Medium:
-      return '.5rem';
-
-    case SmartLinkSize.Small:
-    default:
-      return '.25rem';
-  }
-};
-
-export var getBlockStyles = function getBlockStyles(direction, size) {
-  return css(_objectSpread(_objectSpread({
-    display: 'flex',
-    gap: getGapSize(size),
-    lineHeight: '1rem',
-    minWidth: 0
-  }, getDirectionStyles(direction)), {}, {
-    '& > *': {
-      minWidth: 0
-    }
-  }));
+var getBlockStyles = function getBlockStyles(direction, size) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n"])), getBaseStyles(direction, size));
 };
 
 var Block = function Block(_ref) {
@@ -68,7 +24,7 @@ var Block = function Block(_ref) {
     css: getBlockStyles(direction, size),
     "data-smart-block": true,
     "data-testid": testId
-  }, children);
+  }, renderChildren(children, size));
 };
 
 export default Block;

package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js

@@ -0,0 +1,46 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
+import { getBaseStyles, renderChildren } from '../utils';
+
+var getAlignmentStyles = function getAlignmentStyles(align) {
+  switch (align) {
+    case SmartLinkAlignment.Right:
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+
+    case SmartLinkAlignment.Left:
+    default:
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+  }
+};
+
+export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
+};
+
+var ElementGroup = function ElementGroup(_ref) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? SmartLinkAlignment.Left : _ref$align,
+      children = _ref.children,
+      css = _ref.css,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? SmartLinkDirection.Horizontal : _ref$direction,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-group' : _ref$testId,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? SmartLinkWidth.FitToContent : _ref$width;
+  return jsx("div", {
+    css: [getElementGroupStyles(direction, size, align, width), css],
+    "data-smart-element-group": true,
+    "data-testid": testId
+  }, renderChildren(children, size));
+};
+
+export default ElementGroup;

package/dist/esm/view/FlexibleCard/components/blocks/element-group/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/blocks/index.js

@@ -0,0 +1,2 @@
+export { default as TitleBlock } from './title-block';
+export { default as MetadataBlock } from './metadata-block';