@atlaskit/smart-card 35.2.12 → 36.0.0

package/dist/es2019/view/InlineCard/ForbiddenView/InlineCardForbiddenViewOld.js

@@ -1,168 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
-import ButtonOld from '@atlaskit/button';
-import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
-import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
-import Lozenge from '@atlaskit/lozenge';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
-import { N500, R400 } from '@atlaskit/theme/colors';
-import { messages } from '../../../messages';
-import { HoverCard } from '../../HoverCard';
-import { Frame } from '../Frame';
-import { AKIconWrapper } from '../Icon';
-import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
-import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
-import { IconStyledButtonOldVisualRefresh } from '../styled';
-import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
-import withFrameStyleControl from '../utils/withFrameStyleControl';
-const iconWrapperStyles = xcss({
-  marginRight: 'space.negative.025'
-});
-const fallbackForbiddenIcon = () => {
-  if (fg('bandicoots-compiled-migration-smartcard')) {
-    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: iconWrapperStyles
-    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
-      label: "error",
-      color: "var(--ds-icon-danger, #C9372C)",
-      LEGACY_fallbackIcon: LegacyLockIcon,
-      LEGACY_size: "small",
-      testId: "forbidden-view-fallback-icon"
-    })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
-      label: "error",
-      size: "small",
-      primaryColor: `var(--ds-icon-danger, ${R400})`,
-      testId: "forbidden-view-fallback-icon"
-    }));
-  } else {
-    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: iconWrapperStyles
-    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
-      label: "error",
-      color: "var(--ds-icon-danger, #C9372C)",
-      LEGACY_fallbackIcon: LegacyLockIcon,
-      LEGACY_size: "small",
-      testId: "forbidden-view-fallback-icon"
-    })) : /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
-      label: "error",
-      size: "small",
-      primaryColor: `var(--ds-icon-danger, ${R400})`,
-      testId: "forbidden-view-fallback-icon"
-    }));
-  }
-};
-export class InlineCardForbiddenViewOld extends React.Component {
-  constructor(...args) {
-    var _this$props, _this$props$requestAc;
-    super(...args);
-    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "state", {
-      hasRequestAccessContextMessage: !!((_this$props = this.props) !== null && _this$props !== void 0 && (_this$props$requestAc = _this$props.requestAccessContext) !== null && _this$props$requestAc !== void 0 && _this$props$requestAc.callToActionMessageKey)
-    });
-    _defineProperty(this, "handleRetry", event => {
-      const {
-        onAuthorise
-      } = this.props;
-      event.preventDefault();
-      event.stopPropagation();
-      if (onAuthorise) {
-        onAuthorise();
-      } else {
-        var _this$props2, _this$props2$requestA, _this$props2$requestA2;
-        (_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$requestA = _this$props2.requestAccessContext) === null || _this$props2$requestA === void 0 ? void 0 : (_this$props2$requestA2 = _this$props2$requestA.action) === null || _this$props2$requestA2 === void 0 ? void 0 : _this$props2$requestA2.promise();
-      }
-    });
-    _defineProperty(this, "renderForbiddenAccessMessage", () => {
-      var _this$props3, _this$props3$requestA;
-      if ((_this$props3 = this.props) !== null && _this$props3 !== void 0 && (_this$props3$requestA = _this$props3.requestAccessContext) !== null && _this$props3$requestA !== void 0 && _this$props3$requestA.callToActionMessageKey) {
-        const {
-          callToActionMessageKey
-        } = this.props.requestAccessContext;
-        return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
-          values: {
-            product: this.props.context
-          }
-        }));
-      }
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, formattedMessage => {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
-      }));
-    });
-    _defineProperty(this, "renderActionButton", () => {
-      var _this$props$requestAc2;
-      const {
-        onAuthorise
-      } = this.props;
-      const Button = withFrameStyleControl(ButtonOld, this.frameRef);
-      const accessType = (_this$props$requestAc2 = this.props.requestAccessContext) === null || _this$props$requestAc2 === void 0 ? void 0 : _this$props$requestAc2.accessType;
-      if (this.state.hasRequestAccessContextMessage) {
-        if (fg('bandicoots-compiled-migration-smartcard')) {
-          return /*#__PURE__*/React.createElement(Button, {
-            spacing: "none",
-            onClick: this.handleRetry,
-            component: IconStyledButtonOldVisualRefresh,
-            testId: "button-connect-other-account",
-            role: "button",
-            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
-          }, this.renderForbiddenAccessMessage());
-        } else {
-          return /*#__PURE__*/React.createElement(Button, {
-            spacing: "none",
-            onClick: this.handleRetry,
-            component: IconStyledButtonOld,
-            testId: "button-connect-other-account",
-            role: "button",
-            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
-          }, this.renderForbiddenAccessMessage());
-        }
-      }
-      if (onAuthorise) {
-        return /*#__PURE__*/React.createElement(Button, {
-          spacing: "none",
-          onClick: this.handleRetry,
-          appearance: "subtle-link",
-          testId: "button-connect-other-account",
-          role: "button"
-        }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, _extends({
-          appearance: 'moved'
-        }, fg('platform-component-visual-refresh') ? {
-          isBold: true
-        } : undefined), this.renderForbiddenAccessMessage())));
-      }
-      return null;
-    });
-  }
-  render() {
-    const {
-      url,
-      icon,
-      onClick,
-      isSelected,
-      testId = 'inline-card-forbidden-view',
-      truncateInline
-    } = this.props;
-    const content = /*#__PURE__*/React.createElement(Frame, {
-      testId: testId,
-      isSelected: isSelected,
-      ref: this.frameRef,
-      truncateInline: truncateInline
-    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon ? icon : fallbackForbiddenIcon(),
-      link: url,
-      title: url,
-      onClick: onClick,
-      titleColor: `var(--ds-text-subtle, ${N500})`
-    }), this.renderActionButton());
-    if (this.props.showHoverPreview) {
-      return /*#__PURE__*/React.createElement(HoverCard, {
-        url: url
-      }, content);
-    }
-    return content;
-  }
-}

package/dist/es2019/view/InlineCard/Frame/styled-emotion.js

@@ -1,143 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import { B100, B200, B400, B50, N40 } from '@atlaskit/theme/colors';
-const lineHeight = 22;
-const selectedStyles = {
-  cursor: 'pointer',
-  boxShadow: `0 0 0 2px ${`var(--ds-border-selected, ${B100})`}`,
-  outline: 'none',
-  userSelect: 'none',
-  '&, :hover, :focus, :active': {
-    textDecoration: 'none'
-  },
-  '&:hover': {
-    border: `1px solid ${`var(--ds-border, ${N40})`}`
-  }
-};
-const isInteractive = ({
-  isInteractive
-}) => {
-  if (isInteractive) {
-    return {
-      ':active': {
-        backgroundColor: `var(--ds-background-selected, ${B50})`
-      },
-      ':focus': selectedStyles
-    };
-  }
-  return undefined;
-};
-const isSelected = ({
-  isSelected
-}) => {
-  if (isSelected) {
-    return selectedStyles;
-  } else {
-    return {
-      userSelect: 'text'
-    };
-  }
-};
-const hoveredStyles = {
-  borderColor: `var(--ds-border-accent-blue, ${B200})`
-};
-const activeHoveredFocusedStyles = props => {
-  if (props.withoutBackground) {
-    return undefined;
-  }
-  return {
-    textDecoration: 'none'
-  };
-};
-const hoveredWihBorderStyles = props => ({
-  ...hoveredStyles,
-  ...activeHoveredFocusedStyles(props)
-});
-
-/*
-  Inline smart cards should have the following layout:
-  ------------------------------------
-  | icon | title | action OR lozenge |
-  ------------------------------------
-  The aim is to ensure (1) all children are
-  in line with each other, (2) are vertically
-  centered.
-*/
-// NB: `padding` consistent with @mentions.
-// NB: `display: inline` required for `box-decoration-break` to work.
-// NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-const baseWrapperStyles = props => ({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: `${lineHeight}px`,
-  padding: `${"var(--ds-space-025, 2px)"} 0px`,
-  ...(props.withoutBackground ? {
-    paddingLeft: 0,
-    marginLeft: "var(--ds-space-negative-025, -2px)"
-  } : undefined),
-  display: 'inline',
-  boxDecorationBreak: 'clone',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  color: `var(--ds-link, ${B400})`,
-  ...(props.withoutBackground ? undefined : {
-    backgroundColor: "var(--ds-surface-raised, white)"
-  }),
-  ...isSelected(props),
-  ...(props.withoutBackground ? undefined : {
-    border: `1px solid ${`var(--ds-border, ${N40})`}`
-  }),
-  '&:hover': hoveredStyles,
-  '&, :hover, :focus, :active': activeHoveredFocusedStyles(props),
-  transition: '0.1s all ease-in-out',
-  MozUserSelect: 'none',
-  // -moz-user-select
-
-  ...(props.isHovered ? hoveredWihBorderStyles(props) : undefined)
-});
-const truncateStyles = {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  wordBreak: 'break-all',
-  // The height of a truncated card is 1px higher than that of a non-truncated card, so we subtract 1px from the line height.
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: `${lineHeight - 1}px`,
-  display: '-webkit-inline-box',
-  WebkitLineClamp: 1,
-  WebkitBoxOrient: 'vertical',
-  // We need to remove the padding because display: -webkit-inline-box will cause any padding to be
-  // added to the total height, causing truncated cards to have greater height than non-truncated cards which use display: inline.
-  padding: 0,
-  '@supports not (-webkit-line-clamp: 1)': {
-    display: 'inline-block',
-    maxHeight: `${lineHeight}px`,
-    // If the browser does not support webkit, we don't need to remove the padding
-    padding: `${"var(--ds-space-025, 2px)"} 0px`
-  }
-};
-const isTruncated = ({
-  truncateInline
-}) => {
-  if (truncateInline) {
-    return truncateStyles;
-  }
-  return undefined;
-};
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-export const WrapperAnchor = styled.a(props => ({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ...baseWrapperStyles(props),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ...isInteractive(props),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ...isTruncated(props)
-}));
-WrapperAnchor.displayName = 'WrapperAnchor';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-export const WrapperSpan = styled.span(props => ({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ...baseWrapperStyles(props),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ...isTruncated(props)
-}));
-WrapperSpan.displayName = 'WrapperSpan';

package/dist/es2019/view/InlineCard/Icon-emotion.js

@@ -1,52 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import { SpanSkeleton } from '@atlaskit/linking-common';
-// TODO: Figure out a more scalable/responsive solution
-// for vertical alignment.
-// Current rationale: vertically positioned at the top of
-// the smart card container (when set to 0). Offset this
-// to position it with appropriate whitespace from the top.
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const Icon = styled.img({
-  height: '16px',
-  width: '16px',
-  marginRight: "var(--ds-space-050, 4px)",
-  borderRadius: '2px',
-  userSelect: 'none',
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)'
-});
-
-// TODO: Remove on platform-smart-card-icon-migration or bandicoots-compiled-migration-smartcard cleanup
-// Used for 'untrue' icons which claim to be 16x16 but
-// are less than that in height/width.
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const AKIconWrapper = styled.span({
-  marginRight: "var(--ds-space-negative-025, -2px)"
-});
-export const Shimmer = ({
-  testId
-}) => {
-  const skeletonCustomStyles = {
-    position: 'absolute',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    top: '50%',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    marginRight: "var(--ds-space-050, 4px)"
-  };
-  return /*#__PURE__*/React.createElement(SpanSkeleton, {
-    width: 16,
-    height: 16,
-    borderRadius: 2,
-    testId: testId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: skeletonCustomStyles
-  });
-};

package/dist/es2019/view/InlineCard/IconAndTitleLayout/IconAndTitleLayoutOld.compiled.css

@@ -1 +0,0 @@
-._1bsb1osq{width:100%}

package/dist/es2019/view/InlineCard/IconAndTitleLayout/IconAndTitleLayoutOld.js

@@ -1,204 +0,0 @@
-/* IconAndTitleLayoutOld.tsx generated by @compiled/babel-plugin v0.36.1 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import "./IconAndTitleLayoutOld.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
-import { di } from 'react-magnetic-di';
-import ImageLoader from 'react-render-image';
-import LinkIcon from '@atlaskit/icon/core/migration/link';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
-import { Icon, Shimmer } from '../Icon';
-import { LinkAppearance as LinkAppearanceOld, NoLinkAppearance as NoLinkAppearanceOld } from '../styled-emotion';
-import { EmojiWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh } from './styled';
-import { EmojiWrapper as EmojiWrapperOld, IconEmptyWrapper as IconEmptyWrapperOld, IconPositionWrapper as IconPositionWrapperOld, IconTitleWrapper as IconTitleWrapperOld, IconWrapper as IconWrapperOld, TitleWrapper as TitleWrapperOld } from './styled-emotion';
-export class IconAndTitleLayoutOld extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "handleClick", event => {
-      const {
-        onClick
-      } = this.props;
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-    _defineProperty(this, "handleKeyPress", event => {
-      const {
-        onClick
-      } = this.props;
-      if (event.key !== ' ' && event.key !== 'Enter') {
-        return;
-      }
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-  }
-  renderAtlaskitIcon() {
-    const {
-      icon,
-      emoji
-    } = this.props;
-    if (emoji) {
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/React.createElement(Box, {
-          as: "span",
-          xcss: iconWrapperStyle,
-          testId: "icon-position-emoji-wrapper"
-        }, emoji);
-      }
-      return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(EmojiWrapperOldVisualRefresh, null, emoji) : /*#__PURE__*/React.createElement(EmojiWrapperOld, null, emoji);
-    }
-    if (!icon || typeof icon === 'string') {
-      return null;
-    }
-    if (fg('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/React.createElement(Box, {
-        as: "span",
-        xcss: iconWrapperStyle,
-        testId: "icon-atlaskit-icon-wrapper"
-      }, icon);
-    }
-    return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, icon) : /*#__PURE__*/React.createElement(IconWrapperOld, null, icon);
-  }
-  renderImageIcon(errored, testId) {
-    const {
-      icon: url
-    } = this.props;
-    if (!url || typeof url !== 'string') {
-      return null;
-    }
-    if (fg('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/React.createElement(ImageLoader, {
-        src: url,
-        loaded: /*#__PURE__*/React.createElement("img", {
-          src: url,
-          "data-testid": `${testId}-image`,
-          alt: "",
-          className: ax(["_1bsb1osq"])
-        }),
-        errored: errored,
-        loading: /*#__PURE__*/React.createElement(Shimmer, {
-          testId: `${testId}-loading`
-        })
-      });
-    }
-    return /*#__PURE__*/React.createElement(ImageLoader, {
-      src: url,
-      loaded: /*#__PURE__*/React.createElement(Icon
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      , {
-        className: "smart-link-icon",
-        src: url,
-        "data-testid": `${testId}-image`,
-        alt: ""
-      }),
-      errored: errored,
-      loading: /*#__PURE__*/React.createElement(Shimmer, {
-        testId: `${testId}-loading`
-      })
-    });
-  }
-  renderIconPlaceholder(testId) {
-    const {
-      defaultIcon
-    } = this.props;
-    if (fg('platform-linking-visual-refresh-v1')) {
-      return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
-        label: "link",
-        LEGACY_size: "small",
-        testId: `${testId}-default`,
-        color: "currentColor"
-      });
-    }
-    if (defaultIcon) {
-      return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, defaultIcon);
-    }
-    return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(LinkIcon, {
-      label: "link",
-      LEGACY_size: "small",
-      testId: `${testId}-default`,
-      color: "currentColor"
-    }));
-  }
-  renderIcon(testId) {
-    // We render two kinds of icons here:
-    // - Image: acquired from either DAC or Teamwork Platform Apps;
-    // - Atlaskit Icon: an Atlaskit SVG;
-    // Each of these are scaled down to 12x12.
-    const icon = this.renderAtlaskitIcon();
-    if (icon) {
-      return icon;
-    }
-    const placeholder = this.renderIconPlaceholder(testId);
-    const image = this.renderImageIcon(placeholder, testId);
-    if (fg('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/React.createElement(Box, {
-        as: "span",
-        xcss: iconWrapperStyle,
-        testId: `${testId}-image-wrapper`
-      }, image || placeholder);
-    }
-    return image || placeholder;
-  }
-  render() {
-    const {
-      children,
-      title,
-      titleColor,
-      titleTextColor,
-      link,
-      rightSide,
-      testId = 'inline-card-icon-and-title'
-    } = this.props;
-    const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapperOld, {
-      "data-testid": "icon-position-wrapper"
-    }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOld, {
-      "data-testid": "icon-empty-wrapper"
-    }), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapperOld
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    , {
-      style: {
-        color: titleTextColor
-      }
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: TitleWrapperClassNameOldVisualRefresh
-    }, title));
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      React.createElement(IconTitleWrapperOld, {
-        style: {
-          color: titleColor
-        },
-        "data-testid": testId
-      }, link ? /*#__PURE__*/React.createElement(LinkAppearanceOld, {
-        href: link,
-        onClick: this.handleClick,
-        onKeyPress: this.handleKeyPress
-      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearanceOld, null, rightSide) : null)
-    );
-  }
-}
-_defineProperty(IconAndTitleLayoutOld, "defaultProps", {
-  rightSideSpacer: true
-});
-const iconWidth = '16px';
-const iconWrapperStyle = xcss({
-  position: 'absolute',
-  display: 'inline-flex',
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  top: 'space.0',
-  left: 'space.0',
-  bottom: 'space.0',
-  width: iconWidth,
-  userSelect: 'none'
-});
-const iconImageStyle = null;