@dxc-technology/halstack-react 0.0.0-d3df47e → 0.0.0-d484e4c

package/heading/Heading.test.js

@@ -1,169 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _Heading = _interopRequireDefault(require("./Heading.tsx"));
-describe("Heading component tests", function () {
-  test("Heading renders with default level", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test"
-      })),
-      getByText = _render.getByText,
-      getByRole = _render.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 1
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 1", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 1
-      })),
-      getByText = _render2.getByText,
-      getByRole = _render2.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 1
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 2", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 2
-      })),
-      getByText = _render3.getByText,
-      getByRole = _render3.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 2
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 3", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 3
-      })),
-      getByText = _render4.getByText,
-      getByRole = _render4.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 3
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 4", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 4
-      })),
-      getByText = _render5.getByText,
-      getByRole = _render5.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 4
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 5", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 5
-      })),
-      getByText = _render6.getByText,
-      getByRole = _render6.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 5
-    })).toBeTruthy();
-  });
-  test("Heading renders with default level and as h5", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        as: "h5"
-      })),
-      getByText = _render7.getByText,
-      getByRole = _render7.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 5
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 1 and as h5", function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 1,
-        as: "h5"
-      })),
-      getByText = _render8.getByText,
-      getByRole = _render8.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 5
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 2 and as h4", function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 2,
-        as: "h4"
-      })),
-      getByText = _render9.getByText,
-      getByRole = _render9.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 4
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 3 and as h2", function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 3,
-        as: "h2"
-      })),
-      getByText = _render10.getByText,
-      getByRole = _render10.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 2
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 4 and as h3", function () {
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 4,
-        as: "h3"
-      })),
-      getByText = _render11.getByText,
-      getByRole = _render11.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 3
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 5 as h4", function () {
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 5,
-        as: "h4"
-      })),
-      getByText = _render12.getByText,
-      getByRole = _render12.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 4
-    })).toBeTruthy();
-  });
-  test("Heading renders with level 5 and invalid as", function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 5,
-        as: "h4afdssf"
-      })),
-      getByText = _render13.getByText,
-      getByRole = _render13.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 5
-    })).toBeTruthy();
-  });
-});

package/heading/types.d.ts

@@ -1,33 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-type Props = {
-    /**
-     * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
-     * The html tag of the heading will be the one specified in the 'as' prop.
-     * If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop.
-     */
-    level?: 1 | 2 | 3 | 4 | 5;
-    /**
-     * Heading text.
-     */
-    text: string;
-    /**
-     * Modifies the default weight of the heading.
-     */
-    weight?: "light" | "normal" | "bold";
-    /**
-     * Specifies the HTML tag of the heading.
-     */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5";
-    /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-     */
-    margin?: Space | Margin;
-};
-export default Props;

package/heading/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/image/Image.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import ImagePropsType from "./types";
-declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: ImagePropsType) => React.JSX.Element;
-export default DxcImage;

package/image/Image.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _useTheme = _interopRequireDefault(require("../useTheme"));
-var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
-var _templateObject;
-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; }
-var CaptionWrapper = function CaptionWrapper(_ref) {
-  var condition = _ref.condition,
-    wrapper = _ref.wrapper,
-    children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, condition ? wrapper(children) : children);
-};
-var DxcImage = function DxcImage(_ref2) {
-  var alt = _ref2.alt,
-    caption = _ref2.caption,
-    _ref2$lazyLoading = _ref2.lazyLoading,
-    lazyLoading = _ref2$lazyLoading === void 0 ? false : _ref2$lazyLoading,
-    src = _ref2.src,
-    srcSet = _ref2.srcSet,
-    sizes = _ref2.sizes,
-    width = _ref2.width,
-    height = _ref2.height,
-    objectFit = _ref2.objectFit,
-    objectPosition = _ref2.objectPosition,
-    onLoad = _ref2.onLoad,
-    onError = _ref2.onError;
-  var colorsTheme = (0, _useTheme["default"])();
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.image
-  }, /*#__PURE__*/_react["default"].createElement(CaptionWrapper, {
-    condition: caption != undefined,
-    wrapper: function wrapper(children) {
-      return /*#__PURE__*/_react["default"].createElement(Figure, null, children, /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
-        as: "figcaption",
-        color: colorsTheme.image.captionFontColor,
-        fontFamily: colorsTheme.image.captionFontFamily,
-        fontSize: colorsTheme.image.captionFontSize,
-        fontStyle: colorsTheme.image.captionFontStyle,
-        fontWeight: colorsTheme.image.captionFontWeight,
-        lineHeight: colorsTheme.image.captionLineHeight
-      }, caption));
-    }
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    alt: alt,
-    loading: lazyLoading ? "lazy" : undefined,
-    onLoad: onLoad,
-    onError: onError,
-    src: src,
-    srcSet: srcSet,
-    sizes: sizes,
-    style: {
-      objectFit: objectFit,
-      objectPosition: objectPosition,
-      width: width,
-      height: height
-    }
-  })));
-};
-var Figure = _styledComponents["default"].figure(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n"])));
-var _default = exports["default"] = DxcImage;

package/image/Image.stories.tsx

@@ -1,127 +0,0 @@
-import React from "react";
-import DxcImage from "./Image";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { DxcFlex, DxcInset, DxcParagraph } from "../main";
-
-export default {
-  title: "Image",
-  component: DxcImage,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Image component" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Simple image" theme="light" level={4} />
-      <DxcImage
-        alt="Example image"
-        width="100%"
-        src="https://images.ctfassets.net/hrltx12pl8hq/5596z2BCR9KmT1KeRBrOQa/4070fd4e2f1a13f71c2c46afeb18e41c/shutterstock_451077043-hero1.jpg"
-      />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Image with text" theme="light" level={4} />
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
-        arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
-        lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh tristique
-        porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue diam in dui
-        morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo nisi. Vel mus
-        ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit augue. In fermentum
-        metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae. Commodo sagittis
-        volutpat id lorem.
-      </DxcParagraph>
-      <DxcInset top="2rem" bottom="2rem">
-        <DxcImage
-          alt="Ratatouille is a great movie"
-          caption="Ratatouille with a smile on his face."
-          src="https://hips.hearstapps.com/es.h-cdn.co/fotoes/images/cinefilia/por-que-ratatouille-nos-sigue-enamorando-10-anos-despues/136444706-1-esl-ES/Por-que-Ratatouille-nos-sigue-enamorando-10-anos-despues.jpg"
-        />
-      </DxcInset>
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
-        arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
-        lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh tristique
-        porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue diam in dui
-        morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo nisi. Vel mus
-        ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit augue. In fermentum
-        metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae. Commodo sagittis
-        volutpat id lorem.
-      </DxcParagraph>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Example image" theme="light" level={4} />
-      <DxcFlex gap="1rem">
-        <DxcImage
-          alt="Camera pic"
-          caption="Picture of a camera and the sunset."
-          width="500px"
-          src="https://assets.entrepreneur.com/content/3x2/2000/20191009140007-GettyImages-1053962188.jpeg"
-        />
-        <DxcParagraph>
-          Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
-          arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
-          lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh
-          tristique porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue
-          diam in dui morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo
-          nisi. Vel mus ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit
-          augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae.
-          Commodo sagittis volutpat id lorem. Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis
-          volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor.
-          Lectus eget cursus ut ac pharetra lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus
-          vitae vitae aenean arcu. Nibh tristique porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh
-          est sed. Netus venenatis congue diam in dui morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu
-          nec fringilla enim purus ut justo nisi. Vel mus ut ornare faucibus blandit diam sit vestibulum massa. Semper
-          nullam sit sagittis hendrerit augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed
-          enim in sed vel nec ut vitae. Commodo sagittis volutpat id lorem.
-        </DxcParagraph>
-      </DxcFlex>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Object position" theme="light" level={4} />
-      <DxcImage
-        alt="Moon pic"
-        caption="Picture of the moon."
-        width="250px"
-        src="https://interactive-examples.mdn.mozilla.net/media/examples/moon.jpg"
-        objectPosition="right top"
-        objectFit="none"
-      />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Object fit: contain" theme="light" level={4} />
-      <div style={{ display: "flex", width: "fit-content", border: "1px solid #000", padding: "0.5rem" }}>
-        <DxcImage
-          alt="Dog pic"
-          src="https://cc-prod.scene7.com/is/image/CCProdAuthor/What-is-Stock-Photography_P1_mobile?$pjpeg$&jpegSize=200&wid=720"
-          width="200px"
-          height="200px"
-          objectFit="contain"
-          caption="Pretty dog."
-        />
-      </div>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Object fit: cover" theme="light" level={4} />
-      <div style={{ width: "75%", height: "300px" }}>
-        <DxcImage
-          alt="Spaceship pic"
-          src="https://media.istockphoto.com/id/1344443930/es/foto/lanzamiento-de-cohetes-del-transbordador-espacial-en-el-cielo-y-nubes-al-espacio-exterior.jpg?s=612x612&w=0&k=20&c=CO2A96GnnWvJsgZuj9WfYCVIBVzicnQDfnzwD1nomN0="
-          objectFit="cover"
-          width="50%"
-          height="100%"
-          objectPosition="0px 0px"
-        />
-        <DxcImage
-          alt="Spaceship pic"
-          src="https://media.istockphoto.com/id/1344443930/es/foto/lanzamiento-de-cohetes-del-transbordador-espacial-en-el-cielo-y-nubes-al-espacio-exterior.jpg?s=612x612&w=0&k=20&c=CO2A96GnnWvJsgZuj9WfYCVIBVzicnQDfnzwD1nomN0="
-          objectFit="cover"
-          width="50%"
-          height="100%"
-          objectPosition="0px 0px"
-        />
-      </div>
-    </ExampleContainer>
-  </>
-);

package/image/types.d.ts

@@ -1,72 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    /**
-     * Alternative text description displayed when the specified image is not loaded.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt
-     * See W3C alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
-     */
-    alt: string;
-    /**
-     * Image legend with a descriptive purpose. It is placed below the image and is complementary to the alt attribute,
-     * which is required regardless of the presence of the caption or not.
-     */
-    caption?: string;
-    /**
-     * If true, the image will be loaded only when it is visible on the screen (lazy loading).
-     * Otherwise and by default, the image will be loaded as soon as the component is mounted (eager loading).
-     */
-    lazyLoading?: boolean;
-    /**
-     * URL of the image. This prop is required and must be valid.
-     */
-    src: string;
-    /**
-     * List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
-     */
-    srcSet?: string;
-    /**
-     * One or more strings separated by commas, indicating a set of source sizes.
-     * If the srcSet attribute is absent or contains no values with a width descriptor,
-     * then this attribute has no effect.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
-     */
-    sizes?: string;
-    /**
-     * Sets the rendered width of the image.
-     */
-    width?: string;
-    /**
-     * Sets the rendered height of the image.
-     */
-    height?: string;
-    /**
-     * Sets the object-fit CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
-     */
-    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
-    /**
-     * Sets the object-position CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
-     */
-    objectPosition?: string;
-    /**
-     * This function will be called when the image is loaded.
-     */
-    onLoad?: React.ReactEventHandler<HTMLImageElement>;
-    /**
-     * This function will be called when the image fails to load.
-     */
-    onError?: React.ReactEventHandler<HTMLImageElement>;
-};
-export type CaptionWrapperProps = {
-    condition: boolean;
-    wrapper: (children: React.ReactNode) => JSX.Element;
-    children: React.ReactNode;
-};
-export default Props;

package/image/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/inset/Inset.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import InsetPropsType from "./types";
-export default function Inset({ space, horizontal, vertical, top, right, bottom, left, children, }: InsetPropsType): JSX.Element;

package/inset/Inset.js

@@ -1,43 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = Inset;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-function Inset(_ref) {
-  var space = _ref.space,
-    horizontal = _ref.horizontal,
-    vertical = _ref.vertical,
-    top = _ref.top,
-    right = _ref.right,
-    bottom = _ref.bottom,
-    left = _ref.left,
-    children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(StyledInset, {
-    space: space,
-    horizontal: horizontal,
-    vertical: vertical,
-    top: top,
-    right: right,
-    bottom: bottom,
-    left: left
-  }, children);
-}
-function getSpacingValue(spacingName) {
-  return spacingName ? spacingName : "0rem";
-}
-var StyledInset = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref2) {
-  var space = _ref2.space,
-    horizontal = _ref2.horizontal,
-    vertical = _ref2.vertical,
-    top = _ref2.top,
-    right = _ref2.right,
-    bottom = _ref2.bottom,
-    left = _ref2.left;
-  return "\n  padding: ".concat(getSpacingValue(top || vertical || space), " ").concat(getSpacingValue(right || horizontal || space), "\n    ").concat(getSpacingValue(bottom || vertical || space), " ").concat(getSpacingValue(left || horizontal || space), ";\n");
-});