@spaced-out/ui-design-system 0.1.101 → 0.1.103

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.103](https://github.com/spaced-out/ui-design-system/compare/v0.1.102...v0.1.103) (2024-07-03)
+
+
+### Features
+
+* ⭕️ shimmer component ([#233](https://github.com/spaced-out/ui-design-system/issues/233)) ([bad30af](https://github.com/spaced-out/ui-design-system/commit/bad30af1ca6b4b2b713b69b35dc3b78871eba6fe))
+
+### [0.1.102](https://github.com/spaced-out/ui-design-system/compare/v0.1.101...v0.1.102) (2024-07-03)
+
+
+### Features
+
+* 🌈 form title wrapper gradient button and basic table ([#232](https://github.com/spaced-out/ui-design-system/issues/232)) ([8905147](https://github.com/spaced-out/ui-design-system/commit/89051477ad5320dfb1324f657a1ad745f43269c4))
+
 ### [0.1.101](https://github.com/spaced-out/ui-design-system/compare/v0.1.100...v0.1.101) (2024-06-21)
 
 

package/design-tokens/size/base-size.json

@@ -150,6 +150,9 @@
     "720": {
       "value": "720px"
     },
+    "800": {
+      "value": "800px"
+    },
     "880": {
       "value": "880px"
     },

package/lib/components/Button/Button.js

@@ -14,12 +14,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+/**
+ * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.
+ * This only supports pre-defined gradient that moves from left to right.
+ * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.
+ *
+ * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged
+ * as it would add an additional overhead on the component to figure out exact color values from string tokens
+ * and since this is rarely used type anyway, it should be avoided.
+ */
 const BUTTON_TYPES = Object.freeze({
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
   ghost: 'ghost',
-  danger: 'danger'
+  danger: 'danger',
+  gradient: 'gradient'
 });
 exports.BUTTON_TYPES = BUTTON_TYPES;
 const BUTTON_ACTION_TYPE = Object.freeze({
@@ -33,14 +43,16 @@ const ButtonTypeToIconColorMap = {
   secondary: 'clickable',
   tertiary: 'primary',
   ghost: 'primary',
-  danger: 'inversePrimary'
+  danger: 'inversePrimary',
+  gradient: 'inversePrimary'
 };
 const ButtonTypeToLoaderColorMap = {
   primary: 'colorTextInversePrimary',
   secondary: 'colorTextClickable',
   tertiary: 'colorTextPrimary',
   ghost: 'colorTextPrimary',
-  danger: 'colorTextInversePrimary'
+  danger: 'colorTextInversePrimary',
+  gradient: 'colorTextInversePrimary'
 };
 const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -98,6 +110,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       [_ButtonModule.default.tertiary]: type === 'tertiary',
       [_ButtonModule.default.ghost]: type === 'ghost',
       [_ButtonModule.default.danger]: type === 'danger',
+      [_ButtonModule.default.gradient]: type === 'gradient',
       [_ButtonModule.default.disabled]: disabled,
       [_ButtonModule.default.small]: size === 'small',
       [_ButtonModule.default.medium]: size === 'medium',

package/lib/components/Button/Button.js.flow

@@ -13,12 +13,22 @@ import css from './Button.module.css';
 
 type ClassNames = $ReadOnly<{wrapper?: string, icon?: string, text?: string}>;
 
+/**
+ * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.
+ * This only supports pre-defined gradient that moves from left to right.
+ * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.
+ *
+ * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged
+ * as it would add an additional overhead on the component to figure out exact color values from string tokens
+ * and since this is rarely used type anyway, it should be avoided.
+ */
 export const BUTTON_TYPES = Object.freeze({
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
   ghost: 'ghost',
   danger: 'danger',
+  gradient: 'gradient',
 });
 
 export const BUTTON_ACTION_TYPE = Object.freeze({
@@ -66,6 +76,7 @@ const ButtonTypeToIconColorMap = {
   tertiary: 'primary',
   ghost: 'primary',
   danger: 'inversePrimary',
+  gradient: 'inversePrimary',
 };
 
 const ButtonTypeToLoaderColorMap = {
@@ -74,6 +85,7 @@ const ButtonTypeToLoaderColorMap = {
   tertiary: 'colorTextPrimary',
   ghost: 'colorTextPrimary',
   danger: 'colorTextInversePrimary',
+  gradient: 'colorTextInversePrimary',
 };
 
 export const UnstyledButton: React$AbstractComponent<
@@ -146,6 +158,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
             [css.tertiary]: type === 'tertiary',
             [css.ghost]: type === 'ghost',
             [css.danger]: type === 'danger',
+            [css.gradient]: type === 'gradient',
             [css.disabled]: disabled,
             [css.small]: size === 'small',
             [css.medium]: size === 'medium',

package/lib/components/Button/Button.module.css

@@ -29,7 +29,10 @@
   colorTextClickable,
   colorTextDisabled,
 
-  colorBorderSecondary
+  colorBorderSecondary,
+
+  colorFillPrimary,
+  colorInformation
 
 ) from '../../styles/variables/_color.css';
 
@@ -151,6 +154,16 @@ button {
   background-color: colorButtonFillPrimaryPressed;
 }
 
+/* Currently Gradient Buttons don't support hover / active states */
+.gradient {
+  color: colorTextInversePrimary;
+  background-image: linear-gradient(
+    to right,
+    colorFillPrimary,
+    colorInformation
+  );
+}
+
 .secondary {
   color: colorTextClickable;
   background-color: colorButtonFillSecondaryEnabled;
@@ -231,6 +244,7 @@ button {
   color: colorTextDisabled;
   background-color: colorFillDisabled;
   border: initial;
+  background-image: initial;
 }
 
 .hidden {

package/lib/components/FormTitleWrapper/FormTitleWrapper.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormTitleWrapper = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _FormTitleWrapperModule = _interopRequireDefault(require("./FormTitleWrapper.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const FormTitleWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    iconType,
+    iconName,
+    iconSize = 'small',
+    iconColor,
+    title,
+    rightSlot
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "FormTitleWrapper",
+    className: _FormTitleWrapperModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FormTitleWrapperModule.default.leftSection, classNames?.wrapper)
+  }, !!iconName && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    type: iconType,
+    name: iconName,
+    size: iconSize,
+    color: iconColor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FormTitleWrapperModule.default.componentHousing, classNames?.title)
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FormTitleWrapperModule.default.rightSection, classNames?.rightSlot)
+  }, rightSlot));
+});
+exports.FormTitleWrapper = FormTitleWrapper;

package/lib/components/FormTitleWrapper/FormTitleWrapper.js.flow

@@ -0,0 +1,68 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+
+import css from './FormTitleWrapper.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  title?: string,
+  rightSlot?: string,
+}>;
+
+export type FormTitleWrapperProps = {
+  classNames?: ClassNames,
+  iconType?: IconType,
+  iconName?: string,
+  iconSize?: IconSize,
+  iconColor?: ColorTypes,
+  title: React.Node, // Should always atleast have a title
+  rightSlot?: React.Node,
+};
+
+export const FormTitleWrapper: React$AbstractComponent<
+  FormTitleWrapperProps,
+  HTMLDivElement,
+> = React.forwardRef<FormTitleWrapperProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      iconType,
+      iconName,
+      iconSize = 'small',
+      iconColor,
+      title,
+      rightSlot,
+    }: FormTitleWrapperProps,
+    ref,
+  ) => (
+    <div ref={ref} data-testid="FormTitleWrapper" className={css.container}>
+      <div className={classify(css.leftSection, classNames?.wrapper)}>
+        {!!iconName && (
+          <Icon
+            type={iconType}
+            name={iconName}
+            size={iconSize}
+            color={iconColor}
+          />
+        )}
+        {/* This is to safeguard semantics as it internally composes from a subTitleSmall className
+            we don't fix the component here as <SubtitleSmall> resolves to <h4> and since title is a React.Node,
+            this would break semantics in case custom components are passed inside
+         */}
+        <div className={classify(css.componentHousing, classNames?.title)}>
+          {title}
+        </div>
+      </div>
+      <div className={classify(css.rightSection, classNames?.rightSlot)}>
+        {rightSlot}
+      </div>
+    </div>
+  ),
+);

package/lib/components/FormTitleWrapper/FormTitleWrapper.module.css

@@ -0,0 +1,24 @@
+@value (colorFillPrimary) from '../../styles/variables/_color.css';
+@value (sizeFluid) from '../../styles/variables/_size.css';
+@value (spaceSmall, spaceXSmall) from '../../styles/variables/_space.css';
+
+.container {
+  display: flex;
+  composes: borderTopPrimary from '../../styles/border.module.css';
+  justify-content: space-between;
+  align-items: center;
+  width: sizeFluid;
+  padding-top: spaceSmall;
+  padding-bottom: spaceSmall;
+}
+
+.leftSection {
+  display: flex;
+  align-items: center;
+  gap: spaceXSmall;
+}
+
+.componentHousing {
+  display: flex;
+  composes: subTitleSmall from '../../styles/typography.module.css';
+}

package/lib/components/FormTitleWrapper/index.js

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

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

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

package/lib/components/Shimmer/Shimmer.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Shimmer = exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = exports.SHIMMER_TYPES = exports.KPIShimmer = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _border = require("../../styles/variables/_border");
+var _size = require("../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _string = require("../../utils/string");
+var _ShimmerModule = _interopRequireDefault(require("./Shimmer.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const SHIMMER_TYPES = Object.freeze({
+  text: 'text',
+  rounded: 'rounded',
+  circular: 'circular',
+  rectangular: 'rectangular'
+});
+exports.SHIMMER_TYPES = SHIMMER_TYPES;
+const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = Object.freeze({
+  text: _border.borderRadiusXSmall,
+  rounded: _border.borderRadiusMedium,
+  circular: _border.borderRadiusCircle,
+  rectangular: _border.borderRadiusNone
+});
+exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = SHIMMER_TYPE_TO_BORDER_RADIUS_MAP;
+const Shimmer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    show = true,
+    type = SHIMMER_TYPES.text,
+    children,
+    width = _size.size40,
+    height = _size.sizeFluid,
+    borderRadius
+  } = _ref;
+  if (!show) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  const borderRadiusValue = borderRadius ?? SHIMMER_TYPE_TO_BORDER_RADIUS_MAP[type];
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-testid": "Shimmer",
+    className: (0, _classify.default)(_ShimmerModule.default.wrapper, _ShimmerModule.default[type], classNames?.wrapper),
+    style: {
+      '--width': (0, _string.appendPx)(width),
+      '--height': (0, _string.appendPx)(height),
+      '--border-radius': (0, _string.appendPx)(borderRadiusValue)
+    }
+  });
+});
+exports.Shimmer = Shimmer;
+const KPIShimmer = _ref2 => {
+  let {
+    textWidth = 150
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ShimmerModule.default.kpiBox
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _ShimmerModule.default.section
+  }, /*#__PURE__*/React.createElement(Shimmer, {
+    type: "rounded",
+    width: 60,
+    height: 60
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _ShimmerModule.default.section
+  }, /*#__PURE__*/React.createElement(Shimmer, {
+    type: "text",
+    width: textWidth,
+    height: 15
+  }), /*#__PURE__*/React.createElement(Shimmer, {
+    type: "text",
+    width: textWidth,
+    height: 25
+  }), /*#__PURE__*/React.createElement(Shimmer, {
+    type: "text",
+    width: textWidth,
+    height: 15
+  })));
+};
+exports.KPIShimmer = KPIShimmer;

package/lib/components/Shimmer/Shimmer.js.flow

@@ -0,0 +1,97 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  borderRadiusCircle,
+  borderRadiusMedium,
+  borderRadiusNone,
+  borderRadiusXSmall,
+} from '../../styles/variables/_border';
+import {size40, sizeFluid} from '../../styles/variables/_size';
+import classify from '../../utils/classify';
+import {appendPx} from '../../utils/string';
+
+import css from './Shimmer.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const SHIMMER_TYPES = Object.freeze({
+  text: 'text',
+  rounded: 'rounded',
+  circular: 'circular',
+  rectangular: 'rectangular',
+});
+
+export const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = Object.freeze({
+  text: borderRadiusXSmall,
+  rounded: borderRadiusMedium,
+  circular: borderRadiusCircle,
+  rectangular: borderRadiusNone,
+});
+
+export type ShimmerType = $Values<typeof SHIMMER_TYPES>;
+
+export type ShimmerProps = {
+  classNames?: ClassNames,
+  show?: boolean,
+  type?: ShimmerType,
+  width?: number | string,
+  height?: number | string,
+  borderRadius?: number | string,
+  children?: React.Node,
+};
+
+export const Shimmer: React$AbstractComponent<ShimmerProps, HTMLSpanElement> =
+  React.forwardRef<ShimmerProps, HTMLSpanElement>(
+    (
+      {
+        classNames,
+        show = true,
+        type = SHIMMER_TYPES.text,
+        children,
+        width = size40,
+        height = sizeFluid,
+        borderRadius,
+      }: ShimmerProps,
+      ref,
+    ) => {
+      if (!show) {
+        return <>{children}</>;
+      }
+
+      const borderRadiusValue =
+        borderRadius ?? SHIMMER_TYPE_TO_BORDER_RADIUS_MAP[type];
+
+      return (
+        <span
+          ref={ref}
+          data-testid="Shimmer"
+          className={classify(css.wrapper, css[type], classNames?.wrapper)}
+          style={{
+            '--width': appendPx(width),
+            '--height': appendPx(height),
+            '--border-radius': appendPx(borderRadiusValue),
+          }}
+        ></span>
+      );
+    },
+  );
+
+export type KPIShimmerProps = {
+  textWidth?: number | string,
+};
+
+export const KPIShimmer = ({textWidth = 150}: KPIShimmerProps): React.Node => (
+  <div className={css.kpiBox}>
+    <div className={css.section}>
+      <Shimmer type="rounded" width={60} height={60}></Shimmer>
+    </div>
+    <div className={css.section}>
+      <Shimmer type="text" width={textWidth} height={15}></Shimmer>
+      <Shimmer type="text" width={textWidth} height={25}></Shimmer>
+      <Shimmer type="text" width={textWidth} height={15}></Shimmer>
+    </div>
+  </div>
+);

package/lib/components/Shimmer/Shimmer.module.css

@@ -0,0 +1,63 @@
+@value (colorFillPrimary, colorNeutralLightest, colorNeutralLight, colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (spaceXSmall, spaceNone, spaceLarge, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';
+@value (sizeFluid, size40, size252) from '../../styles/variables/_size.css';
+@value (borderRadiusXSmall, borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (opacity20, opacity40, opacity60) from '../../styles/variables/_opacity.css';
+@value (motionDurationSlowest) from '../../styles/variables/_motion.css';
+
+@value backgroundSizeInitial: calc(sizeFluid * 2);
+@value backgroundSizeFinal: calc(sizeFluid * -2);
+@value motionDuration: calc(motionDurationSlowest * 1.5);
+
+.wrapper {
+  --width: size40;
+  --border-radius: borderRadiusXSmall;
+  --height: sizeFluid;
+  display: flex;
+  height: var(--height);
+  width: var(--width);
+  border-radius: var(--border-radius);
+  background: linear-gradient(
+    to right,
+    colorNeutralLightest opacity20,
+    colorNeutralLight opacity40,
+    colorNeutralLightest opacity60
+  );
+  background-size: backgroundSizeInitial sizeFluid;
+  animation: shimmer motionDuration infinite linear;
+  vertical-align: middle;
+}
+
+.text {
+  margin: spaceNone spaceXSmall;
+}
+
+.kpiBox {
+  display: flex;
+  composes: borderPrimary from '../../styles/border.module.css';
+  min-width: size252;
+  width: fit-content;
+  height: fit-content;
+  align-items: center;
+  gap: spaceSmall;
+  background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusMedium;
+  padding: spaceLarge spaceMedium;
+}
+
+.section {
+  display: flex;
+  width: sizeFluid;
+  flex-flow: column;
+  gap: spaceXSmall;
+  align-items: center;
+}
+
+@keyframes shimmer {
+  from {
+    background-position: backgroundSizeInitial spaceNone;
+  }
+  to {
+    background-position: backgroundSizeFinal spaceNone;
+  }
+}

package/lib/components/Shimmer/index.js

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

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

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

package/lib/components/index.js

@@ -256,6 +256,17 @@ Object.keys(_FocusManagerWithArrowKeyNavigation).forEach(function (key) {
     }
   });
 });
+var _FormTitleWrapper = require("./FormTitleWrapper");
+Object.keys(_FormTitleWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FormTitleWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FormTitleWrapper[key];
+    }
+  });
+});
 var _Grid = require("./Grid");
 Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -443,6 +454,17 @@ Object.keys(_SearchInput).forEach(function (key) {
     }
   });
 });
+var _Shimmer = require("./Shimmer");
+Object.keys(_Shimmer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Shimmer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Shimmer[key];
+    }
+  });
+});
 var _SideMenuLink = require("./SideMenuLink");
 Object.keys(_SideMenuLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -23,6 +23,7 @@ export * from './ErrorMessage';
 export * from './FileUpload';
 export * from './FocusManager';
 export * from './FocusManagerWithArrowKeyNavigation';
+export * from './FormTitleWrapper';
 export * from './Grid';
 export * from './Icon';
 export * from './InContextAlert';
@@ -40,6 +41,7 @@ export * from './Pagination';
 export * from './Panel';
 export * from './RadioButton';
 export * from './SearchInput';
+export * from './Shimmer';
 export * from './SideMenuLink';
 export * from './StatusIndicator';
 export * from './Stepper';

package/lib/styles/index.css

@@ -476,6 +476,8 @@
 
 @value size720: 720px;
 
+@value size800: 800px;
+
 @value size880: 880px;
 
 @value size960: 960px;

package/lib/styles/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
 exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = void 0;
-exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = void 0;
+exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -485,6 +485,8 @@ const size660 = '660px';
 exports.size660 = size660;
 const size720 = '720px';
 exports.size720 = size720;
+const size800 = '800px';
+exports.size800 = size800;
 const size880 = '880px';
 exports.size880 = size880;
 const size960 = '960px';

package/lib/styles/index.js.flow

@@ -478,6 +478,8 @@ export const size660 = '660px';
 
 export const size720 = '720px';
 
+export const size800 = '800px';
+
 export const size880 = '880px';
 
 export const size960 = '960px';

package/lib/styles/variables/_size.css

@@ -98,6 +98,8 @@
 
 @value size720: 720px;
 
+@value size800: 800px;
+
 @value size880: 880px;
 
 @value size960: 960px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -105,6 +105,8 @@ const size660 = '660px';
 exports.size660 = size660;
 const size720 = '720px';
 exports.size720 = size720;
+const size800 = '800px';
+exports.size800 = size800;
 const size880 = '880px';
 exports.size880 = size880;
 const size960 = '960px';

package/lib/styles/variables/_size.js.flow

@@ -100,6 +100,8 @@ export const size660 = '660px';
 
 export const size720 = '720px';
 
+export const size800 = '800px';
+
 export const size880 = '880px';
 
 export const size960 = '960px';

package/lib/utils/string/string.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.truncateString = exports.formatWord = exports.escapeRegExp = exports.capitalize = void 0;
+exports.truncateString = exports.formatWord = exports.escapeRegExp = exports.capitalize = exports.appendPx = void 0;
 
 const capitalize = word => {
   if (!word) {
@@ -22,4 +22,11 @@ const truncateString = (inputString, maxLength) => {
   }
   return inputString;
 };
-exports.truncateString = truncateString;
+exports.truncateString = truncateString;
+const appendPx = value => {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return value ?? '';
+};
+exports.appendPx = appendPx;

package/lib/utils/string/string.js.flow

@@ -24,3 +24,10 @@ export const truncateString = (
   }
   return inputString;
 };
+
+export const appendPx = (value?: number | string): string => {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return value ?? '';
+};

package/package.json

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