@occmundial/occ-atomic 2.0.0 → 3.0.0-beta.1

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [3.0.0-beta.1](https://github.com/occmundial/occ-atomic/compare/v2.0.0...v3.0.0-beta.1) (2024-05-27)
+
+
+### Bug Fixes
+
+* Add events to Button ([cbac2b8](https://github.com/occmundial/occ-atomic/commit/cbac2b8a19cc93c76529a2aa4f91a685a5b7f9c7))
+* Change icon size ([2b6affe](https://github.com/occmundial/occ-atomic/commit/2b6affe0c6a40c080ebd9281dc8b4901aaffe4c4))
+* Change text component for html tags for text in droplist ([50f4972](https://github.com/occmundial/occ-atomic/commit/50f4972c306351416efe83700a6d4dcffa83f259))
+* Resolve merge conflicts ([b771fab](https://github.com/occmundial/occ-atomic/commit/b771fab5304a66febe94bc808eb383f7b1d47741))
+* Update snapshots ([6f32f65](https://github.com/occmundial/occ-atomic/commit/6f32f65188207312c1fa26ce2e4ffd4338ac99cf))
+
+
+### Features
+
+* Update Autocomplete styles ([fa449be](https://github.com/occmundial/occ-atomic/commit/fa449be2322c75857e6350ee9dee596cd441b033))
+* Update droplist styles with new design tokens ([27fdaf2](https://github.com/occmundial/occ-atomic/commit/27fdaf288e82a8493eb05d0315f4385585e71a04))
+* Update TextField styles ([0d0218e](https://github.com/occmundial/occ-atomic/commit/0d0218ea0df146da1b07482676eb99ad57d186b7))
+
+
+### BREAKING CHANGES
+
+* Remove the lockHeight and searchField properties
+
 # [2.0.0](https://github.com/occmundial/occ-atomic/compare/v1.39.1...v2.0.0) (2024-05-27)
 
 
@@ -55,6 +78,45 @@
 
 * The themes of the Button component have changed to match the styles of the button in the new design system. The current themes have slightly different names to the new ones but they all have a corresponding new theme that matches, except for the ghostPink theme.
 
+# [2.0.0-beta.19](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.18...v2.0.0-beta.19) (2024-05-27)
+
+
+### Features
+
+* Update Autocomplete styles ([fa449be](https://github.com/occmundial/occ-atomic/commit/fa449be2322c75857e6350ee9dee596cd441b033))
+
+# [2.0.0-beta.18](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.17...v2.0.0-beta.18) (2024-05-21)
+
+
+### Bug Fixes
+
+* Change icon size ([2b6affe](https://github.com/occmundial/occ-atomic/commit/2b6affe0c6a40c080ebd9281dc8b4901aaffe4c4))
+* Change text component for html tags for text in droplist ([50f4972](https://github.com/occmundial/occ-atomic/commit/50f4972c306351416efe83700a6d4dcffa83f259))
+* Resolve merge conflicts ([b771fab](https://github.com/occmundial/occ-atomic/commit/b771fab5304a66febe94bc808eb383f7b1d47741))
+* Update snapshots ([6f32f65](https://github.com/occmundial/occ-atomic/commit/6f32f65188207312c1fa26ce2e4ffd4338ac99cf))
+
+
+### Features
+
+* Update droplist styles with new design tokens ([27fdaf2](https://github.com/occmundial/occ-atomic/commit/27fdaf288e82a8493eb05d0315f4385585e71a04))
+
+# [2.0.0-beta.17](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.16...v2.0.0-beta.17) (2024-05-21)
+
+
+### Bug Fixes
+
+* Add events to Button ([cbac2b8](https://github.com/occmundial/occ-atomic/commit/cbac2b8a19cc93c76529a2aa4f91a685a5b7f9c7))
+
+
+### Features
+
+* Update TextField styles ([0d0218e](https://github.com/occmundial/occ-atomic/commit/0d0218ea0df146da1b07482676eb99ad57d186b7))
+
+
+### BREAKING CHANGES
+
+* Remove the lockHeight and searchField properties
+
 # [2.0.0-beta.16](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2024-05-14)
 
 

package/build/Autocomplete/Autocomplete.js

@@ -243,7 +243,8 @@ Autocomplete.propTypes = {
     className: _propTypes["default"].string,
     inputClassName: _propTypes["default"].string,
     disabled: _propTypes["default"].bool,
-    testId: _propTypes["default"].string
+    testId: _propTypes["default"].string,
+    disableAutoComplete: _propTypes["default"].bool
   }).isRequired,
 
   /** Object with the props for the Droplist component. Check their descriptions in the Droplist docs. */
@@ -279,9 +280,6 @@ Autocomplete.propTypes = {
   /** Function to call on mouse down (Droplist item). */
   onMouseDown: _propTypes["default"].func,
   onRef: _propTypes["default"].func,
-
-  /**  Disables native autoComplete on browsers. */
-  disableAutoComplete: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
@@ -292,7 +290,6 @@ Autocomplete.propTypes = {
 Autocomplete.defaultProps = {
   textfieldProps: {},
   droplistProps: {},
-  disableAutoComplete: false,
   showInitialData: false
 };
 var _default = Autocomplete;

package/build/Autocomplete/Autocomplete.test.js

@@ -36,7 +36,7 @@ var items = [{
   textRight: '(6)',
   id: 4
 }];
-describe("Autocomplete", function () {
+describe('Autocomplete', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       droplistProps: {
@@ -64,7 +64,7 @@ describe("Autocomplete", function () {
     expect(wrapper.find('.input').at(0).length).toBe(1);
     expect(wrapper.find('.droplist').at(0).length).toBe(1);
   });
-  it('hides the droplist when there\'s no value or the input has no focus', function () {
+  it("hides the droplist when there's no value or the input has no focus", function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       textfieldProps: {
         valueProp: 'a',
@@ -147,14 +147,17 @@ describe("Autocomplete", function () {
       },
       droplistProps: {
         items: items,
-        className: 'droplist'
+        className: 'droplist',
+        testId: 'test-component'
       },
       classes: classes
     }));
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-0'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls[0][0]).toEqual({
       id: 1,
       text: 'Administrador',
@@ -164,7 +167,9 @@ describe("Autocomplete", function () {
       focus: true,
       value: 'a'
     });
-    wrapper.find('.Droplist-item-0-1-34').at(1).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-1'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls[1][0]).toEqual({
       id: 2,
       text: 'Administrador Sr',
@@ -202,14 +207,17 @@ describe("Autocomplete", function () {
       },
       droplistProps: {
         items: items,
-        className: 'droplist'
+        className: 'droplist',
+        testId: "test-component"
       },
       classes: classes
     }));
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-0'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls.length).toBe(1);
   });
   it('calls the onFocus function', function () {
@@ -247,7 +255,7 @@ describe("Autocomplete", function () {
     expect(onBlur.mock.calls.length).toBe(1);
   });
 });
-describe("AutocompleteJSS", function () {
+describe('AutocompleteJSS', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       droplistProps: {
@@ -258,7 +266,7 @@ describe("AutocompleteJSS", function () {
     expect(wrapper).toMatchSnapshot();
   });
 });
-describe("Autocomplete styles", function () {
+describe('Autocomplete styles', function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });

package/build/Autocomplete/styles.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _idx = _interopRequireDefault(require("idx"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -20,10 +18,12 @@ var _default = {
     zIndex: 2,
     top: function top(props) {
       return (0, _idx["default"])(props, function (_) {
-        return _.textfieldProps.label;
+        return _.textfieldProps.assistiveText;
       }) || (0, _idx["default"])(props, function (_) {
-        return _.textfieldProps.lockHeight;
-      }) ? _spacing["default"].xLarge : 40;
+        return _.textfieldProps.counter;
+      }) && (0, _idx["default"])(props, function (_) {
+        return _.textfieldProps.maxLength;
+      }) ? 'calc(100% - 21px)' : 'calc(100% + 8px)';
     },
     left: 0,
     width: '100%'

package/build/Button/Button.js

@@ -17,6 +17,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -66,6 +68,9 @@ var Button = /*#__PURE__*/function (_React$Component) {
           target = _this$props.target,
           rel = _this$props.rel,
           onClick = _this$props.onClick,
+          onMouseDown = _this$props.onMouseDown,
+          onMouseUp = _this$props.onMouseUp,
+          onMouseOut = _this$props.onMouseOut,
           theme = _this$props.theme,
           size = _this$props.size,
           block = _this$props.block,
@@ -112,26 +117,33 @@ var Button = /*#__PURE__*/function (_React$Component) {
         width: iconSize,
         height: iconSize
       })) : null;
+      var eventProps = !disabled ? {
+        onClick: onClick,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
+        onMouseOut: onMouseOut
+      } : {};
 
       if (href) {
-        return /*#__PURE__*/_react["default"].createElement("a", {
+        return /*#__PURE__*/_react["default"].createElement("a", _extends({
           className: classNames,
           href: !disabled ? href : '',
           target: target,
-          rel: rel,
-          onClick: !disabled ? onClick : null,
+          rel: rel
+        }, eventProps, {
           id: id,
           style: style,
           "data-testid": testId
-        }, content, loadingLayer);
+        }), content, loadingLayer);
       } else {
-        return /*#__PURE__*/_react["default"].createElement("button", {
+        return /*#__PURE__*/_react["default"].createElement("button", _extends({
           className: classNames,
-          onClick: !disabled ? onClick : null,
+          disabled: disabled
+        }, eventProps, {
           id: id,
           style: style,
           "data-testid": testId
-        }, content, loadingLayer);
+        }), content, loadingLayer);
       }
     }
   }]);
@@ -176,6 +188,15 @@ Button.propTypes = {
   /** The function to call when the button is clicked. */
   onClick: _propTypes["default"].func,
 
+  /** The function to call when the mouse is down on the button. */
+  onMouseDown: _propTypes["default"].func,
+
+  /** The function to call when the mouse is up on the button. */
+  onMouseUp: _propTypes["default"].func,
+
+  /** The function to call when the mouse moves out of the button. */
+  onMouseOut: _propTypes["default"].func,
+
   /** Optionally, you can set the href property and use it like a link. */
   href: _propTypes["default"].string,
 

package/build/Droplist/Droplist.js

@@ -21,11 +21,9 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
 var _functions = require("./functions");
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -54,9 +52,6 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 var arrowDown = 40;
 var arrowUp = 38;
 var enter = 13;
-var inkLighter = _colors["default"].inkLighter,
-    ink = _colors["default"].ink;
-var iconSmall = _iconSizes["default"].small;
 /**
  * The Droplist component displays a list and filters it with the prop 'term'.
  * The value of 'term' es highlighted in every item that matches.
@@ -408,7 +403,7 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
           term = _this$props5.term,
           testId = _this$props5.testId;
       var itemsDOM = items.map(function (item, i) {
-        var index = (0, _functions.compareText)(item[itemTextKey], term);
+        var index = term ? (0, _functions.compareText)(item[itemTextKey], term) : -1;
 
         if (index >= 0) {
           var text = (0, _functions.separateText)(item[itemTextKey], index, term);
@@ -423,65 +418,58 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
             onMouseUp: function onMouseUp(e) {
               return _this4.onMouseUp(item, e);
             },
-            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : '')
+            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : " ".concat(classes.disabled))
           }, testId && {
             'data-testid': "".concat(testId, "__droplist-item-").concat(i)
-          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          }), /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.itemContainer
+          }, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
             iconName: item.iconName,
-            width: iconSmall,
-            height: iconSmall,
+            width: 24,
+            height: 24,
             display: "inline-block",
             className: classes.icon,
-            colors: [item.disabled ? inkLighter : ink]
-          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            className: item.iconName ? classes.iconText : '',
-            low: item.disabled
-          }, text[0].length ? text[0] : '', /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "b",
-            strong: true,
-            low: item.disabled
-          }, text[1].length ? text[1] : ''), text[2].length ? text[2] : '', item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            strong: true,
-            low: item.disabled,
-            className: "".concat(classes.extraText).concat(!item.disabled ? " ".concat(classes.extraTextColor) : '')
+            colors: [item.disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon["default"]["default"]]
+          }), /*#__PURE__*/_react["default"].createElement("p", {
+            className: "".concat(classes.text, " ").concat(classes.mainText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, text[0].length ? text[0] : '', /*#__PURE__*/_react["default"].createElement("b", {
+            className: "".concat(classes.highlighted).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, text[1].length ? text[1] : ''), text[2].length ? text[2] : '', item.extraText && /*#__PURE__*/_react["default"].createElement("span", {
+            className: "".concat(classes.text, " ").concat(classes.extraText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
           }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
-            className: classes.right
-          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            low: true
-          }, item[itemTextRightKey])));
+            className: "".concat(classes.text, " ").concat(classes.rightText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, item[itemTextRightKey]));
         } else {
           return /*#__PURE__*/_react["default"].createElement("div", _extends({
             key: item[itemIdKey],
-            onClick: function onClick(e) {
+            onClick: !item.disabled ? function (e) {
               return _this4.onClick(item, e);
-            },
+            } : null,
             onMouseDown: function onMouseDown(e) {
               return _this4.onMouseDown(item, e);
             },
             onMouseUp: function onMouseUp(e) {
               return _this4.onMouseUp(item, e);
             },
-            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '')
+            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : " ".concat(classes.disabled))
           }, testId && {
             'data-testid': "".concat(testId, "__droplist-item-").concat(i)
-          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          }), /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.itemContainer
+          }, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
             iconName: item.iconName,
-            width: 14,
-            height: 14,
+            width: 24,
+            height: 24,
             display: "inline-block",
-            colors: [inkLighter]
-          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], null, item[itemTextKey], item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            strong: true,
-            className: classes.extraText
+            className: classes.icon,
+            colors: [item.disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon["default"]["default"]]
+          }), /*#__PURE__*/_react["default"].createElement("p", {
+            className: "".concat(classes.text, " ").concat(classes.mainText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, item[itemTextKey], item.extraText && /*#__PURE__*/_react["default"].createElement("span", {
+            className: "".concat(classes.text, " ").concat(classes.extraText)
           }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
-            className: classes.right
-          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            low: true
-          }, item[itemTextRightKey])));
+            className: "".concat(classes.text, " ").concat(classes.rightText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, item[itemTextRightKey]));
         }
       });
       return itemsDOM;
@@ -510,11 +498,11 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
       }, groups ? items.map(function (group, index) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: group[groupIdKey]
-        }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-          small: true,
-          mid: true,
+        }, /*#__PURE__*/_react["default"].createElement("span", {
           className: classes.group
-        }, group[groupNameKey].toUpperCase()), _this5.renderList(group[groupItemsKey], currentGroup === index));
+        }, /*#__PURE__*/_react["default"].createElement("p", {
+          className: "".concat(classes.text, " ").concat(classes.groupText)
+        }, group[groupNameKey])), _this5.renderList(group[groupItemsKey], currentGroup === index));
       }) : this.renderList(items, true));
     }
   }]);

package/build/Droplist/Droplist.test.js

@@ -119,7 +119,7 @@ describe("Droplist", function () {
       itemIdKey: "id",
       classes: classes
     }));
-    expect(wrapper.find('.block>div').at(0).text()).toBe('PAÍSESMéxico(3405)');
+    expect(wrapper.find('.block>div').at(0).text()).toBe('PaísesMéxico(3405)');
   });
   it('filters the items', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
@@ -151,7 +151,7 @@ describe("Droplist", function () {
       itemIdKey: "id",
       classes: classes
     }));
-    expect(wrapper.find('.item').at(0).find('b').text()).toBe('');
+    expect(wrapper.find('.item').at(0).find('b').exists()).toBe(false);
     wrapper.setProps({
       term: 'Administrador'
     });

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

@@ -5,59 +5,91 @@ exports[`Droplist matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Droplist styles matches the snapshot 1`] = `
 Object {
   "block": Object {
-    "background": "#ffffff",
-    "border": "1px solid #dddddd",
-    "borderRadius": 4,
+    "background": "#fff",
+    "border": "1px solid #D3D4DC",
+    "borderRadius": "4px",
+    "boxShadow": "0 9px 12px -5px rgba(8,13,56,0.12), 0 10px 32px 0 rgba(9,61,173,0.12)",
     "overflow": "hidden",
+    "padding": "8px",
   },
-  "extraText": Object {
-    "marginLeft": 8,
+  "corpDisabled": Object {
+    "color": "#878A9F",
   },
-  "extraTextColor": Object {
-    "color": "#0946CB",
+  "disabled": Object {
+    "pointerEvents": "none",
+  },
+  "extraText": Object {
+    "color": "#083CAE",
+    "display": "inline-block",
+    "font": "400 10px/1.5 'OccText', sans-serif",
+    "marginLeft": "4px",
   },
   "group": Object {
+    "display": "inline-block",
     "padding": Array [
-      16,
-      16,
-      4,
+      "8px",
+      "16px",
+      0,
     ],
   },
-  "icon": Object {
-    "marginRight": 8,
-    "position": "absolute",
-    "top": 12,
+  "groupText": Object {
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
-  "iconText": Object {
-    "display": "inline-block",
-    "marginLeft": 24,
+  "highlighted": Object {
+    "background": "hsl(221 91.2% 35.7% / 0.05)",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+  },
+  "icon": Object {
+    "marginRight": "8px",
   },
   "item": Object {
+    "&:active, &:focus": Object {
+      "& > $rightText": Object {
+        "color": "#080D39",
+      },
+      "background": "hsl(221 91.2% 35.7% / 0.1)",
+    },
     "&:hover": Object {
-      "background": "#fafafa",
+      "background": "hsl(221 91.2% 35.7% / 0.05)",
     },
+    "alignItems": "center",
+    "borderRadius": "4px",
     "display": "flex",
     "justifyContent": "space-between",
     "padding": Array [
-      8,
-      16,
+      "12px",
+      "16px",
     ],
     "position": "relative",
     "transition": "0.1s all",
   },
+  "itemContainer": Object {
+    "alignItems": "center",
+    "display": "flex",
+  },
   "itemPointer": Object {
     "cursor": "pointer",
   },
+  "mainText": Object {
+    "color": "#080D39",
+    "display": "inline-block",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+  },
   "onFocus": Object {
     "&:hover": Object {
-      "background": "#e4edff",
+      "background": "hsl(221 91.2% 35.7% / 0.1)",
     },
-    "background": "#e4edff",
+    "background": "hsl(221 91.2% 35.7% / 0.1)",
   },
   "right": Object {
-    "float": "right",
-    "marginLeft": 16,
-    "transition": "0.1s all",
+    "marginLeft": "16px",
+  },
+  "rightText": Object {
+    "color": "#5A5D7B",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+  },
+  "text": Object {
+    "margin": 0,
   },
 }
 `;