@spaced-out/ui-design-system 0.1.57 → 0.1.59

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.59](https://github.com/spaced-out/ui-design-system/compare/v0.1.58...v0.1.59) (2023-10-13)
+
+
+### Features
+
+* 🤘 expose event for Menu selection for all menu derivatives ([ff9704c](https://github.com/spaced-out/ui-design-system/commit/ff9704c3116d6743cc26fee20be43a89a6095b0a))
+
+
+### Bug Fixes
+
+* renamed story ([b2541ee](https://github.com/spaced-out/ui-design-system/commit/b2541ee368a69e357d28b9485135d09d86f2a54b))
+
+### [0.1.58](https://github.com/spaced-out/ui-design-system/compare/v0.1.57...v0.1.58) (2023-10-09)
+
+
+### Features
+
+* new typography components, added toggle label position prop ([869ed49](https://github.com/spaced-out/ui-design-system/commit/869ed49f8448b8a0630b2eebf0e2a65eb533160e))
+
 ### [0.1.57](https://github.com/spaced-out/ui-design-system/compare/v0.1.56...v0.1.57) (2023-10-04)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -125,8 +125,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         })
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
-      onSelect: option => {
-        onOptionSelect && onOptionSelect(option);
+      onSelect: (option, e) => {
+        onOptionSelect && onOptionSelect(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -58,7 +58,7 @@ export type ButtonDropdownProps = {
   menu?: MenuProps,
   positionStrategy?: Strategy,
   anchorPosition?: AnchorType,
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   tooltip?: BaseTooltipProps,
@@ -176,8 +176,8 @@ export const ButtonDropdown: React$AbstractComponent<
               >
                 <Menu
                   {...menu}
-                  onSelect={(option) => {
-                    onOptionSelect && onOptionSelect(option);
+                  onSelect={(option, e) => {
+                    onOptionSelect && onOptionSelect(option, e);
                     if (
                       !menu.optionsVariant ||
                       menu.optionsVariant === 'normal'

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js

@@ -35,7 +35,8 @@ const SimpleButtonDropdownBase = (props, ref) => {
     setButtonDropdownSelectedKeys(selectedKeys);
     setBtnText(newBtnText);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
     if (optionsVariant === 'checkbox') {
       newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, buttonDropdownSelectedKeys);
@@ -46,7 +47,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
     setButtonDropdownSelectedKeys(newSelectedKeys);
     setBtnText(newBtnText);
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow

@@ -40,7 +40,7 @@ export type SimpleButtonDropdownProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
 
@@ -80,7 +80,8 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     setBtnText(newBtnText);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
 
     if (optionsVariant === 'checkbox') {
@@ -101,7 +102,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     setBtnText(newBtnText);
 
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
 

package/lib/components/Dropdown/Dropdown.js

@@ -83,8 +83,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         width: _size.sizeFluid
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
-      onSelect: option => {
-        onChange && onChange(option);
+      onSelect: (option, e) => {
+        onChange && onChange(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/Dropdown/Dropdown.js.flow

@@ -29,7 +29,7 @@ type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
 export type DropdownProps = {
   ...InputProps,
   classNames?: ClassNames,
-  onChange?: (option: MenuOption) => mixed,
+  onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   dropdownInputText?: string,
@@ -105,8 +105,8 @@ export const Dropdown: React$AbstractComponent<
               >
                 <Menu
                   {...menu}
-                  onSelect={(option) => {
-                    onChange && onChange(option);
+                  onSelect={(option, e) => {
+                    onChange && onChange(option, e);
                     if (
                       !menu.optionsVariant ||
                       menu.optionsVariant === 'normal'

package/lib/components/Dropdown/SimpleDropdown.js

@@ -33,7 +33,8 @@ const SimpleDropdownBase = (props, ref) => {
     setDropdownSelectedKeys(selectedKeys);
     setDropdownInputText(newDropdownText);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
     if (optionsVariant === 'checkbox') {
       newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, dropdownSelectedKeys);
@@ -44,7 +45,7 @@ const SimpleDropdownBase = (props, ref) => {
     setDropdownSelectedKeys(newSelectedKeys);
     setDropdownInputText(newDropdownText);
     setTimeout(() => {
-      onChange?.(selectedOption);
+      onChange?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -35,7 +35,7 @@ export type SimpleDropdownProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onChange?: (option: MenuOption) => mixed,
+  onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
 
@@ -73,7 +73,8 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     setDropdownInputText(newDropdownText);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
 
     if (optionsVariant === 'checkbox') {
@@ -94,7 +95,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     setDropdownInputText(newDropdownText);
 
     setTimeout(() => {
-      onChange?.(selectedOption);
+      onChange?.(selectedOption, e);
     });
   };
 

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -88,8 +88,8 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         left: x ?? _space.spaceNone
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
-      onSelect: option => {
-        onOptionSelect && onOptionSelect(option);
+      onSelect: (option, e) => {
+        onOptionSelect && onOptionSelect(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/InlineDropdown/InlineDropdown.js.flow

@@ -38,7 +38,7 @@ export type InlineDropdownProps = {
   classNames?: ClassNames,
   menu?: MenuProps,
   anchorPosition?: AnchorType,
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   size?: 'medium' | 'small' | 'extraSmall',
@@ -129,8 +129,8 @@ export const InlineDropdown: React$AbstractComponent<
               >
                 <Menu
                   {...menu}
-                  onSelect={(option) => {
-                    onOptionSelect && onOptionSelect(option);
+                  onSelect={(option, e) => {
+                    onOptionSelect && onOptionSelect(option, e);
                     if (
                       !menu.optionsVariant ||
                       menu.optionsVariant === 'normal'

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

@@ -35,7 +35,8 @@ const SimpleInlineDropdownBase = (props, ref) => {
     setInlineDropdownSelectedKeys(selectedKeys);
     setBtnText(newBtnText);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
     if (optionsVariant === 'checkbox') {
       newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, inlineDropdownSelectedKeys);
@@ -46,7 +47,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
     setInlineDropdownSelectedKeys(newSelectedKeys);
     setBtnText(newBtnText);
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow

@@ -37,7 +37,7 @@ export type SimpleInlineDropdownProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
 
@@ -77,7 +77,8 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     setBtnText(newBtnText);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [];
 
     if (optionsVariant === 'checkbox') {
@@ -98,7 +99,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     setBtnText(newBtnText);
 
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
 

package/lib/components/Menu/Menu.js.flow

@@ -49,7 +49,7 @@ export type MenuOption = {
 // Render first available option set
 
 export type BaseMenuProps = {
-  onSelect?: (option: MenuOption) => mixed,
+  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   selectedOption?: ?MenuOption,
   optionsVariant?: MenuOptionsVariant,
   selectedKeys?: Array<string>,

package/lib/components/Menu/MenuOptionButton.js

@@ -80,7 +80,7 @@ const MenuOptionButton = props => {
       [_MenuModule.default.withIconRight]: !!iconRight
     }, classNames?.option, optionClassNames?.wrapper),
     disabled: menuDisabled || disabled,
-    onClick: () => onSelect && onSelect(option),
+    onClick: e => onSelect && onSelect(option, e),
     autoFocus: selectedOption?.key === key
   }, isLastItem ? {
     ref: lastMenuItemRef

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -98,7 +98,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
         optionClassNames?.wrapper,
       )}
       disabled={menuDisabled || disabled}
-      onClick={() => onSelect && onSelect(option)}
+      onClick={(e) => onSelect && onSelect(option, e)}
       autoFocus={selectedOption?.key === key}
       {...(isLastItem ? {ref: lastMenuItemRef} : {})}
     >

package/lib/components/OptionButton/OptionButton.js.flow

@@ -33,7 +33,7 @@ export type OptionButtonProps = {
   ...ButtonProps,
   menu?: MenuProps,
   anchorPosition?: AnchorType,
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -34,7 +34,8 @@ const SimpleOptionButtonBase = (props, ref) => {
   React.useEffect(() => {
     setOptionButtonSelectedKeys(selectedKeys);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [selectedOption.key];
     if (optionsVariant === 'checkbox') {
       newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(selectedOption, optionButtonSelectedKeys);
@@ -43,7 +44,7 @@ const SimpleOptionButtonBase = (props, ref) => {
     }
     setOptionButtonSelectedKeys(newSelectedKeys);
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/OptionButton/SimpleOptionButton.js.flow

@@ -42,7 +42,7 @@ export type SimpleOptionButtonProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
@@ -81,7 +81,8 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
     setOptionButtonSelectedKeys(selectedKeys);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     let newSelectedKeys = [selectedOption.key];
 
     if (optionsVariant === 'checkbox') {
@@ -96,7 +97,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
     setOptionButtonSelectedKeys(newSelectedKeys);
 
     setTimeout(() => {
-      onOptionSelect?.(selectedOption);
+      onOptionSelect?.(selectedOption, e);
     });
   };
 

package/lib/components/Tabs/TabList/TabDropdown.js

@@ -69,8 +69,8 @@ const TabDropdown = _ref => {
         left: x ?? _space.spaceNone
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, props.menu, {
-      onSelect: option => {
-        onOptionSelect && onOptionSelect(option);
+      onSelect: (option, e) => {
+        onOptionSelect && onOptionSelect(option, e);
         clickAway();
       },
       size: props.menu.size || size,

package/lib/components/Tabs/TabList/TabDropdown.js.flow

@@ -35,7 +35,7 @@ export type TabDropdownProps = {
     tab: TabProps,
     menu: MenuProps,
   },
-  onOptionSelect?: (option: MenuOption) => mixed,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   classNames?: ClassNames,
   selected?: boolean,
   disabled?: boolean,
@@ -91,8 +91,8 @@ export const TabDropdown = ({
             >
               <Menu
                 {...props.menu}
-                onSelect={(option) => {
-                  onOptionSelect && onOptionSelect(option);
+                onSelect={(option, e) => {
+                  onOptionSelect && onOptionSelect(option, e);
                   clickAway();
                 }}
                 size={props.menu.size || size}

package/lib/components/Text/Text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmall = exports.ButtonTextMedium = exports.ButtonTextExtraSmall = exports.BodySmall = exports.BodyMedium = exports.BodyLarge = void 0;
+exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmallUnderline = exports.ButtonTextSmall = exports.ButtonTextMediumUnderline = exports.ButtonTextMedium = exports.ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmall = exports.BodySmallBold = exports.BodySmall = exports.BodyMediumBold = exports.BodyMedium = exports.BodyLargeBold = exports.BodyLarge = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -269,7 +269,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   }) : children);
 });
 exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
-const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -280,6 +280,75 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     highlightWithBackground,
     ...props
   } = _ref12;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default.underline, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.ButtonTextMediumUnderline = ButtonTextMediumUnderline;
+const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref13;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.ButtonTextSmallUnderline = ButtonTextSmallUnderline;
+const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref14;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.ButtonTextExtraSmallUnderline = ButtonTextExtraSmallUnderline;
+const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref15;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
     ref: ref
@@ -292,7 +361,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   }) : children);
 });
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -302,7 +371,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref13;
+  } = _ref16;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
     ref: ref
@@ -315,7 +384,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
   }) : children);
 });
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+const BodyLarge = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -325,7 +394,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref14;
+  } = _ref17;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
     ref: ref
@@ -338,7 +407,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   }) : children);
 });
 exports.BodyLarge = BodyLarge;
-const BodyMedium = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+const BodyMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -348,7 +417,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref15;
+  } = _ref18;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
     ref: ref
@@ -361,7 +430,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   }) : children);
 });
 exports.BodyMedium = BodyMedium;
-const BodySmall = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+const BodySmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -371,7 +440,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref16;
+  } = _ref19;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
     ref: ref
@@ -384,7 +453,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   }) : children);
 });
 exports.BodySmall = BodySmall;
-const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
+const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -394,7 +463,76 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref17;
+  } = _ref20;
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default.bold, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.BodyLargeBold = BodyLargeBold;
+const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref21;
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default.bold, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.BodyMediumBold = BodyMediumBold;
+const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref22;
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default.bold, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.BodySmallBold = BodySmallBold;
+const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref23;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
     ref: ref
@@ -407,7 +545,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   }) : children);
 });
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
+const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -417,7 +555,7 @@ const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref18;
+  } = _ref24;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
     ref: ref

package/lib/components/Text/Text.js.flow

@@ -454,6 +454,132 @@ export const ButtonTextExtraSmall: React$AbstractComponent<
   ),
 );
 
+export const ButtonTextMediumUnderline: React$AbstractComponent<
+  TextProps,
+  HTMLSpanElement,
+> = React.forwardRef<TextProps, HTMLSpanElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <span
+      {...props}
+      className={classify(
+        css.buttonTextMedium,
+        css.underline,
+        css[color],
+        className,
+      )}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </span>
+  ),
+);
+
+export const ButtonTextSmallUnderline: React$AbstractComponent<
+  TextProps,
+  HTMLSpanElement,
+> = React.forwardRef<TextProps, HTMLSpanElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <span
+      {...props}
+      className={classify(
+        css.buttonTextSmall,
+        css.underline,
+        css[color],
+        className,
+      )}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </span>
+  ),
+);
+
+export const ButtonTextExtraSmallUnderline: React$AbstractComponent<
+  TextProps,
+  HTMLSpanElement,
+> = React.forwardRef<TextProps, HTMLSpanElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <span
+      {...props}
+      className={classify(
+        css.buttonTextExtraSmall,
+        css.underline,
+        css[color],
+        className,
+      )}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </span>
+  ),
+);
+
 export const FormInputMedium: React$AbstractComponent<
   TextProps,
   HTMLParagraphElement,
@@ -639,6 +765,117 @@ export const BodySmall: React$AbstractComponent<
   ),
 );
 
+export const BodyLargeBold: React$AbstractComponent<
+  TextProps,
+  HTMLParagraphElement,
+> = React.forwardRef<TextProps, HTMLParagraphElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <p
+      {...props}
+      className={classify(css.bodyLarge, css.bold, css[color], className)}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </p>
+  ),
+);
+
+export const BodyMediumBold: React$AbstractComponent<
+  TextProps,
+  HTMLParagraphElement,
+> = React.forwardRef<TextProps, HTMLParagraphElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <p
+      {...props}
+      className={classify(css.bodyMedium, css.bold, css[color], className)}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </p>
+  ),
+);
+
+export const BodySmallBold: React$AbstractComponent<
+  TextProps,
+  HTMLParagraphElement,
+> = React.forwardRef<TextProps, HTMLParagraphElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <p
+      {...props}
+      className={classify(css.bodySmall, css.bold, css[color], className)}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </p>
+  ),
+);
+
 export const FormLabelMedium: React$AbstractComponent<
   TextProps,
   HTMLSpanElement,

package/lib/components/Text/index.js

@@ -9,36 +9,72 @@ Object.defineProperty(exports, "BodyLarge", {
     return _Text.BodyLarge;
   }
 });
+Object.defineProperty(exports, "BodyLargeBold", {
+  enumerable: true,
+  get: function () {
+    return _Text.BodyLargeBold;
+  }
+});
 Object.defineProperty(exports, "BodyMedium", {
   enumerable: true,
   get: function () {
     return _Text.BodyMedium;
   }
 });
+Object.defineProperty(exports, "BodyMediumBold", {
+  enumerable: true,
+  get: function () {
+    return _Text.BodyMediumBold;
+  }
+});
 Object.defineProperty(exports, "BodySmall", {
   enumerable: true,
   get: function () {
     return _Text.BodySmall;
   }
 });
+Object.defineProperty(exports, "BodySmallBold", {
+  enumerable: true,
+  get: function () {
+    return _Text.BodySmallBold;
+  }
+});
 Object.defineProperty(exports, "ButtonTextExtraSmall", {
   enumerable: true,
   get: function () {
     return _Text.ButtonTextExtraSmall;
   }
 });
+Object.defineProperty(exports, "ButtonTextExtraSmallUnderline", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextExtraSmallUnderline;
+  }
+});
 Object.defineProperty(exports, "ButtonTextMedium", {
   enumerable: true,
   get: function () {
     return _Text.ButtonTextMedium;
   }
 });
+Object.defineProperty(exports, "ButtonTextMediumUnderline", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextMediumUnderline;
+  }
+});
 Object.defineProperty(exports, "ButtonTextSmall", {
   enumerable: true,
   get: function () {
     return _Text.ButtonTextSmall;
   }
 });
+Object.defineProperty(exports, "ButtonTextSmallUnderline", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextSmallUnderline;
+  }
+});
 Object.defineProperty(exports, "FormInputMedium", {
   enumerable: true,
   get: function () {

package/lib/components/Text/index.js.flow

@@ -4,11 +4,17 @@ export {TEXT_COLORS} from '../../types/typography';
 export type {TextProps} from './Text';
 export {
   BodyLarge,
+  BodyLargeBold,
   BodyMedium,
+  BodyMediumBold,
   BodySmall,
+  BodySmallBold,
   ButtonTextExtraSmall,
+  ButtonTextExtraSmallUnderline,
   ButtonTextMedium,
+  ButtonTextMediumUnderline,
   ButtonTextSmall,
+  ButtonTextSmallUnderline,
   FormInputMedium,
   FormInputSmall,
   FormLabelMedium,

package/lib/components/Toggle/Toggle.js

@@ -22,6 +22,7 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     focused,
     onChange,
     ariaLabel,
+    labelPosition = 'right',
     ...props
   } = _ref;
   const toggleInput = /*#__PURE__*/React.createRef();
@@ -48,7 +49,9 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       [_ToggleModule.default.disabled]: disabled
     }, classNames?.wrapper),
     onClick: onWrapClickHandler
-  }, /*#__PURE__*/React.createElement("span", {
+  }, labelPosition === 'left' && React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label)
+  }, children), /*#__PURE__*/React.createElement("span", {
     className: _ToggleModule.default.toggleWrap
   }, /*#__PURE__*/React.createElement("input", _extends({
     type: "checkbox",
@@ -63,7 +66,7 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     className: (0, _classify.default)(_ToggleModule.default.toggle, {
       [_ToggleModule.default.disabledButton]: disabled
     })
-  })), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+  })), labelPosition === 'right' && React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label)
   }, children));
 });

package/lib/components/Toggle/Toggle.js.flow

@@ -25,6 +25,7 @@ export type ToggleProps = {
   focused?: boolean,
   value?: string,
   ariaLabel?: string,
+  labelPosition?: 'left' | 'right',
 };
 
 export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
@@ -40,6 +41,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
         focused,
         onChange,
         ariaLabel,
+        labelPosition = 'right',
         ...props
       }: ToggleProps,
       forwardRef,
@@ -77,6 +79,11 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
           )}
           onClick={onWrapClickHandler}
         >
+          {labelPosition === 'left' && React.Children.count(children) > 0 && (
+            <div className={classify(css.toggleLabel, classNames?.label)}>
+              {children}
+            </div>
+          )}
           <span className={css.toggleWrap}>
             <input
               type="checkbox"
@@ -95,7 +102,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
               })}
             />
           </span>
-          {React.Children.count(children) > 0 && (
+          {labelPosition === 'right' && React.Children.count(children) > 0 && (
             <div className={classify(css.toggleLabel, classNames?.label)}>
               {children}
             </div>

package/lib/components/Typeahead/SimpleTypeahead.js

@@ -33,13 +33,14 @@ const SimpleTypeaheadBase = (props, ref) => {
     setTypeaheadSelectedKeys(selectedKeys);
     setTypeaheadInputText(newTypeaheadText);
   }, [selectedKeys]);
-  const handleOptionChange = selectedOption => {
+  const handleOptionChange = (selectedOption, e) => {
+    e?.stopPropagation();
     const newSelectedKeys = [selectedOption.key];
     const newTypeaheadText = (0, _menu.getTextLabelFromSelectedKeys)(newSelectedKeys, options);
     setTypeaheadSelectedKeys(newSelectedKeys);
     setTypeaheadInputText(newTypeaheadText);
     setTimeout(() => {
-      onSelect?.(selectedOption);
+      onSelect?.(selectedOption, e);
     });
   };
   React.useImperativeHandle(ref, () => ({

package/lib/components/Typeahead/SimpleTypeahead.js.flow

@@ -32,7 +32,7 @@ export type SimpleTypeaheadProps = {
   selectedKeys?: Array<string>,
 
   // events
-  onSelect?: (option: MenuOption) => mixed,
+  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
@@ -75,7 +75,8 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     setTypeaheadInputText(newTypeaheadText);
   }, [selectedKeys]);
 
-  const handleOptionChange = (selectedOption: MenuOption) => {
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
     const newSelectedKeys = [selectedOption.key];
 
     const newTypeaheadText = getTextLabelFromSelectedKeys(
@@ -87,7 +88,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     setTypeaheadInputText(newTypeaheadText);
 
     setTimeout(() => {
-      onSelect?.(selectedOption);
+      onSelect?.(selectedOption, e);
     });
   };
 

package/lib/components/Typeahead/Typeahead.js

@@ -112,8 +112,8 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       options: filteredOptions,
-      onSelect: option => {
-        onSelect && onSelect(option);
+      onSelect: (option, e) => {
+        onSelect && onSelect(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/Typeahead/Typeahead.js.flow

@@ -29,7 +29,7 @@ type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
 export type TypeaheadProps = {
   ...InputProps,
   classNames?: ClassNames,
-  onSelect?: (option: MenuOption) => mixed,
+  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
@@ -148,8 +148,8 @@ export const Typeahead: React$AbstractComponent<
                 <Menu
                   {...menu}
                   options={filteredOptions}
-                  onSelect={(option) => {
-                    onSelect && onSelect(option);
+                  onSelect={(option, e) => {
+                    onSelect && onSelect(option, e);
                     if (
                       !menu.optionsVariant ||
                         menu.optionsVariant === 'normal'

package/lib/styles/typography.module.css

@@ -30,6 +30,7 @@
   fontLineHeight100,
   fontLineHeight120,
   fontLineHeight125,
+  fontLineHeight130,
   fontLineHeight140,
   fontLineHeight150,
   fontLineHeight170,
@@ -61,6 +62,10 @@
   align-items: center;
 }
 
+.underline {
+  text-decoration: underline;
+}
+
 .jumboMedium {
   composes: baseType;
   font-size: fontSize46;
@@ -154,7 +159,7 @@
   composes: baseType;
   font-size: fontSize12;
   font-weight: fontWeightBook;
-  line-height: fontLineHeight150;
+  line-height: fontLineHeight130;
   letter-spacing: fontLetterSpacing4;
 }
 
@@ -170,6 +175,10 @@
   line-height: fontLineHeight140;
 }
 
+.bold {
+  font-weight: fontWeightMedium;
+}
+
 .primary {
   color: colorTextPrimary;
 }

package/lib/utils/array/are-arrays-equal.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.areArraysEqual = areArraysEqual;
+
+function areArraysEqual(array1, array2) {
+  let itemComparer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (a, b) => a === b;
+  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}

package/lib/utils/array/are-arrays-equal.js.flow

@@ -0,0 +1,14 @@
+// @flow strict
+
+type ItemComparer<Item> = (a: Item, b: Item) => boolean;
+
+export function areArraysEqual<Item>(
+  array1: Item[],
+  array2: Item[],
+  itemComparer: ItemComparer<Item> = (a, b) => a === b,
+): boolean {
+  return (
+    array1.length === array2.length &&
+    array1.every((value, index) => itemComparer(value, array2[index]))
+  );
+}

package/lib/utils/array/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _areArraysEqual = require("./are-arrays-equal");
+Object.keys(_areArraysEqual).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _areArraysEqual[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _areArraysEqual[key];
+    }
+  });
+});

package/lib/utils/array/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './are-arrays-equal';

package/lib/utils/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _array = require("./array");
+Object.keys(_array).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _array[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _array[key];
+    }
+  });
+});
 var _classify = require("./classify");
 Object.keys(_classify).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/utils/index.js.flow

@@ -1,5 +1,6 @@
 // @flow strict
 
+export * from './array';
 export * from './classify';
 export * from './click-away';
 export * from './dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {