@dxc-technology/halstack-react 0.0.0-c2834c3 → 0.0.0-c291a0c

package/card/Card.js

@@ -25,7 +25,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _Box = _interopRequireDefault(require("../box/Box"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,17 +64,6 @@ var DxcCard = function DxcCard(_ref) {
     src: imageSrc
   }));
 
-  var tagContent = /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    shadowDepth: !outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
-  }, /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.card
-  }, /*#__PURE__*/_react["default"].createElement(CardContainer, {
-    hasAction: onClick || linkHref,
-    imagePosition: imagePosition
-  }, imageSrc && imagePosition === "before" && imageComponent, /*#__PURE__*/_react["default"].createElement(CardContent, {
-    contentPadding: contentPadding
-  }, children), imageSrc && imagePosition === "after" && imageComponent)));
-
   return /*#__PURE__*/_react["default"].createElement(StyledDxcCard, {
     margin: margin,
     onMouseEnter: function onMouseEnter() {
@@ -84,15 +73,23 @@ var DxcCard = function DxcCard(_ref) {
       return changeIsHovered(false);
     },
     onClick: onClick,
-    hasAction: onClick,
-    tabIndex: typeof onClick === "function" && !linkHref ? tabIndex : -1
-  }, linkHref && /*#__PURE__*/_react["default"].createElement(StyledLink, {
-    tabIndex: tabIndex,
+    hasAction: onClick || linkHref,
+    tabIndex: onClick || linkHref ? tabIndex : -1,
+    as: linkHref && "a",
     href: linkHref
-  }, tagContent) || tagContent);
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    shadowDepth: !outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
+  }, /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.card
+  }, /*#__PURE__*/_react["default"].createElement(CardContainer, {
+    hasAction: onClick || linkHref,
+    imagePosition: imagePosition
+  }, imageSrc && imagePosition === "before" && imageComponent, /*#__PURE__*/_react["default"].createElement(CardContent, {
+    contentPadding: contentPadding
+  }, children), imageSrc && imagePosition === "after" && imageComponent))));
 };
 
-var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n  outline: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  :focus {\n    outline: #0095ff auto 1px;\n  }\n"])), function (_ref2) {
+var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n  outline: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  text-decoration: none;\n\n  ", "\n"])), function (_ref2) {
   var hasAction = _ref2.hasAction;
   return hasAction && "pointer" || "unset";
 }, function (_ref3) {
@@ -113,49 +110,50 @@ var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templa
 }, function (_ref8) {
   var margin = _ref8.margin;
   return margin && margin.left ? _variables.spaces[margin.left] : "";
+}, function (_ref9) {
+  var hasAction = _ref9.hasAction;
+  return hasAction && ":focus {\n    outline: #0095ff auto 1px;\n  }";
 });
 
 var CardContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  height: ", ";\n  width: ", ";\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (props) {
   return props.theme.height;
 }, function (props) {
   return props.theme.width;
-}, function (_ref9) {
-  var hasAction = _ref9.hasAction;
+}, function (_ref10) {
+  var hasAction = _ref10.hasAction;
   return hasAction ? "" : "unset";
 });
 
-var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  text-decoration: none;\n\n  :focus {\n    outline-color: #0095ff;\n  }\n"])));
-
-var TagImage = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  object-fit: ", ";\n"])), function (_ref10) {
-  var imagePadding = _ref10.imagePadding;
-  return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
-}, function (_ref11) {
+var TagImage = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  object-fit: ", ";\n"])), function (_ref11) {
   var imagePadding = _ref11.imagePadding;
   return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
 }, function (_ref12) {
-  var cover = _ref12.cover;
+  var imagePadding = _ref12.imagePadding;
+  return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
+}, function (_ref13) {
+  var cover = _ref13.cover;
   return cover ? "cover" : "contain";
 });
 
-var ImageContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 35%;\n  height: 100%;\n  flex-shrink: 0;\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n"])), function (_ref13) {
-  var imageBgColor = _ref13.imageBgColor;
+var ImageContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 35%;\n  height: 100%;\n  flex-shrink: 0;\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n"])), function (_ref14) {
+  var imageBgColor = _ref14.imageBgColor;
   return imageBgColor;
 });
 
-var CardContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  overflow: hidden;\n"])), function (_ref14) {
-  var contentPadding = _ref14.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) !== "object" ? _variables.spaces[contentPadding] : "0px";
-}, function (_ref15) {
+var CardContent = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  overflow: hidden;\n"])), function (_ref15) {
   var contentPadding = _ref15.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.top ? _variables.spaces[contentPadding.top] : "";
+  return contentPadding && (0, _typeof2["default"])(contentPadding) !== "object" ? _variables.spaces[contentPadding] : "0px";
 }, function (_ref16) {
   var contentPadding = _ref16.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.right ? _variables.spaces[contentPadding.right] : "";
+  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.top ? _variables.spaces[contentPadding.top] : "";
 }, function (_ref17) {
   var contentPadding = _ref17.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.bottom ? _variables.spaces[contentPadding.bottom] : "";
+  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.right ? _variables.spaces[contentPadding.right] : "";
 }, function (_ref18) {
   var contentPadding = _ref18.contentPadding;
+  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.bottom ? _variables.spaces[contentPadding.bottom] : "";
+}, function (_ref19) {
+  var contentPadding = _ref19.contentPadding;
   return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.left ? _variables.spaces[contentPadding.left] : "";
 });
 

package/common/variables.js

@@ -800,24 +800,6 @@ var componentTokens = {
     fontStyle: globalTokens.type_normal,
     fontWeight: globalTokens.type_regular
   },
-  radio: {
-    circleLabelSpacing: "10px",
-    circleSize: "24px",
-    color: globalTokens.black,
-    colorOnDark: globalTokens.white,
-    disabledColor: globalTokens.lighterBlack,
-    disabledColorOnDark: "#575757",
-    disabledFontColor: globalTokens.lighterBlack,
-    disabledFontColorOnDark: "#575757",
-    focusColor: globalTokens.hal_blue_l_50,
-    focusColorOnDark: "#1682FF",
-    fontColor: globalTokens.inherit,
-    fontColorOnDark: globalTokens.white,
-    fontFamily: globalTokens.type_sans,
-    fontSize: globalTokens.type_scale_root,
-    fontStyle: globalTokens.type_normal,
-    fontWeight: globalTokens.type_regular
-  },
   radioGroup: {
     fontFamily: globalTokens.type_sans,
     radioInputColor: globalTokens.hal_blue_l_45,
@@ -1168,6 +1150,7 @@ var componentTokens = {
     disabledFontColor: "#999999",
     disabledIconColor: "#999999",
     disabledFontStyle: globalTokens.type_normal,
+    disabledBadgeBackgroundColor: "#0000004D",
     hoverBackgroundColor: "#f2eafa",
     pressedBackgroundColor: "#e5d5f6",
     pressedFontWeight: globalTokens.type_semibold,
@@ -1479,6 +1462,9 @@ var defaultTranslatedComponentLabels = {
     daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
     monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+  },
+  applicationLayout: {
+    visibilityToggleTitle: "Toggle visibility sidenav"
   }
 };
 exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;

package/footer/Icons.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   id: "g10",
   xmlns: "http://www.w3.org/2000/svg",
-  width: "280.781",
+  width: "100%",
   height: "32",
   viewBox: "0 0 280.781 32"
 }, /*#__PURE__*/_react["default"].createElement("title", null, "DXC Logo"), /*#__PURE__*/_react["default"].createElement("g", {

package/inline/Inline.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import InlineProps from "./types";
+declare const DxcInline: ({ alignX, alignY, as, divider, gutter, reverse, children, }: InlineProps) => JSX.Element;
+export default DxcInline;

package/inline/Inline.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var DxcInline = function DxcInline(_ref) {
+  var _ref$alignX = _ref.alignX,
+      alignX = _ref$alignX === void 0 ? "start" : _ref$alignX,
+      _ref$alignY = _ref.alignY,
+      alignY = _ref$alignY === void 0 ? "stretch" : _ref$alignY,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "div" : _ref$as,
+      _ref$divider = _ref.divider,
+      divider = _ref$divider === void 0 ? false : _ref$divider,
+      _ref$gutter = _ref.gutter,
+      gutter = _ref$gutter === void 0 ? "0rem" : _ref$gutter,
+      _ref$reverse = _ref.reverse,
+      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(Inline, {
+    as: as,
+    alignX: alignX,
+    alignY: alignY,
+    gutter: gutter,
+    reverse: reverse
+  }, _react["default"].Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
+  }));
+};
+
+var Inline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n  flex-wrap: wrap;\n"])), function (_ref2) {
+  var alignX = _ref2.alignX,
+      alignY = _ref2.alignY,
+      gutter = _ref2.gutter,
+      reverse = _ref2.reverse;
+  return "\n    flex-direction: ".concat(reverse ? "row-reverse" : "row", ";\n    align-items: ").concat(alignY === "start" || alignY === "end" ? "flex-".concat(alignY) : alignY, ";\n    justify-content: ").concat(alignX === "start" || alignX === "end" ? "flex-".concat(alignX) : alignX, ";\n    gap: ").concat(gutter, ";\n  ");
+});
+
+var Divider = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 1px;\n  background-color: #999999;\n"])));
+
+var _default = DxcInline;
+exports["default"] = _default;

package/inline/Inline.stories.tsx

@@ -0,0 +1,264 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import styled from "styled-components";
+import DxcInline from "./Inline";
+
+export default {
+  title: "Inline",
+  component: DxcInline,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" theme="light" level={4} />
+    <Container>
+      <DxcInline>
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="Default with divider" theme="light" level={4} />
+    <Container>
+      <DxcInline divider>
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="medium" width="small" />
+      </DxcInline>
+    </Container>
+    <Title title="One child larger than flex container" theme="light" level={4} />
+    <FlexContainer customWidth>
+      <DxcInline>
+        <Placeholder height="large" width="xlarge" />
+      </DxcInline>
+    </FlexContainer>
+    <Title title="Wrap" theme="light" level={4} />
+    <Container customWidth>
+      <DxcInline>
+        <Placeholder height="large" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
+        <Placeholder height="large" width="medium" />
+      </DxcInline>
+    </Container>
+    <Title title="AlignY = start" theme="light" level={4} />
+    <Container>
+      <DxcInline alignY="stretch">
+        <Placeholder width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="AlignY = end" theme="light" level={4} />
+    <Container>
+      <DxcInline alignY="end">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="AlignY = center" theme="light" level={4} />
+    <Container>
+      <DxcInline alignY="center">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="AlignY with wrapped items" theme="light" level={4} />
+    <Container customWidth>
+      <DxcInline alignY="end">
+        <Placeholder height="large" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
+        <Placeholder height="small" width="medium" />
+      </DxcInline>
+    </Container>
+    <Title title="AlignY = baseline" theme="light" level={4} />
+    <Container>
+      <DxcInline alignY="baseline">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="AlignX = start" theme="light" level={4} />
+    <Container>
+      <DxcInline alignX="start">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" />
+      </DxcInline>
+    </Container>
+    <Title title="AlignX = end" theme="light" level={4} />
+    <Container>
+      <DxcInline alignX="end">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="AlignX = center" theme="light" level={4} />
+    <Container>
+      <DxcInline alignX="center">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="AlignX with wrapped items" theme="light" level={4} />
+    <Container customWidth>
+      <DxcInline alignX="center">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="medium" width="small" />
+        <Placeholder height="small" width="large" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="large" width="medium" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 0.125rem" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="0.125rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 0.25rem" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="0.25rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 0.5rem" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="0.5rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 0.75rem" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="0.75rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 1rem" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="1rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 1.5rem" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="1.5rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 2rem and divider" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="2rem" divider>
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 3rem" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="3rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 4rem" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="4rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+      </DxcInline>
+    </Container>
+    <Title title="Gutter = 5rem" theme="light" level={4} />
+    <Container>
+      <DxcInline gutter="5rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+      </DxcInline>
+    </Container>
+    <Title title="Reverse" theme="light" level={4} />
+    <Container>
+      <DxcInline reverse>
+        <Placeholder height="small" width="small">
+          1
+        </Placeholder>
+        <Placeholder height="medium" width="medium">
+          2
+        </Placeholder>
+        <Placeholder height="large" width="large">
+          3
+        </Placeholder>
+        <Placeholder height="small" width="large">
+          4
+        </Placeholder>
+      </DxcInline>
+    </Container>
+  </>
+);
+
+const FlexContainer = styled.div<{ customWidth?: boolean }>`
+  display: flex;
+  ${({ customWidth }) => customWidth && `width: 200px;`};
+  background: #f2eafa;
+`;
+
+const Container = styled.div<{ customWidth?: boolean }>`
+  background: #f2eafa;
+  ${({ customWidth }) => customWidth && `width: 300px;`};
+`;
+
+type PlaceholderProps = {
+  width?: "xlarge" | "large" | "medium" | "small" | "auto";
+  height?: "large" | "medium" | "small" | "auto";
+};
+
+const Placeholder = styled.div<PlaceholderProps>`
+  ${({ width }) =>
+    width &&
+    `width: ${width === "xlarge" ? "350px" : width === "large" ? "150px" : width === "medium" ? "100px" : "50px"};`};
+  ${({ height }) => height && `height: ${height === "large" ? "150px" : height === "medium" ? "100px" : "50px"};`};
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
+`;

package/inline/types.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+declare type Props = {
+    /**
+     * Alignment applied to children in the main axis.
+     */
+    alignX?: "start" | "end" | "center";
+    /**
+     * Alignment applied to children in the cross axis.
+     */
+    alignY?: "start" | "end" | "center" | "baseline" | "stretch";
+    /**
+     * Specifies the HTML tag or component that is rendered as the wrapper element.
+     */
+    as?: React.ElementType;
+    /**
+     * If true, a divider is shown between each child.
+     */
+    divider?: boolean;
+    /**
+     * Space applied between each child.
+     */
+    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
+    /**
+     * If true, it changes the direction of the inline to reverse.
+     */
+    reverse?: boolean;
+    /**
+     * Custom content inside the stack.
+     */
+    children: React.ReactNode[] | React.ReactNode;
+};
+export default Props;

package/inset/Inset.js

@@ -36,40 +36,7 @@ function Inset(_ref) {
 }
 
 function getSpacingValue(spacingName) {
-  switch (spacingName) {
-    case "none":
-      return "0rem";
-
-    case "xxxsmall":
-      return "0.125rem";
-
-    case "xxsmall":
-      return "0.25rem";
-
-    case "xsmall":
-      return "0.5rem";
-
-    case "small":
-      return "1rem";
-
-    case "medium":
-      return "1.5rem";
-
-    case "large":
-      return "2rem";
-
-    case "xlarge":
-      return "3rem";
-
-    case "xxlarge":
-      return "4rem";
-
-    case "xxxlarge":
-      return "5rem";
-
-    default:
-      return "0rem";
-  }
+  return spacingName ? spacingName : "0rem";
 }
 
 var StyledInset = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref2) {