oa-componentbook 0.0.0-sit1.1

package/build/components/oa-component-count-card/CustomCountCard.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _typographyOptions = require("../../global-css/typography-options");
+var _colorOptions = require("../../global-css/color-options");
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A card component that displays a label, an image and a subtext.
+ * Used for displaying counts in a grid layout.
+ *
+ * @param {string} label - The label text to be displayed.
+ * @param {string} imgPath - The path to the image to be displayed.
+ * @param {string} subText - The subtext to be displayed.
+ * @param {string} labelTypography - The typography option for the label. See typographyOptions for all available options.
+ * @param {string} labelColor - The color option for the label. See colorOptions for all available options.
+ * @param {string} subTextTypography - The typography option for the subtext. See typographyOptions for all available options.
+ * @param {string} subTextColor - The color option for the subtext. See colorOptions for all available options.
+ * @param {string} imgWidth - The width of the image to be displayed.
+ *
+ * @returns {ReactElement} A React element representing the card component.
+ */
+function CustomCountCard(_ref) {
+  let {
+    label,
+    imgPath,
+    subText,
+    labelTypography,
+    labelColor,
+    subTextTypography,
+    subTextColor,
+    imgWidth
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.CustomCountStyle, null, imgPath && /*#__PURE__*/_react.default.createElement("img", {
+    src: imgPath,
+    alt: "imageIcon",
+    style: {
+      width: imgWidth
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, label && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-sl1-700",
+    color: "secondary-content"
+  }, label)), /*#__PURE__*/_react.default.createElement("h3", null, subText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-h1-500",
+    color: "primary-content"
+  }, subText))));
+}
+CustomCountCard.propTypes = {
+  label: _propTypes.default.string,
+  imgPath: _propTypes.default.string,
+  subText: _propTypes.default.string,
+  labelTypography: _propTypes.default.oneOf(_typographyOptions.typographyOptions),
+  labelColor: _propTypes.default.oneOf(_colorOptions.colorOptions),
+  subTextTypography: _propTypes.default.oneOf(_typographyOptions.typographyOptions),
+  subTextColor: _propTypes.default.oneOf(_colorOptions.colorOptions),
+  imgWidth: _propTypes.default.string
+};
+CustomCountCard.defaultProps = {
+  label: '',
+  imgPath: '',
+  subText: '',
+  labelTypography: null,
+  labelColor: null,
+  subTextTypography: null,
+  subTextColor: null,
+  imgWidth: '36px'
+};
+var _default = exports.default = CustomCountCard;

package/build/components/oa-component-count-card/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomCountStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const CustomCountStyle = exports.CustomCountStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n\n    img {margin-right:16px}\n    div {display: flex;\n        flex-direction: column;\n        justify-content: flex-start;}\n\n        div h3{margin-top:8px}\n"])));

package/build/components/oa-component-datepicker/CustomDatePicker.js

@@ -0,0 +1,134 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomDatePicker;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _antd = require("antd");
+var _CalendarTodayRounded = _interopRequireDefault(require("@material-ui/icons/CalendarTodayRounded"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+require("antd/dist/reset.css");
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+const _excluded = ["data-test", "disabledDateFunction", "containerSize"];
+var _templateObject, _templateObject2;
+/* eslint-disable */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const CalendarPopupStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.compact-calendar .ant-picker-body {\n  padding: 6px 10px !important;   /* moderate spacing */\n}\n\n.compact-calendar .ant-picker-content {\n  margin: 0 !important;\n  width: 100% !important;\n  table-layout: fixed;\n}\n\n.compact-calendar .ant-picker-cell {\n  padding: 2px 1px !important;    /* smaller inner padding */\n  height: 30px;                   /* compact but readable */\n  line-height: 30px;\n}\n\n\n"])));
+const FullWidthDatePicker = (0, _styledComponents.default)(_antd.DatePicker)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+
+/**
+ * A custom datepicker component.
+ *
+ * The component includes a Material UI icon on the right side of the input field.
+ * The component is fully customizable and can be used with any of the options
+ * provided by the antd datepicker component.
+ *
+ * @param {Object} props - The props for the component
+ * @prop {string} ['data-test'] - The data-test value for the component
+ *
+ * @return {ReactElement} The rendered component
+ */
+function CustomDatePicker(_ref) {
+  let {
+      "data-test": dataTest,
+      disabledDateFunction,
+      containerSize
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        DatePicker: {
+          // paddingInline: 161, // This works for middle sized datepicker
+          // paddingInlineSM: 12,
+          /*
+          For small size:
+          20 (line height)
+          + 2 * 5 (padding)
+          + 2 * 1 (border)
+          */
+          paddingBlockSM: 5,
+          /*
+          For default size:
+          20 (line height)
+          + 2 * 13 (padding)
+          + 2 * 1 (border)
+          */
+          paddingBlock: 13,
+          paddingInline: 16,
+          paddingInlineSM: 12
+        }
+      },
+      token: {
+        lineHeight: _TypographiesMap.default["type-b2-400"]["line-height"] / _TypographiesMap.default["type-b2-400"]["font-size"],
+        paddingBlockLG: 50,
+        paddingXS: 16,
+        // Used to control margin of calendar icon
+        // controlPaddingHorizontal: 161,
+        // controlPaddingHorizontalSM: 12,
+        controlHeight: 48,
+        // height of text field (tag height is half of this, i.e. 24px)
+        controlHeightSM: 32,
+        // height of small text field
+        // controlHeightLG: 64,
+        borderRadius: 4,
+        colorPrimary: _ColorVariablesMap.default["--color-primary"],
+        // for active color of input
+        colorPrimaryHover: _ColorVariablesMap.default["--color-primary"],
+        // for hover color of input
+        colorBgContainerDisabled: _ColorVariablesMap.default["--color-divider"],
+        colorBorder: _ColorVariablesMap.default["--color-placeholder-text"],
+        // border color of input text field
+        colorTextDisabled: _ColorVariablesMap.default["--color-placeholder-text"],
+        // Color of disabled text.
+        colorTextPlaceholder: _ColorVariablesMap.default["--color-placeholder-text"],
+        // Color of placeholder text
+        colorTextQuaternary: _ColorVariablesMap.default["--color-placeholder-text"],
+        // color of disabled calendar icon
+        colorText: _ColorVariablesMap.default["--color-primary-content"],
+        // Text color
+        colorIcon: _ColorVariablesMap.default["--color-primary"],
+        // Color of arrows icons beside month and year in datepicker
+        colorIconHover: _ColorVariablesMap.default["--color-primary-hover"],
+        // Hover color of arrows icons beside month and year in datepicker
+
+        colorLink: _ColorVariablesMap.default["--color-primary"],
+        colorLinkHover: _ColorVariablesMap.default["--color-primary-hover"],
+        colorError: _ColorVariablesMap.default["--color-negative"],
+        // Error color
+        colorErrorBorderHover: _ColorVariablesMap.default["--color-negative"] // Hover error color should be same as error color
+      }
+    }
+  }, containerSize === "small" && /*#__PURE__*/_react.default.createElement(CalendarPopupStyle, null), /*#__PURE__*/_react.default.createElement(FullWidthDatePicker, _extends({
+    dropdownClassName: containerSize === "small" ? "compact-calendar" : "",
+    showToday: containerSize === "small" ? false : true,
+    allowClear: true // Discussed with UX team
+    ,
+    suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _CalendarTodayRounded.default,
+      size: 20
+    }),
+    disabledDate: disabledDateFunction
+  }, props)));
+}
+CustomDatePicker.propTypes = {
+  "data-test": _propTypes.default.string,
+  size: _propTypes.default.oneOf(["small", "middle"])
+};
+CustomDatePicker.defaultProps = {
+  "data-test": null,
+  size: "middle"
+};

package/build/components/oa-component-demo-border-radius/BorderRadiusDemo.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Import the styles from the separate file
+
+/**
+ * A component to demonstrate the various border radius values in the design system.
+ *
+ * @param {string} className - The desired border radius style from the design system.
+ *                             One of 'border-radius-xlarge', 'border-radius-large',
+ *                             'border-radius-medium', 'border-radius-small',
+ *                             'border-radius-xsmall', 'border-radius-none', or
+ *                             'border-radius-full'.
+ *
+ * @return {ReactElement} A styled <div> element with the specified border radius.
+ */
+function BorderRadiusDemo(_ref) {
+  let {
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCornerComponent, {
+    className: className
+  }, className);
+}
+BorderRadiusDemo.propTypes = {
+  className: _propTypes.default.oneOf(['border-radius-xlarge', 'border-radius-large', 'border-radius-medium', 'border-radius-small', 'border-radius-xsmall', 'border-radius-none', 'border-radius-full']).isRequired
+};
+var _default = exports.default = BorderRadiusDemo;

package/build/components/oa-component-demo-border-radius/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledCornerComponent = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const StyledCornerComponent = exports.StyledCornerComponent = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 200px;\n  width: 200px;\n  color: white;\n  background-color: #029CFD;\n"])));

package/build/components/oa-component-demo-color-variables/ColorVariablesDemo.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+var _colorOptions = require("../../global-css/color-options");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Import the styles from the separate file
+
+/**
+ * Component that renders a block with a background color specified by the
+ * given color variable, and displays the name of the variable.
+ *
+ * @param {string} color - The name of the color variable to use.
+ * (e.g. 'primary', 'background-dark', 'background-info', etc.)
+ *
+ * @returns {React.ReactNode} The rendered component.
+ */
+function ColorVariablesDemo(_ref) {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledDemo, {
+    color: color
+  }, "--color-".concat(color));
+}
+ColorVariablesDemo.propTypes = {
+  color: _propTypes.default.oneOf(_colorOptions.colorOptions).isRequired
+};
+var _default = exports.default = ColorVariablesDemo;

package/build/components/oa-component-demo-color-variables/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledDemo = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const StyledDemo = exports.StyledDemo = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: var(--color-", ");\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100px;\n  width: 450px;\n"])), props => props.color);

package/build/components/oa-component-demo-elevation/ElevationDemo.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ElevationDemo(_ref) {
+  let {
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.Container, {
+    className: className
+  }, className);
+}
+ElevationDemo.propTypes = {
+  className: _propTypes.default.oneOf(['elevation-white-1', 'elevation-above-white-1', 'elevation-white-2', 'elevation-above-white-2', 'elevation-white-3', 'elevation-dark-1', 'elevation-dark-2', 'elevation-dark-3']).isRequired
+};
+var _default = exports.default = ElevationDemo;

package/build/components/oa-component-demo-elevation/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 200px;\n  width: 200px;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));

package/build/components/oa-component-demo-spacing/SpacingScales.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = _interopRequireDefault(require("./styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// SpacingScales.js
+
+// Import the styled component
+
+function SpacingScales(_ref) {
+  let {
+    type
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.default, {
+    type: type
+  }, ' `', type, "`heading");
+}
+SpacingScales.propTypes = {
+  type: _propTypes.default.oneOf(['spacing-4', 'spacing-8', 'spacing-12', 'spacing-16', 'spacing-24', 'spacing-32', 'padding-top-4', 'padding-left-4', 'padding-right-4', 'padding-bottom-4', 'padding-top-8', 'padding-left-8', 'padding-right-8', 'padding-bottom-8', 'padding-top-12', 'padding-left-12', 'padding-right-12', 'padding-bottom-12', 'padding-top-16', 'padding-left-16', 'padding-right-16', 'padding-bottom-16', 'padding-top-24', 'padding-left-24', 'padding-right-24', 'padding-bottom-24', 'padding-top-32', 'padding-left-32', 'padding-right-32', 'padding-bottom-32', 'padding-top-40', 'padding-left-40', 'padding-right-40', 'padding-bottom-40', 'padding-top-48', 'padding-left-48', 'padding-right-48', 'padding-bottom-48', 'padding-top-56', 'padding-left-56', 'padding-right-56', 'padding-bottom-56', 'padding-top-64', 'padding-left-64', 'padding-right-64', 'padding-bottom-64', 'padding-top-72', 'padding-left-72', 'padding-right-72', 'padding-bottom-72', 'padding-top-80', 'padding-left-80', 'padding-right-80', 'padding-bottom-80', 'padding-top-96', 'padding-left-96', 'padding-right-96', 'padding-bottom-96', 'padding-top-108', 'padding-left-108', 'padding-right-108', 'padding-bottom-108', 'margin-top-4', 'margin-left-4', 'margin-right-4', 'margin-bottom-4', 'margin-top-8', 'margin-left-8', 'margin-right-8', 'margin-bottom-8', 'margin-top-12', 'margin-left-12', 'margin-right-12', 'margin-bottom-12', 'margin-top-16', 'margin-left-16', 'margin-right-16', 'margin-bottom-16', 'margin-top-24', 'margin-left-24', 'margin-right-24', 'margin-bottom-24', 'margin-top-32', 'margin-left-32', 'margin-right-32', 'margin-bottom-32', 'margin-top-40', 'margin-left-40', 'margin-right-40', 'margin-bottom-40', 'margin-top-48', 'margin-left-48', 'margin-right-48', 'margin-bottom-48', 'margin-top-56', 'margin-left-56', 'margin-right-56', 'margin-bottom-56', 'margin-top-64', 'margin-left-64', 'margin-right-64', 'margin-bottom-64', 'margin-top-72', 'margin-left-72', 'margin-right-72', 'margin-bottom-72', 'margin-top-80', 'margin-left-80', 'margin-right-80', 'margin-bottom-80', 'margin-top-96', 'margin-left-96', 'margin-right-96', 'margin-bottom-96', 'margin-top-108', 'margin-left-108', 'margin-right-108', 'margin-bottom-108']).isRequired
+};
+var _default = exports.default = SpacingScales;

package/build/components/oa-component-demo-spacing/styles.js

@@ -0,0 +1,259 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject; // SpacingScalesStyles.js
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const SpacingScalesContainer = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: pink;\n  ", ""])), _ref => {
+  let {
+    type
+  } = _ref;
+  switch (type) {
+    case 'spacing-4':
+      // padding specific for all sides
+      return 'padding: 4px;';
+    case 'spacing-8':
+      return 'padding: 8px;';
+    case 'spacing-12':
+      return 'padding: 12px;';
+    case 'spacing-16':
+      return 'padding: 16px;';
+    case 'spacing-24':
+      return 'padding: 24px;';
+    case 'spacing-32':
+      return 'padding: 32px;';
+    case 'padding-top-4':
+      // for padding specific
+      return 'padding-top: 4px;';
+    case 'padding-left-4':
+      return 'padding-left: 4px;';
+    case 'padding-right-4':
+      return 'padding-right: 4px;';
+    case 'padding-bottom-4':
+      return 'padding-bottom: 4px;';
+    case 'padding-top-8':
+      return 'padding-top: 8px;';
+    case 'padding-left-8':
+      return 'padding-left: 8px;';
+    case 'padding-right-8':
+      return 'padding-right: 8px;';
+    case 'padding-bottom-8':
+      return 'padding-bottom: 8px;';
+    case 'padding-top-12':
+      return 'padding-top: 12px;';
+    case 'padding-left-12':
+      return 'padding-left: 12px;';
+    case 'padding-right-12':
+      return 'padding-right: 12px;';
+    case 'padding-bottom-12':
+      return 'padding-bottom: 12px;';
+    case 'padding-top-16':
+      return 'padding-top: 16px;';
+    case 'padding-left-16':
+      return 'padding-left: 16px;';
+    case 'padding-right-16':
+      return 'padding-right: 16px;';
+    case 'padding-bottom-16':
+      return 'padding-bottom: 16px;';
+    case 'padding-top-24':
+      return 'padding-top: 24px;';
+    case 'padding-left-24':
+      return 'padding-left: 24px;';
+    case 'padding-right-24':
+      return 'padding-right: 24px;';
+    case 'padding-bottom-24':
+      return 'padding-bottom: 24px;';
+    case 'padding-top-32':
+      return 'padding-top: 32px;';
+    case 'padding-left-32':
+      return 'padding-left: 32px;';
+    case 'padding-right-32':
+      return 'padding-right: 32px;';
+    case 'padding-bottom-32':
+      return 'padding-bottom: 32px;';
+    case 'padding-top-40':
+      return 'padding-top: 40px;';
+    case 'padding-left-40':
+      return 'padding-left: 40px;';
+    case 'padding-right-40':
+      return 'padding-right: 40px;';
+    case 'padding-bottom-40':
+      return 'padding-bottom: 40px;';
+    case 'padding-top-48':
+      return 'padding-top: 48px;';
+    case 'padding-left-48':
+      return 'padding-left: 48px;';
+    case 'padding-right-48':
+      return 'padding-right: 48px;';
+    case 'padding-bottom-48':
+      return 'padding-bottom: 48px;';
+    case 'padding-top-56':
+      return 'padding-top: 56px;';
+    case 'padding-left-56':
+      return 'padding-left: 56px;';
+    case 'padding-right-56':
+      return 'padding-right: 56px;';
+    case 'padding-bottom-56':
+      return 'padding-bottom: 56px;';
+    case 'padding-top-64':
+      return 'padding-top: 64px;';
+    case 'padding-left-64':
+      return 'padding-left: 64px;';
+    case 'padding-right-64':
+      return 'padding-right: 64px;';
+    case 'padding-bottom-64':
+      return 'padding-bottom: 64px;';
+    case 'padding-top-72':
+      return 'padding-top: 72px;';
+    case 'padding-left-72':
+      return 'padding-left: 72px;';
+    case 'padding-right-72':
+      return 'padding-right: 72px;';
+    case 'padding-bottom-72':
+      return 'padding-bottom: 72px;';
+    case 'padding-top-80':
+      return 'padding-top: 80px;';
+    case 'padding-left-80':
+      return 'padding-left: 80px;';
+    case 'padding-right-80':
+      return 'padding-right: 80px;';
+    case 'padding-bottom-80':
+      return 'padding-bottom: 80px;';
+    case 'padding-top-96':
+      return 'padding-top: 96px;';
+    case 'padding-left-96':
+      return 'padding-left: 96px;';
+    case 'padding-right-96':
+      return 'padding-right: 96px;';
+    case 'padding-bottom-96':
+      return 'padding-bottom: 96px;';
+    case 'padding-top-108':
+      return 'padding-top: 108px;';
+    case 'padding-left-108':
+      return 'padding-left: 108px;';
+    case 'padding-right-108':
+      return 'padding-right: 108px;';
+    case 'padding-bottom-108':
+      return 'padding-bottom: 108px;';
+    case 'margin-top-4':
+      // for margin spacific
+      return 'margin-top: 4px;';
+    case 'margin-left-4':
+      return 'margin-left: 4px;';
+    case 'margin-right-4':
+      return 'margin-right: 4px;';
+    case 'margin-bottom-4':
+      return 'margin-bottom: 4px;';
+    case 'margin-top-8':
+      return 'margin-top: 8px;';
+    case 'margin-left-8':
+      return 'margin-left: 8px;';
+    case 'margin-right-8':
+      return 'margin-right: 8px;';
+    case 'margin-bottom-8':
+      return 'margin-bottom: 8px;';
+    case 'margin-top-12':
+      return 'margin-top: 12px;';
+    case 'margin-left-12':
+      return 'margin-left: 12px;';
+    case 'margin-right-12':
+      return 'margin-right: 12px;';
+    case 'margin-bottom-12':
+      return 'margin-bottom: 12px;';
+    case 'margin-top-16':
+      return 'margin-top: 16px;';
+    case 'margin-left-16':
+      return 'margin-left: 16px;';
+    case 'margin-right-16':
+      return 'margin-right: 16px;';
+    case 'margin-bottom-16':
+      return 'margin-bottom: 16px;';
+    case 'margin-top-24':
+      return 'margin-top: 24px;';
+    case 'margin-left-24':
+      return 'margin-left: 24px;';
+    case 'margin-right-24':
+      return 'margin-right: 24px;';
+    case 'margin-bottom-24':
+      return 'margin-bottom: 24px;';
+    case 'margin-top-32':
+      return 'margin-top: 32px;';
+    case 'margin-left-32':
+      return 'margin-left: 32px;';
+    case 'margin-right-32':
+      return 'margin-right: 32px;';
+    case 'margin-bottom-32':
+      return 'margin-bottom: 32px;';
+    case 'margin-top-40':
+      return 'margin-top: 40px;';
+    case 'margin-left-40':
+      return 'margin-left: 40px;';
+    case 'margin-right-40':
+      return 'margin-right: 40px;';
+    case 'margin-bottom-40':
+      return 'margin-bottom: 40px;';
+    case 'margin-top-48':
+      return 'margin-top: 48px;';
+    case 'margin-left-48':
+      return 'margin-left: 48px;';
+    case 'margin-right-48':
+      return 'margin-right: 48px;';
+    case 'margin-bottom-48':
+      return 'margin-bottom: 48px;';
+    case 'margin-top-56':
+      return 'margin-top: 56px;';
+    case 'margin-left-56':
+      return 'margin-left: 56px;';
+    case 'margin-right-56':
+      return 'margin-right: 56px;';
+    case 'margin-bottom-56':
+      return 'margin-bottom: 56px;';
+    case 'margin-top-64':
+      return 'margin-top: 64px;';
+    case 'margin-left-64':
+      return 'margin-left: 64px;';
+    case 'margin-right-64':
+      return 'margin-right: 64px;';
+    case 'margin-bottom-64':
+      return 'margin-bottom: 64px;';
+    case 'margin-top-72':
+      return 'margin-top: 72px;';
+    case 'margin-left-72':
+      return 'margin-left: 72px;';
+    case 'margin-right-72':
+      return 'margin-right: 72px;';
+    case 'margin-bottom-72':
+      return 'margin-bottom: 72px;';
+    case 'margin-top-80':
+      return 'margin-top: 80px;';
+    case 'margin-left-80':
+      return 'margin-left: 80px;';
+    case 'margin-right-80':
+      return 'margin-right: 80px;';
+    case 'margin-bottom-80':
+      return 'margin-bottom: 80px;';
+    case 'margin-top-96':
+      return 'margin-top: 96px;';
+    case 'margin-left-96':
+      return 'margin-left: 96px;';
+    case 'margin-right-96':
+      return 'margin-right: 96px;';
+    case 'margin-bottom-96':
+      return 'margin-bottom: 96px;';
+    case 'margin-top-108':
+      return 'margin-top: 108px;';
+    case 'margin-left-108':
+      return 'margin-left: 108px;';
+    case 'margin-right-108':
+      return 'margin-right: 108px;';
+    case 'margin-bottom-108':
+      return 'margin-bottom: 108px;';
+    default:
+      return 'padding: 0; margin: 0;';
+  }
+});
+var _default = exports.default = SpacingScalesContainer;