@dxc-technology/halstack-react 0.0.0-6c89958 → 0.0.0-6c8ea9f

package/inset/Inset.stories.tsx

@@ -0,0 +1,229 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import styled from "styled-components";
+import DxcStack from "./../stack/Stack";
+import DxcInset from "./Inset";
+
+export default {
+  title: "Inset",
+  component: DxcInset,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" level={4} />
+    <Container>
+      <DxcInset>
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = none" level={4} />
+    <Container>
+      <DxcInset space="none">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xxxsmall" level={4} />
+    <Container>
+      <DxcInset space="xxxsmall">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xxsmall" level={4} />
+    <Container>
+      <DxcInset space="xxsmall">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xsmall" level={4} />
+    <Container>
+      <DxcInset space="xsmall">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = small" level={4} />
+    <Container>
+      <DxcInset space="small">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = medium" level={4} />
+    <Container>
+      <DxcInset space="medium">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = large" level={4} />
+    <Container>
+      <DxcInset space="large">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xlarge" level={4} />
+    <Container>
+      <DxcInset space="xlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xxlarge" level={4} />
+    <Container>
+      <DxcInset space="xxlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xxxlarge" level={4} />
+    <Container>
+      <DxcInset space="xxxlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = none" level={4} />
+    <Container>
+      <DxcInset horizontal="none">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xxxsmall" level={4} />
+    <Container>
+      <DxcInset horizontal="xxxsmall">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xxsmall" level={4} />
+    <Container>
+      <DxcInset horizontal="xxsmall">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xsmall" level={4} />
+    <Container>
+      <DxcInset horizontal="xsmall">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = small" level={4} />
+    <Container>
+      <DxcInset horizontal="small">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = medium" level={4} />
+    <Container>
+      <DxcInset horizontal="medium">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = large" level={4} />
+    <Container>
+      <DxcInset horizontal="large">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xlarge" level={4} />
+    <Container>
+      <DxcInset horizontal="xlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xxlarge" level={4} />
+    <Container>
+      <DxcInset horizontal="xxlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xxxlarge" level={4} />
+    <Container>
+      <DxcInset horizontal="xxxlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = none" level={4} />
+    <Container>
+      <DxcInset vertical="none">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xxxsmall" level={4} />
+    <Container>
+      <DxcInset vertical="xxxsmall">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xxsmall" level={4} />
+    <Container>
+      <DxcInset vertical="xxsmall">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xsmall" level={4} />
+    <Container>
+      <DxcInset vertical="xsmall">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = small" level={4} />
+    <Container>
+      <DxcInset vertical="small">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = medium" level={4} />
+    <Container>
+      <DxcInset vertical="medium">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = large" level={4} />
+    <Container>
+      <DxcInset vertical="large">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xlarge" level={4} />
+    <Container>
+      <DxcInset vertical="xlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xxlarge" level={4} />
+    <Container>
+      <DxcInset vertical="xxlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xxxlarge" level={4} />
+    <Container>
+      <DxcInset vertical="xxxlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="top = xxsmall, right= medium, bottom = large and left = xxlarge" level={4} />
+    <Container>
+      <DxcInset top="xxsmall" right="medium" bottom="large" left="xxlarge">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="Inside a stack" level={4} />
+    <Container>
+      <DxcStack gutter="medium" divider>
+        <Placeholder></Placeholder>
+        <DxcInset top="xxsmall" right="medium" bottom="large" left="xxlarge">
+          <Placeholder></Placeholder>
+        </DxcInset>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+  </>
+);
+
+const Container = styled.div`
+  background: #f2eafa;
+  margin: 2.5rem;
+`;
+
+const Placeholder = styled.div`
+  min-height: 40px;
+  min-width: 120px;
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
+`;

package/inset/types.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+declare type Spacing = "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+declare type Props = {
+    /**
+     * Applies the spacing scale to all sides.
+     */
+    space?: Spacing;
+    /**
+     * Applies the spacing scale to the left and right sides.
+     */
+    horizontal?: Spacing;
+    /**
+     * Applies the spacing scale to the top and bottom sides.
+     */
+    vertical?: Spacing;
+    /**
+     * Applies the spacing scale to the top side.
+     */
+    top?: Spacing;
+    /**
+     * Applies the spacing scale to the right side.
+     */
+    right?: Spacing;
+    /**
+     * Applies the spacing scale to the bottom side.
+     */
+    bottom?: Spacing;
+    /**
+     * Applies the spacing scale to the left side.
+     */
+    left?: Spacing;
+    /**
+     * Custom content inside the inset.
+     */
+    children: React.ReactNode;
+};
+export default Props;

package/inset/types.js

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

package/layout/ApplicationLayout.js

@@ -136,27 +136,20 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
     }));
   };
 
-  var handleResize = function handleResize(width) {
-    if (width) {
-      setIsResponsive(width <= _variables.responsiveSizes.tablet);
-      setIsSideNavVisible(true);
-    }
-  };
-
-  var handleEventListener = function handleEventListener() {
-    handleResize(ref.current.offsetWidth);
+  var handleResize = function handleResize() {
+    setIsResponsive(window.matchMedia("(max-width: ".concat(_variables.responsiveSizes.medium, "rem)")).matches);
+    setIsSideNavVisible(true);
   };
 
   (0, _react.useEffect)(function () {
     if (ref.current) {
-      window.addEventListener("resize", handleEventListener);
-      handleResize(ref.current.offsetWidth);
+      window.addEventListener("resize", handleResize);
     }
 
     return function () {
-      window.removeEventListener("resize", handleEventListener);
+      window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, [ref.current]);
 
   var handleSidenav = function handleSidenav() {
     setIsSideNavVisible(!isSideNavVisible);
@@ -213,7 +206,7 @@ var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8 ||
 
 var ArrowContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  height: calc(100vh - 64px);\n  left: 279px;\n"])));
 
-var ArrowTrigger = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: sticky;\n  top: 45vh;\n  width: 42px;\n  min-height: 42px;\n  background-color: ", ";\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.4s ease-in-out;\n  z-index: 1250;\n  cursor: pointer;\n  & > svg {\n    fill: ", ";\n  }\n"])), function (props) {
+var ArrowTrigger = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: sticky;\n  top: 45vh;\n  width: 42px;\n  min-height: 42px;\n  background-color: ", ";\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.4s ease-in-out;\n  z-index: 1250;\n  cursor: pointer;\n  & > svg {\n    fill: ", ";\n  }\n  :focus {\n    outline: #0095ff auto 1px;\n  }\n"])), function (props) {
   return "".concat(props.theme.arrowContainerColor);
 }, function (props) {
   return props.isSideNavVisible ? "rotate(-180deg)" : "rotate(0deg)";

package/link/Link.d.ts

@@ -1,3 +1,4 @@
-import Overload from "./types";
-declare const DxcLink: Overload;
+/// <reference types="react" />
+import { LinkProps } from "./types";
+declare const DxcLink: ({ inheritColor, disabled, icon, iconPosition, href, newWindow, onClick, margin, tabIndex, children, }: LinkProps) => JSX.Element;
 export default DxcLink;

package/link/Link.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -27,57 +27,62 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var DxcLink = function DxcLink(_ref) {
-  var _ref$inheritColor = _ref.inheritColor,
-      inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      iconSrc = _ref.iconSrc,
+var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var iconPosition = _ref.iconPosition,
       icon = _ref.icon,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
-      _ref$href = _ref.href,
-      href = _ref$href === void 0 ? "" : _ref$href,
-      _ref$newWindow = _ref.newWindow,
-      newWindow = _ref$newWindow === void 0 ? false : _ref$newWindow,
-      onClick = _ref.onClick,
-      _ref$text = _ref.text,
-      text = _ref$text === void 0 ? "" : _ref$text,
-      margin = _ref.margin,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var colorsTheme = (0, _useTheme["default"])();
-
-  var linkContent = /*#__PURE__*/_react["default"].createElement(LinkText, {
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(LinkText, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
     iconPosition: iconPosition
-  }, text, icon ? /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
-    iconPosition: iconPosition
-  }, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : iconSrc && /*#__PURE__*/_react["default"].createElement(LinkIcon, {
-    src: iconSrc,
-    iconPosition: iconPosition
-  }));
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
+    src: icon
+  }) : icon), iconPosition === "before" && children);
+});
 
+var DxcLink = function DxcLink(_ref2) {
+  var _ref2$inheritColor = _ref2.inheritColor,
+      inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      icon = _ref2.icon,
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
+      _ref2$href = _ref2.href,
+      href = _ref2$href === void 0 ? "" : _ref2$href,
+      _ref2$newWindow = _ref2.newWindow,
+      newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
+      onClick = _ref2.onClick,
+      margin = _ref2.margin,
+      _ref2$tabIndex = _ref2.tabIndex,
+      tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
+      children = _ref2.children;
+  var colorsTheme = (0, _useTheme["default"])();
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.link
-  }, /*#__PURE__*/_react["default"].createElement(DxcLinkContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(LinkContainer, {
     margin: margin
-  }, onClick ? /*#__PURE__*/_react["default"].createElement(StyledButton, {
-    type: "button",
+  }, typeof children === "string" && (href || onClick) ? /*#__PURE__*/_react["default"].createElement(StyledLink, {
+    as: href ? "a" : "button",
+    tabIndex: tabIndex,
     onClick: !disabled && onClick,
-    margin: margin,
+    href: !disabled && href ? href : undefined,
+    target: href ? newWindow ? "_blank" : "_self" : undefined,
     disabled: disabled,
     inheritColor: inheritColor
-  }, linkContent) : /*#__PURE__*/_react["default"].createElement(StyledLink, {
-    tabIndex: tabIndex,
-    href: !disabled && href,
-    target: newWindow ? "_blank" : "_self",
-    margin: margin,
+  }, /*#__PURE__*/_react["default"].createElement(LinkContent, {
+    iconPosition: iconPosition,
+    icon: icon,
+    children: children
+  })) : /*#__PURE__*/_react["default"].createElement(CustomLinkContainer, {
     disabled: disabled,
     inheritColor: inheritColor
-  }, linkContent)));
+  }, /*#__PURE__*/_react["default"].createElement(LinkContent, {
+    iconPosition: iconPosition,
+    icon: icon,
+    children: children
+  }))));
 };
 
-var DxcLinkContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var LinkContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  * {\n    background: none;\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    font-size: ", ";\n    font-weight: ", ";\n    font-style: ", ";\n    font-family: ", ";\n    text-decoration-color: transparent;\n  }\n"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -87,16 +92,26 @@ var DxcLinkContainer = _styledComponents["default"].div(_templateObject || (_tem
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
+}, function (props) {
+  return props.theme.fontSize;
+}, function (props) {
+  return props.theme.fontWeight;
+}, function (props) {
+  return props.theme.fontStyle;
+}, function (props) {
+  return props.theme.fontFamily;
 });
 
-var StyledLink = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  ", "\n\n  text-decoration-color: transparent;\n  ", "\n\n  &:visited {\n    color: ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    ", "\n  }\n  &:focus {\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+var StyledLink = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", "\n  color: ", ";\n  ", "\n\n  &:visited {\n    color: ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    ", "\n  }\n  &:focus {\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+  return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n     border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
+}, function (props) {
+  return props.disabled && "cursor: default;";
+}, function (props) {
   return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
 }, function (props) {
   return props.disabled ? "pointer-events: none;" : "";
 }, function (props) {
-  return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n     border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
-}, function (props) {
-  return !props.inheritColor ? props.theme.visitedFontColor : "";
+  return !props.inheritColor && !props.disabled ? props.theme.visitedFontColor : "";
 }, function (props) {
   return "color: ".concat(props.theme.visitedFontColor, ";\n         border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
 }, function (props) {
@@ -109,47 +124,33 @@ var StyledLink = _styledComponents["default"].a(_templateObject2 || (_templateOb
   return "color: ".concat(props.theme.activeFontColor, " !important;\n       border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
 });
 
-var StyledButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: inherit;\n  text-decoration-color: transparent;\n\n  ", "\n  ", "\n  color: ", ";\n  ", "\n\n  &:hover {\n    ", "\n  }\n  &:focus {\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+var CustomLinkContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", "\n  ", "\n\n  * {\n    color: ", ";\n  }\n\n  &:hover {\n    * {\n      color: ", ";\n    }\n    ", "\n  }\n  &:focus-within {\n    * {\n      outline: none;\n    }\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    * {\n      color: ", " !important;\n    }\n    ", "\n  }\n"])), function (props) {
   return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n     border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
 }, function (props) {
   return props.disabled && "cursor: default;";
+}, function (props) {
+  return props.disabled ? "pointer-events: none;" : "";
 }, function (props) {
   return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
 }, function (props) {
-  return props.disabled ? "pointer-events: none;" : "";
+  return props.theme.hoverFontColor;
 }, function (props) {
-  return "color: ".concat(props.theme.hoverFontColor, ";\n       border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n       cursor: pointer;");
+  return "border-bottom-color: ".concat(props.theme.hoverUnderlineColor, ";\n       cursor: pointer;");
 }, function (props) {
   return props.theme.focusColor;
 }, function (props) {
   return props.disabled && "outline: none";
 }, function (props) {
-  return "color: ".concat(props.theme.activeFontColor, " !important;\n       border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
-});
-
-var LinkText = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  font-family: ", ";\n  display: inline-flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: center;\n  max-width: 100%;\n"])), function (props) {
-  return props.theme.fontSize;
-}, function (props) {
-  return props.theme.fontWeight;
-}, function (props) {
-  return props.theme.fontStyle;
-}, function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.iconPosition === "after" ? "row" : "row-reverse";
+  return props.theme.activeFontColor;
 }, function (props) {
-  return props.iconPosition === "after" ? "flex-start" : "flex-end";
+  return "border-bottom-color: ".concat(props.theme.activeUnderlineColor, " !important;");
 });
 
-var LinkIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", ";\n"])), function (props) {
-  return props.theme.iconSize;
-}, function (props) {
-  return props.theme.iconSize;
-}, function (props) {
-  return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
-});
+var LinkText = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: baseline;\n  max-width: 100%;\n"])));
+
+var LinkIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])([""])));
 
-var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", ";\n  overflow: hidden;\n  align-self: center;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;