@occmundial/occ-atomic 3.0.0-beta.19 → 3.0.0-beta.20

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [3.0.0-beta.20](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.19...v3.0.0-beta.20) (2024-06-25)
+
+
+### Bug Fixes
+
+* Add condition to set test id prop ([4e90cea](https://github.com/occmundial/occ-atomic/commit/4e90cea0a6f5c627c8b2a398a9aef449fa3e1b7c))
+* Adjust tip styles and add banner prop ([04d17ff](https://github.com/occmundial/occ-atomic/commit/04d17ff0fe74186da32d15f91001406344867bb4))
+* Merge beta changes ([218b68a](https://github.com/occmundial/occ-atomic/commit/218b68a7347b025dc2cdd8171f7d4c22bbd383f1))
+* Resolve component data conflicts ([c390f1f](https://github.com/occmundial/occ-atomic/commit/c390f1f485415dc15251386527c0caaa70e9814f))
+
+
+### Features
+
+* Add test id prop and add new tests ([aba7d32](https://github.com/occmundial/occ-atomic/commit/aba7d3215e0b19e635b53546f66accd327ebed42))
+
 # [3.0.0-beta.19](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2024-06-21)
 
 

package/build/Banner/Banner.js

@@ -9,10 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _WindowSize = _interopRequireDefault(require("../WindowSize"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
-
 var _Tip = _interopRequireDefault(require("../Tip"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -23,21 +19,23 @@ var Banner = function Banner(_ref) {
       className = _ref.className,
       children = _ref.children,
       onClose = _ref.onClose,
-      winWidth = _ref.winWidth,
       cta = _ref.cta,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'promote' : _ref$theme;
+      theme = _ref$theme === void 0 ? 'promote' : _ref$theme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size,
+      testId = _ref.testId;
   return /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
     id: id,
     style: style,
     className: className,
     onClose: onClose,
-    size: winWidth < _grid["default"].xs ? 'small' : 'large',
-    center: true,
-    type: "banner",
+    banner: true,
     cta: cta,
     theme: theme,
-    icon: true
+    icon: true,
+    size: size,
+    testId: testId
   }, children);
 };
 
@@ -58,9 +56,11 @@ Banner.propTypes = {
     target: _propTypes["default"].string,
     onClick: _propTypes["default"].func
   }),
-  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error', 'promote'])
-};
-
-var _default = (0, _WindowSize["default"])(Banner);
+  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error', 'promote']),
+  size: _propTypes["default"].oneOf(['large', 'small']),
 
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
+};
+var _default = Banner;
 exports["default"] = _default;

package/build/Banner/Banner.test.js

@@ -6,35 +6,82 @@ var _enzyme = require("enzyme");
 
 var _Banner = _interopRequireDefault(require("./Banner"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 var _index = _interopRequireDefault(require("./index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var reduceClasses = function reduceClasses(prev, curr) {
-  return Object.assign({}, prev, _defineProperty({}, curr, curr));
-};
-
-var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Banner", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
-      classes: classes
-    }));
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
     expect(wrapper).toMatchSnapshot();
   });
+  it('Has content centered', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.prop('banner')).toEqual(true);
+  });
+  it('has a close icon button', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info",
+      testId: "banner-test"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.find({
+      "data-testid": 'banner-test__close-icon'
+    }).length).toBe(1);
+  });
+  it('has a link', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info",
+      testId: "banner-test"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.find({
+      "data-testid": 'banner-test__link'
+    }).length).toBe(1);
+  });
 });
 describe("BannerJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
     expect(wrapper).toMatchSnapshot();
   });
-});
-describe("Banner styles", function () {
-  it('matches the snapshot', function () {
-    expect(_styles["default"]).toMatchSnapshot();
-  });
 });

package/build/Banner/__snapshots__/Banner.test.js.snap

@@ -2,32 +2,4 @@
 
 exports[`Banner matches the snapshot 1`] = `ShallowWrapper {}`;
 
-exports[`Banner styles matches the snapshot 1`] = `
-Object {
-  "container": Object {
-    "backgroundColor": "#222222",
-    "padding": 16,
-  },
-  "icon": Object {
-    "cursor": "pointer",
-  },
-  "iconFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "padding": 0,
-    },
-    "paddingLeft": 16,
-    "paddingTop": 16,
-  },
-  "textBanner": Object {
-    "display": "inline-block",
-  },
-  "textFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "textAlign": "center",
-    },
-    "textAlign": "start",
-  },
-}
-`;
-
 exports[`BannerJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Banner/index.js

@@ -5,14 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
 var _Banner = _interopRequireDefault(require("./Banner"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss["default"])(_styles["default"])(_Banner["default"]);
-
+var _default = _Banner["default"];
 exports["default"] = _default;

package/build/Tip/Tip.js

@@ -21,6 +21,8 @@ var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var icons = {
   info: 'info-circle',
   warning: 'alert',
@@ -45,15 +47,13 @@ var Tip = function Tip(_ref) {
       classes = _ref.classes,
       icon = _ref.icon,
       theme = _ref.theme,
-      noBorderRadius = _ref.noBorderRadius,
-      center = _ref.center,
+      banner = _ref.banner,
       onClose = _ref.onClose,
       children = _ref.children,
       cta = _ref.cta,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'large' : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'alert' : _ref$type;
+      testId = _ref.testId;
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: id,
     className: className,
@@ -61,35 +61,38 @@ var Tip = function Tip(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     justifyContent: "start",
     display: "flex",
-    className: "".concat(classes.container, " ").concat(classes[theme]).concat(noBorderRadius ? " ".concat(classes.noBorderRadius) : '').concat(size === 'small' ? " ".concat(classes.small) : '')
+    className: "".concat(classes.container, " ").concat(classes[theme]).concat(banner ? " ".concat(classes.noBorderRadius) : '')
   }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     flex: "1",
-    justifyContent: center ? 'center' : null,
-    alignItems: "stretch",
-    className: type === 'banner' ? classes.bannerContent : ''
+    alignItems: "stretch"
   }, icon && theme !== PROMOTE && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     iconName: icons[theme],
     className: classes.icon,
     colors: [theme === 'info' ? _colors["default"].icon.brand["default"] : _colors["default"].icon[theme]]
   }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
-    direction: size === 'small' ? 'col' : 'row'
+    direction: size === 'small' ? 'col' : 'row',
+    justifyContent: banner ? 'center' : 'start',
+    className: "".concat(classes.textContainer).concat(banner ? " ".concat(classes.maxWidth) : '')
   }, /*#__PURE__*/_react["default"].createElement(_TipText["default"], {
-    classes: "".concat(classes.normalText, " ").concat(classes[colorTextClasses[theme]]),
+    classes: "".concat(classes.normalText, " ").concat(classes[colorTextClasses[theme]]).concat(!banner ? " ".concat(classes.growText) : ''),
     text: children
-  }), cta && /*#__PURE__*/_react["default"].createElement("a", {
-    className: "".concat(classes.cta, " ").concat(size === 'small' ? classes.ctaSmall : classes.ctaLarge, " ").concat(classes[colorTextClasses[theme]]),
+  }), cta && /*#__PURE__*/_react["default"].createElement("a", _extends({
+    className: "".concat(classes.cta, " ").concat(classes[colorTextClasses[theme]]).concat(size === 'large' && banner ? " ".concat(classes.ctaBanner) : size === 'large' ? " ".concat(classes.ctaAlert) : ''),
     href: cta.href,
     target: cta.target,
     onClick: cta.onClick
-  }, cta.text))), onClose && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, testId && {
+    'data-testid': "".concat(testId, "__link")
+  }), cta.text))), onClose && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
     onClick: onClose,
-    className: classes.closeIcon,
-    size: type === 'banner' ? 'lg' : 'md',
+    className: size === 'small' ? classes.closeIconSmallMargin : classes.closeIconMargin,
     icon: "x",
     theme: theme === PROMOTE ? 'ghostWhite' : 'ghostGrey'
-  })));
+  }, testId && {
+    testId: "".concat(testId, "__close-icon")
+  }))));
 };
 
 Tip.defaultProps = {
@@ -116,11 +119,8 @@ Tip.propTypes = {
   /** Boolean to show an icon. */
   icon: _propTypes["default"].bool,
 
-  /** Cancel the default border radius. */
-  noBorderRadius: _propTypes["default"].bool,
-
-  /** Center Tip content. */
-  center: _propTypes["default"].bool,
+  /** Sets content centered and remove border radius. */
+  banner: _propTypes["default"].bool,
 
   /** Function to call on click of the x icon. */
   onClose: _propTypes["default"].func,
@@ -130,7 +130,9 @@ Tip.propTypes = {
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
-  type: _propTypes["default"].oneOf(['alert', 'banner'])
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Tip;
 exports["default"] = _default;

package/build/Tip/Tip.test.js

@@ -43,13 +43,42 @@ describe("Tip", function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
       classes: classes,
       icon: true
-    }));
+    }, "Alert text"));
     expect(wrapper.find('.icon').length).toBe(1);
   });
+  it('has a close icon button', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
+      classes: classes,
+      icon: true,
+      onClose: function onClose() {
+        return console.log('Close');
+      },
+      testId: "alert-test"
+    }, "Tip text "));
+    expect(wrapper.find({
+      "data-testid": 'alert-test__close-icon'
+    }).length).toBe(1);
+  });
+  it('has a link', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
+      classes: classes,
+      icon: true,
+      cta: {
+        text: 'Click here.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      testId: "alert-test"
+    }, "Tip text "));
+    expect(wrapper.find({
+      "data-testid": 'alert-test__link'
+    }).length).toBe(1);
+  });
 });
 describe("TipJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null, "Tip text "));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/build/Tip/__snapshots__/Tip.test.js.snap

@@ -4,45 +4,62 @@ exports[`Tip matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`Tip styles matches the snapshot 1`] = `
 Object {
-  "bannerContent": Object {
-    "margin": "auto",
-    "maxWidth": "1200px",
-  },
-  "closeIcon": Object {
+  "closeIconMargin": Object {
     "marginLeft": "16px",
   },
+  "closeIconSmallMargin": Object {
+    "marginLeft": "12px",
+  },
   "container": Object {
+    "@media screen and (min-width:576px)": Object {
+      "padding": Array [
+        "8px",
+        "16px",
+      ],
+    },
     "alignItems": "center",
     "borderRadius": "4px",
     "minHeight": "56px",
     "outlineOffset": "-1px",
-    "padding": Array [
-      "8px",
-      "16px",
-    ],
+    "padding": "12px",
   },
   "cta": Object {
+    "alignSelf": "start",
     "cursor": "pointer",
     "font": "400 14px/1.5 'OccText', sans-serif",
+    "margin": Array [
+      "8px",
+      0,
+      0,
+    ],
     "textDecoration": "underline",
     "textWrap": "nowrap",
   },
-  "ctaLarge": Object {
+  "ctaAlert": Object {
     "alignSelf": "center",
-    "marginLeft": "16px",
+    "margin": Array [
+      0,
+      0,
+      0,
+      "16px",
+    ],
   },
-  "ctaSmall": Object {
-    "alignSelf": "start",
+  "ctaBanner": Object {
+    "alignSelf": "center",
     "margin": Array [
-      "8px",
       0,
       0,
+      0,
+      "8px",
     ],
   },
   "error": Object {
     "backgroundColor": "#fce8e8",
     "outline": "1px solid #FBDFDF",
   },
+  "growText": Object {
+    "flexGrow": 1,
+  },
   "icon": Object {
     "flexShrink": 0,
     "marginRight": "8px",
@@ -51,8 +68,12 @@ Object {
     "backgroundColor": "#e3efff",
     "outline": "1px solid #b9d7ff",
   },
-  "largePadding": Object {
-    "padding": "12px",
+  "maxWidth": Object {
+    "margin": Array [
+      0,
+      "auto",
+    ],
+    "maxWidth": "1200px",
   },
   "noBorderRadius": Object {
     "borderRadius": 0,
@@ -66,25 +87,12 @@ Object {
     "backgroundColor": "#000",
     "outline": "1px solid rgba(255,255,255,0.2)",
   },
-  "small": Object {
-    "maxWidth": 360,
-    "padding": "12px",
-  },
-  "smallPadding": Object {
-    "padding": "8px",
-  },
   "success": Object {
     "backgroundColor": "#ebfbf1",
     "outline": "1px solid #d7f6e3",
   },
-  "text": Object {
-    "maxWidth": "100%",
-  },
   "textContainer": Object {
-    "padding": Array [
-      "12px",
-      0,
-    ],
+    "flex": 1,
   },
   "textError": Object {
     "color": "#8b1313",

package/build/Tip/styles.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _grid = _interopRequireDefault(require("../subatomic/grid"));
+
 var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
@@ -17,14 +19,18 @@ var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var _default = {
-  container: {
-    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4']],
+  container: _defineProperty({
+    padding: _spacing["default"]['size-3'],
     borderRadius: _borderRadius["default"]['br-xs'],
     minHeight: '56px',
     alignItems: 'center',
     outlineOffset: '-1px'
-  },
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4']]
+  }),
   noBorderRadius: {
     borderRadius: 0
   },
@@ -72,31 +78,27 @@ var _default = {
     marginRight: _spacing["default"]['size-2'],
     flexShrink: 0
   },
-  text: {
-    maxWidth: '100%'
-  },
-  closeIcon: {
+  closeIconMargin: {
     marginLeft: _spacing["default"]['size-4']
   },
-  smallPadding: {
-    padding: _spacing["default"]['size-2']
-  },
-  largePadding: {
-    padding: _spacing["default"]['size-3']
+  closeIconSmallMargin: {
+    marginLeft: _spacing["default"]['size-3']
   },
   cta: {
     textDecoration: 'underline',
     font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
     cursor: 'pointer',
-    textWrap: 'nowrap'
+    textWrap: 'nowrap',
+    margin: [_spacing["default"]['size-2'], 0, 0],
+    alignSelf: 'start'
   },
-  ctaLarge: {
-    marginLeft: _spacing["default"]['size-4'],
+  ctaAlert: {
+    margin: [0, 0, 0, _spacing["default"]['size-4']],
     alignSelf: 'center'
   },
-  ctaSmall: {
-    margin: [_spacing["default"]['size-2'], 0, 0],
-    alignSelf: 'start'
+  ctaBanner: {
+    margin: [0, 0, 0, _spacing["default"]['size-2']],
+    alignSelf: 'center'
   },
   normalText: {
     font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
@@ -104,15 +106,14 @@ var _default = {
     margin: 0
   },
   textContainer: {
-    padding: [_spacing["default"]['size-3'], 0]
+    flex: 1
   },
-  small: {
-    maxWidth: 360,
-    padding: _spacing["default"]['size-3']
+  growText: {
+    flexGrow: 1
   },
-  bannerContent: {
+  maxWidth: {
     maxWidth: '1200px',
-    margin: 'auto'
+    margin: [0, 'auto']
   }
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.19",
+  "version": "3.0.0-beta.20",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",

package/build/Banner/styles.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var _default = {
-  container: {
-    padding: _spacing["default"].small,
-    backgroundColor: _colors["default"].ink
-  },
-  textBanner: {
-    display: 'inline-block'
-  },
-  textFlex: _defineProperty({
-    textAlign: 'start'
-  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    textAlign: 'center'
-  }),
-  iconFlex: _defineProperty({
-    paddingLeft: _spacing["default"].small,
-    paddingTop: _spacing["default"].small
-  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    padding: 0
-  }),
-  icon: {
-    cursor: 'pointer'
-  }
-};
-exports["default"] = _default;