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

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.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/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/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.58",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {