@pedidopago/ui 1.0.6

package/dist/components/Flex/flex.test.js

@@ -0,0 +1,241 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var setup = function setup(props, children) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props, children));
+  return utils;
+};
+
+describe('Flex', function () {
+  it('should it render the flex component', function () {
+    var _setup = setup({
+      direction: 'row'
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on direction prop', function () {
+    var _setup2 = setup({
+      direction: {
+        base: 'column',
+        sm: 'row',
+        md: 'row-reverse',
+        lg: 'column-reverse'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup2.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on alignItems prop', function () {
+    var _setup3 = setup({
+      alignItems: {
+        base: 'baseline',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup3.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on justifyContent prop', function () {
+    var _setup4 = setup({
+      justifyContent: {
+        base: 'space-between',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup4.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on alignContent prop', function () {
+    var _setup5 = setup({
+      alignContent: {
+        base: 'space-between',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup5.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on alignSelf prop', function () {
+    var _setup6 = setup({
+      alignSelf: {
+        base: 'baseline',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup6.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on justifySelf prop', function () {
+    var _setup7 = setup({
+      justifySelf: {
+        base: 'baseline',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup7.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on spacing prop', function () {
+    var _setup8 = setup({
+      spacing: {
+        base: 4,
+        sm: 8,
+        md: 12,
+        lg: 20
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup8.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on wrap prop', function () {
+    var _setup9 = setup({
+      wrap: {
+        base: 'wrap',
+        sm: 'wrap-reverse',
+        md: 'nowrap',
+        lg: 'wrap'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup9.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on grow prop', function () {
+    var _setup10 = setup({
+      grow: {
+        base: '1',
+        sm: '2',
+        md: '3',
+        lg: '4'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup10.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on shrink prop', function () {
+    var _setup11 = setup({
+      shrink: {
+        base: '1',
+        sm: '2',
+        md: '3',
+        lg: '4'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup11.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on basis prop', function () {
+    var _setup12 = setup({
+      basis: {
+        base: '100%',
+        sm: '100%',
+        md: '50%',
+        lg: '25%'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup12.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the flex component with breakpoints on all props', function () {
+    var _setup13 = setup({
+      direction: {
+        base: 'column',
+        sm: 'row',
+        md: 'row-reverse',
+        lg: 'column-reverse'
+      },
+      alignItems: {
+        base: 'baseline',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      },
+      justifyContent: {
+        base: 'space-between',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      },
+      alignContent: {
+        base: 'space-between',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      },
+      alignSelf: {
+        base: 'baseline',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      },
+      justifySelf: {
+        base: 'baseline',
+        sm: 'center',
+        md: 'flex-end',
+        lg: 'flex-start'
+      },
+      spacing: {
+        base: 4,
+        sm: 8,
+        md: 12,
+        lg: 20
+      },
+      wrap: {
+        base: 'wrap',
+        sm: 'wrap-reverse',
+        md: 'nowrap',
+        lg: 'wrap'
+      },
+      grow: {
+        base: '1',
+        sm: '2',
+        md: '3',
+        lg: '4'
+      },
+      shrink: {
+        base: '1',
+        sm: '2',
+        md: '3',
+        lg: '4'
+      },
+      basis: {
+        base: '100%',
+        sm: '100%',
+        md: '50%',
+        lg: '25%'
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "1"), /*#__PURE__*/React.createElement("div", null, "2"), /*#__PURE__*/React.createElement("div", null, "3"))),
+        container = _setup13.container;
+
+    expect(container).toBeInTheDocument();
+  });
+});

package/dist/components/Flex/index.d.ts

@@ -0,0 +1,5 @@
+import { FC, HTMLAttributes } from 'react';
+import { IFlexProps } from './types';
+declare const Flex: FC<HTMLAttributes<HTMLDivElement> & IFlexProps>;
+export default Flex;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Flex/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAiCzD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Flex/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styles = require("./styles");
+
+var _excluded = ["basis", "children", "direction", "grow", "alignItems", "alignContent", "justifyContent", "alignSelf", "justifySelf", "shrink", "spacing", "wrap"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _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; }
+
+var Flex = function Flex(_ref) {
+  var basis = _ref.basis,
+      children = _ref.children,
+      direction = _ref.direction,
+      grow = _ref.grow,
+      alignItems = _ref.alignItems,
+      alignContent = _ref.alignContent,
+      justifyContent = _ref.justifyContent,
+      alignSelf = _ref.alignSelf,
+      justifySelf = _ref.justifySelf,
+      shrink = _ref.shrink,
+      spacing = _ref.spacing,
+      wrap = _ref.wrap,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(_styles.StyledFlexContainer, _extends({
+    alignItems: alignItems,
+    alignSelf: alignSelf,
+    basis: basis,
+    flexDirection: direction,
+    grow: grow,
+    justifyContent: justifyContent,
+    justifySelf: justifySelf,
+    shrink: shrink,
+    spacing: spacing,
+    wrap: wrap,
+    alignContent: alignContent
+  }, rest), children);
+};
+
+var _default = Flex;
+exports.default = _default;

package/dist/components/Flex/styles.d.ts

@@ -0,0 +1,294 @@
+/// <reference types="react" />
+export declare const StyledFlexContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("./types").IFlexProps & {
+    theme?: {
+        fontSizes: {
+            xxxs: string;
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+            display: string;
+            giant: string;
+        };
+        fontWeight: {
+            normal: string;
+            bold: string;
+            '100': string;
+            '200': string;
+            '300': string;
+            '400': string;
+            '500': string;
+            '600': string;
+            '700': string;
+            '800': string;
+            '900': string;
+        };
+        breakpoints: {
+            base: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+        };
+        colors: {
+            body: {
+                light: string;
+                dark: string;
+            };
+            primary: {
+                alert: string;
+                disabled: string;
+                default: string;
+                hover: string;
+                focus: string;
+                transparent: string;
+            };
+            secondary: {
+                disabled: string;
+                default: string;
+                hover: string;
+                focus: string;
+            };
+            tertiary: {
+                disabled: string;
+                default: string;
+                hover: string;
+                focus: string;
+            };
+            neutral: {
+                white: string;
+                neutral1: string;
+                neutral2: string;
+                neutral3: string;
+                neutral4: string;
+                neutral5: string;
+                neutral6: string;
+                black: string;
+            };
+            background: {
+                linear1: string;
+                linear2: string;
+                linear3: string;
+                light: string;
+            };
+            informative: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            success: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            success_secondary: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            warning: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            warning_secondary: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            error: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+            critical: {
+                default: string;
+                blurred: string;
+                dark: string;
+                gradient: string;
+            };
+        };
+        space: {
+            px: string;
+            0.5: string;
+            1: string;
+            1.5: string;
+            2: string;
+            2.5: string;
+            3: string;
+            3.5: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            12: string;
+            14: string;
+            16: string;
+            20: string;
+            24: string;
+            28: string;
+            32: string;
+            36: string;
+            40: string;
+            44: string;
+            48: string;
+            52: string;
+            56: string;
+            60: string;
+            64: string;
+            72: string;
+            80: string;
+            96: string;
+            112: string;
+            128: string;
+        };
+        spacing: {
+            quarck: string;
+            nano: string;
+            xxxs: string;
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+            huge: string;
+            giant: string;
+            px: string;
+            0.5: string;
+            1: string;
+            1.5: string;
+            2: string;
+            2.5: string;
+            3: string;
+            3.5: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            12: string;
+            14: string;
+            16: string;
+            20: string;
+            24: string;
+            28: string;
+            32: string;
+            36: string;
+            40: string;
+            44: string;
+            48: string;
+            52: string;
+            56: string;
+            60: string;
+            64: string;
+            72: string;
+            80: string;
+            96: string;
+            112: string;
+            128: string;
+        };
+        spacingest: {
+            quarck: string;
+            nano: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            px: string;
+            0.5: string;
+            1: string;
+            1.5: string;
+            2: string;
+            2.5: string;
+            3: string;
+            3.5: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            12: string;
+            14: string;
+            16: string;
+            20: string;
+            24: string;
+            28: string;
+            32: string;
+            36: string;
+            40: string;
+            44: string;
+            48: string;
+            52: string;
+            56: string;
+            60: string;
+            64: string;
+            72: string;
+            80: string;
+            96: string;
+            112: string;
+            128: string;
+        };
+        borderRadius: {
+            default: string;
+        };
+        shadow: {
+            level1: string;
+            level2: string;
+            level3: string;
+        };
+        buttonSize: {
+            sm: string;
+            md: string;
+            xl: string;
+        };
+        transition: {
+            speed: string;
+        };
+        zIndex: {
+            default: string;
+            level1: string;
+            level2: string;
+            level3: string;
+            level4: string;
+            level6: string;
+            level8: string;
+            level12: string;
+            level16: string;
+            level24: string;
+            level48: string;
+        };
+    } | undefined;
+    flexDirection?: ("column" | "column-reverse" | "row" | "row-reverse") | {
+        base?: ("column" | "column-reverse" | "row" | "row-reverse") | undefined;
+        sm?: ("column" | "column-reverse" | "row" | "row-reverse") | undefined;
+        md?: ("column" | "column-reverse" | "row" | "row-reverse") | undefined;
+        lg?: ("column" | "column-reverse" | "row" | "row-reverse") | undefined;
+        xl?: ("column" | "column-reverse" | "row" | "row-reverse") | undefined;
+        xxl?: ("column" | "column-reverse" | "row" | "row-reverse") | undefined;
+    } | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Flex/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAyZ9B,CAAC"}

package/dist/components/Flex/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledFlexContainer = void 0;
+
+var _react = require("@emotion/react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledFlexContainer = _styled.default.div(function (props) {
+  var getSpacingOnTheme = function getSpacingOnTheme(property) {
+    var parseAllKeysToString = Object.keys(props.theme.space).map(function (key) {
+      return key.toString();
+    });
+
+    if (!parseAllKeysToString.includes((property === null || property === void 0 ? void 0 : property.toString()) || '')) {
+      return property || '';
+    }
+
+    return props.theme.space[property];
+  };
+
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    @media screen and (min-width: ", ") {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n\n    @media screen and (min-width: ", ") {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n\n    @media screen and (min-width: ", ") {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n\n    @media screen and (min-width: ", ") {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n\n    @media screen and (min-width: ", ") {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n  "])), typeof props.flexDirection === 'string' && "\n      flex-direction: ".concat(props.flexDirection, ";\n    "), _typeof(props.flexDirection) === 'object' && "\n      flex-direction: ".concat(props.flexDirection.base || '', ";\n    "), typeof props.alignItems === 'string' && "\n      align-items: ".concat(props.alignItems, ";\n    "), _typeof(props.alignItems) === 'object' && "\n      align-items: ".concat(props.alignItems.base || '', ";\n    "), typeof props.alignContent === 'string' && "\n      align-content: ".concat(props.alignContent, ";\n    "), _typeof(props.alignContent) === 'object' && "\n      align-content: ".concat(props.alignContent.base || '', ";\n    "), typeof props.alignSelf === 'string' && "\n      align-self: ".concat(props.alignSelf, ";\n    "), _typeof(props.alignSelf) === 'object' && "\n      align-self: ".concat(props.alignSelf.base || '', ";\n    "), typeof props.justifyContent === 'string' && "\n      justify-content: ".concat(props.justifyContent, ";\n    "), _typeof(props.justifyContent) === 'object' && "\n      justify-content: ".concat(props.justifyContent.base || '', ";\n    "), typeof props.justifySelf === 'string' && "\n      justify-self: ".concat(props.justifySelf, ";\n    "), _typeof(props.justifySelf) === 'object' && "\n      justify-self: ".concat(props.justifySelf.base || '', ";\n    "), typeof props.spacing === 'string' && "\n      gap: ".concat(getSpacingOnTheme(props.spacing), ";\n    "), _typeof(props.spacing) === 'object' && "\n      gap: ".concat(getSpacingOnTheme(props.spacing.base || ''), ";\n    "), typeof props.wrap === 'string' && "\n      flex-wrap: ".concat(props.wrap, ";\n    "), _typeof(props.wrap) === 'object' && "\n      flex-wrap: ".concat(props.wrap.base || '', ";\n    "), typeof props.grow === 'string' && "\n      flex-grow: ".concat(props.grow, ";\n    "), _typeof(props.grow) === 'object' && "\n      flex-grow: ".concat(props.grow.base || '', ";\n    "), typeof props.shrink === 'string' && "\n      flex-shrink: ".concat(props.shrink, ";\n    "), _typeof(props.shrink) === 'object' && "\n      flex-shrink: ".concat(props.shrink.base || '', ";\n    "), typeof props.basis === 'string' && "\n      flex-basis: ".concat(props.basis, ";\n    "), _typeof(props.basis) === 'object' && "\n      flex-basis: ".concat(props.basis.base || '', ";\n    "), props.theme.breakpoints.sm, _typeof(props.flexDirection) === 'object' && "\n        flex-direction: ".concat(props.flexDirection.sm || '', ";\n      "), _typeof(props.alignItems) === 'object' && "\n        align-items: ".concat(props.alignItems.sm || '', ";\n      "), _typeof(props.alignContent) === 'object' && "\n        align-content: ".concat(props.alignContent.sm || '', ";\n      "), _typeof(props.alignSelf) === 'object' && "\n        align-self: ".concat(props.alignSelf.sm || '', ";\n      "), _typeof(props.justifyContent) === 'object' && "\n        justify-content: ".concat(props.justifyContent.sm || '', ";\n      "), _typeof(props.justifySelf) === 'object' && "\n        justify-self: ".concat(props.justifySelf.sm || '', ";\n      "), _typeof(props.spacing) === 'object' && "\n        gap: ".concat(getSpacingOnTheme(props.spacing.sm || '' || ''), ";\n      "), _typeof(props.wrap) === 'object' && "\n        flex-wrap: ".concat(props.wrap.sm || '', ";\n      "), _typeof(props.grow) === 'object' && "\n        flex-grow: ".concat(props.grow.sm || '', ";\n      "), _typeof(props.shrink) === 'object' && "\n        flex-shrink: ".concat(props.shrink.sm || '', ";\n      "), _typeof(props.basis) === 'object' && "\n        flex-basis: ".concat(props.basis.sm || '', ";\n      "), props.theme.breakpoints.md, _typeof(props.flexDirection) === 'object' && "\n        flex-direction: ".concat(props.flexDirection.md || '' || '', ";\n      "), _typeof(props.alignItems) === 'object' && "\n        align-items: ".concat(props.alignItems.md || '', ";\n      "), _typeof(props.alignContent) === 'object' && "\n        align-content: ".concat(props.alignContent.md || '', ";\n      "), _typeof(props.alignSelf) === 'object' && "\n        align-self: ".concat(props.alignSelf.md || '', ";\n      "), _typeof(props.justifyContent) === 'object' && "\n        justify-content: ".concat(props.justifyContent.md || '', ";\n      "), _typeof(props.justifySelf) === 'object' && "\n        justify-self: ".concat(props.justifySelf.md || '', ";\n      "), _typeof(props.spacing) === 'object' && "\n        gap: ".concat(getSpacingOnTheme(props.spacing.md || ''), ";\n      "), _typeof(props.wrap) === 'object' && "\n        flex-wrap: ".concat(props.wrap.md || '', ";\n      "), _typeof(props.grow) === 'object' && "\n        flex-grow: ".concat(props.grow.md || '', ";\n      "), _typeof(props.shrink) === 'object' && "\n        flex-shrink: ".concat(props.shrink.md || '', ";\n      "), _typeof(props.basis) === 'object' && "\n        flex-basis: ".concat(props.basis.md || '', ";\n      "), props.theme.breakpoints.lg, _typeof(props.flexDirection) === 'object' && "\n        flex-direction: ".concat(props.flexDirection.lg || '', ";\n      "), _typeof(props.alignItems) === 'object' && "\n        align-items: ".concat(props.alignItems.lg || '', ";\n      "), _typeof(props.alignContent) === 'object' && "\n        align-content: ".concat(props.alignContent.lg || '', ";\n      "), _typeof(props.alignSelf) === 'object' && "\n        align-self: ".concat(props.alignSelf.lg || '', ";\n      "), _typeof(props.justifyContent) === 'object' && "\n        justify-content: ".concat(props.justifyContent.lg || '', ";\n      "), _typeof(props.justifySelf) === 'object' && "\n        justify-self: ".concat(props.justifySelf.lg || '', ";\n      "), _typeof(props.spacing) === 'object' && "\n        gap: ".concat(getSpacingOnTheme(props.spacing.lg || ''), ";\n      "), _typeof(props.wrap) === 'object' && "\n        flex-wrap: ".concat(props.wrap.lg || '', ";\n      "), _typeof(props.grow) === 'object' && "\n        flex-grow: ".concat(props.grow.lg || '', ";\n      "), _typeof(props.shrink) === 'object' && "\n        flex-shrink: ".concat(props.shrink.lg || '', ";\n      "), _typeof(props.basis) === 'object' && "\n        flex-basis: ".concat(props.basis.lg || '', ";\n      "), props.theme.breakpoints.xl, _typeof(props.flexDirection) === 'object' && "\n        flex-direction: ".concat(props.flexDirection.xl || '', ";\n      "), _typeof(props.alignItems) === 'object' && "\n        align-items: ".concat(props.alignItems.xl || '', ";\n      "), _typeof(props.alignContent) === 'object' && "\n        align-content: ".concat(props.alignContent.xl || '', ";\n      "), _typeof(props.alignSelf) === 'object' && "\n        align-self: ".concat(props.alignSelf.xl || '', ";\n      "), _typeof(props.justifyContent) === 'object' && "\n        justify-content: ".concat(props.justifyContent.xl || '', ";\n      "), _typeof(props.justifySelf) === 'object' && "\n        justify-self: ".concat(props.justifySelf.xl || '', ";\n      "), _typeof(props.spacing) === 'object' && "\n        gap: ".concat(getSpacingOnTheme(props.spacing.xl || ''), ";\n      "), _typeof(props.wrap) === 'object' && "\n        flex-wrap: ".concat(props.wrap.xl || '', ";\n      "), _typeof(props.grow) === 'object' && "\n        flex-grow: ".concat(props.grow.xl || '', ";\n      "), _typeof(props.shrink) === 'object' && "\n        flex-shrink: ".concat(props.shrink.xl || '', ";\n      "), _typeof(props.basis) === 'object' && "\n        flex-basis: ".concat(props.basis.xl || '', ";\n      "), props.theme.breakpoints.xxl, _typeof(props.flexDirection) === 'object' && "\n        flex-direction: ".concat(props.flexDirection.xxl || '', ";\n      "), _typeof(props.alignItems) === 'object' && "\n        align-items: ".concat(props.alignItems.xxl || '', ";\n      "), _typeof(props.alignContent) === 'object' && "\n        align-content: ".concat(props.alignContent.xxl || '', ";\n      "), _typeof(props.alignSelf) === 'object' && "\n        align-self: ".concat(props.alignSelf.xxl || '', ";\n      "), _typeof(props.justifyContent) === 'object' && "\n        justify-content: ".concat(props.justifyContent.xxl || '', ";\n      "), _typeof(props.justifySelf) === 'object' && "\n        justify-self: ".concat(props.justifySelf.xxl || '', ";\n      "), _typeof(props.spacing) === 'object' && "\n        gap: ".concat(getSpacingOnTheme(props.spacing.xxl || ''), ";\n      "), _typeof(props.wrap) === 'object' && "\n        flex-wrap: ".concat(props.wrap.xxl || '', ";\n      "), _typeof(props.grow) === 'object' && "\n        flex-grow: ".concat(props.grow.xxl || '', ";\n      "), _typeof(props.shrink) === 'object' && "\n        flex-shrink: ".concat(props.shrink.xxl || '', ";\n      "), _typeof(props.basis) === 'object' && "\n        flex-basis: ".concat(props.basis.xxl || '', ";\n      "));
+});
+
+exports.StyledFlexContainer = StyledFlexContainer;