glints-aries 4.1.3 → 4.1.5

package/es/General/Badge/index.d.ts

@@ -0,0 +1,3 @@
+import Badge from './Badge';
+export { Badge };
+export default Badge;

package/es/General/Badge/index.js

@@ -0,0 +1,3 @@
+import Badge from './Badge';
+export { Badge };
+export default Badge;

package/es/General/Brand/Brand.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { BrandContainer } from './BrandStyle';
+declare const Brand: ({ alt, asset, className, rightClickURL, onContextMenu, ...defaultProps }: Props) => JSX.Element;
+export declare type Props = React.ComponentPropsWithoutRef<typeof BrandContainer> & {
+    /** There are 3 available values for asset props. The first and second one are Glints logo, but you can also custom the logo by parsing url or path of the logo. */
+    asset: string;
+    /** HTML <img> alt Attribute */
+    alt?: HTMLImageElement['alt'];
+    className?: string;
+    /** Redirect to url when right click is triggered. */
+    rightClickURL?: string;
+    /** Executes when the user right-clicks on the component */
+    onContextMenu?(): void;
+};
+export default Brand;

package/es/General/Brand/Brand.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["alt", "asset", "className", "rightClickURL", "onContextMenu"];
+import * as React from 'react';
+import classNames from 'classnames';
+import { BrandContainer, BrandImage } from './BrandStyle';
+import GlintsBlack from '../../../assets/image/glints-logo-black.svg';
+import GlintsWhite from '../../../assets/image/glints-logo-white.svg';
+var Brand = function Brand(_ref) {
+  var alt = _ref.alt,
+    asset = _ref.asset,
+    className = _ref.className,
+    rightClickURL = _ref.rightClickURL,
+    onContextMenu = _ref.onContextMenu,
+    defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var handleRightClick = function handleRightClick(e) {
+    if (rightClickURL) {
+      e.preventDefault();
+      if (onContextMenu !== undefined) {
+        onContextMenu();
+      }
+      window.location.href = rightClickURL;
+    }
+  };
+  var srcAsset = '';
+  if (asset === 'glints-black') {
+    srcAsset = GlintsBlack;
+  } else if (asset === 'glints-white') {
+    srcAsset = GlintsWhite;
+  } else {
+    srcAsset = asset;
+  }
+  return /*#__PURE__*/React.createElement(BrandContainer, _extends({
+    className: classNames('aries-brand', className),
+    role: "presentation",
+    tabIndex: 0,
+    onContextMenu: handleRightClick
+  }, defaultProps), /*#__PURE__*/React.createElement(BrandImage, {
+    className: "brand-image",
+    src: srcAsset,
+    alt: alt,
+    tabIndex: -1
+  }));
+};
+export default Brand;

package/es/General/Brand/Brand.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const RedirectToGlintsWhenRightClick: any;

package/es/General/Brand/Brand.test.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/es/General/Brand/BrandStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const BrandContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BrandImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package/es/General/Brand/BrandStyle.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export var BrandContainer = styled.div.withConfig({
+  displayName: "BrandStyle__BrandContainer",
+  componentId: "sc-xckggx-0"
+})(["position:relative;display:inline-flex;cursor:pointer;&:focus{outline:none;}&:focus > img{outline:5px auto -webkit-focus-ring-color;}"]);
+export var BrandImage = styled.img.withConfig({
+  displayName: "BrandStyle__BrandImage",
+  componentId: "sc-xckggx-1"
+})(["object-fit:contain;width:3em;height:3em;outline:none;"]);

package/es/General/Brand/index.d.ts

@@ -0,0 +1,3 @@
+import Brand from './Brand';
+export { Brand };
+export default Brand;

package/es/General/Brand/index.js

@@ -0,0 +1,3 @@
+import Brand from './Brand';
+export { Brand };
+export default Brand;

package/es/General/Button/Button.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export declare const transformVariant: (variant: string, theme?: string) => string;
+export declare const Button: React.FC<Props>;
+export declare type ButtonVariantType = 'solid-white' | 'solid-blue' | 'yellow' | 'ghost' | 'white-grey' | 'link';
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Make the button fit to its parent width. */
+    block?: boolean;
+    className?: string;
+    /** Sets Button to disable state. */
+    disabled?: boolean;
+    /** Callback when click. */
+    onClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+    /** Sets Button to small version. */
+    small?: boolean;
+    /** The variant of the button. */
+    variant?: ButtonVariantType;
+    /** Changes the tag with which the button will render. */
+    tag?: React.ElementType;
+    /** Element placed before the children. */
+    startIcon?: React.ReactNode;
+    /** Element placed after the children. */
+    endIcon?: React.ReactNode;
+    /** Deprecated! */
+    theme?: string;
+    forwardedRef?: React.RefObject<HTMLButtonElement>;
+    /** Determines if the button should have rounded corners */
+    isRoundedCorner?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/es/General/Button/Button.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "block", "className", "disabled", "onClick", "small", "variant", "startIcon", "endIcon", "theme", "forwardedRef"];
+var _SOLID_BUTTON_THEME_M;
+import React from 'react';
+import SolidButton from './SolidButton';
+import SolidShadowButton from './SolidShadowButton';
+import GhostButton from './GhostButton';
+import LinkButton from './LinkButton';
+import { ButtonVariant, ButtonTheme } from '../../Utils/StyleConfig';
+import { StartIconContainer, EndIconContainer, WhiteGreyBtn } from './ButtonStyle';
+var SOLID_BUTTON_THEME_MAP = (_SOLID_BUTTON_THEME_M = {}, _SOLID_BUTTON_THEME_M[ButtonVariant.SOLID_WHITE] = ButtonTheme.WHITE, _SOLID_BUTTON_THEME_M[ButtonVariant.SOLID_BLUE] = ButtonTheme.BLUE, _SOLID_BUTTON_THEME_M);
+export var transformVariant = function transformVariant(variant, theme) {
+  if (theme) {
+    console.warn("Warning: Button's theme prop is deprecated and will be removed in a future release.\nPlease use the variant prop instead.");
+  }
+  if ((variant === ButtonVariant.SOLID_WHITE || variant === 'default') && theme && theme !== ButtonTheme.WHITE) {
+    console.warn("Warning: Button's 'default' variant is deprecated and will be removed in a future release.\nPlease use the 'solid-blue' or 'solid-white' variant instead.");
+    return ButtonVariant.SOLID_BLUE;
+  } else if (variant === 'primary') {
+    console.warn("Warning: Button's 'primary' variant is deprecated and will be removed in a future release.\nPlease use the 'yellow' variant instead.");
+    return ButtonVariant.YELLOW;
+  } else if (Object.values(ButtonVariant).includes(variant)) {
+    return variant;
+  }
+  return ButtonVariant.SOLID_WHITE;
+};
+export var Button = function Button(_ref) {
+  var children = _ref.children,
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onClick = _ref.onClick,
+    _ref$small = _ref.small,
+    small = _ref$small === void 0 ? false : _ref$small,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? ButtonVariant.SOLID_WHITE : _ref$variant,
+    startIcon = _ref.startIcon,
+    endIcon = _ref.endIcon,
+    theme = _ref.theme,
+    forwardedRef = _ref.forwardedRef,
+    defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, startIcon && /*#__PURE__*/React.createElement(StartIconContainer, null, startIcon), children, endIcon && /*#__PURE__*/React.createElement(EndIconContainer, null, endIcon));
+  var transformedVariant = transformVariant(variant, theme);
+  switch (transformedVariant) {
+    case ButtonVariant.YELLOW:
+      return /*#__PURE__*/React.createElement(SolidShadowButton, _extends({
+        ref: forwardedRef,
+        className: className,
+        disabled: disabled,
+        onClick: onClick,
+        block: block,
+        small: small
+      }, defaultProps), content);
+    case ButtonVariant.GHOST:
+      return /*#__PURE__*/React.createElement(GhostButton, _extends({
+        ref: forwardedRef,
+        className: className,
+        disabled: disabled,
+        onClick: onClick,
+        block: block,
+        small: small
+      }, defaultProps), content);
+    case ButtonVariant.WHITE_GREY:
+      return /*#__PURE__*/React.createElement(WhiteGreyBtn, _extends({
+        ref: forwardedRef,
+        className: className,
+        disabled: disabled,
+        onClick: onClick,
+        block: block,
+        small: small
+      }, defaultProps), content);
+    case ButtonVariant.LINK:
+      return /*#__PURE__*/React.createElement(LinkButton, _extends({
+        ref: forwardedRef,
+        className: className,
+        disabled: disabled,
+        onClick: onClick,
+        block: block
+      }, defaultProps), content);
+    default:
+      return /*#__PURE__*/React.createElement(SolidButton, _extends({
+        ref: forwardedRef,
+        theme: SOLID_BUTTON_THEME_MAP[transformedVariant],
+        className: className,
+        disabled: disabled,
+        onClick: onClick,
+        block: block,
+        small: small
+      }, defaultProps), content);
+  }
+};
+var forwardRef = function forwardRef(props, forwardedRef) {
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    forwardedRef: forwardedRef
+  }, props));
+};
+forwardRef.displayName = Button.name;
+export default /*#__PURE__*/React.forwardRef(forwardRef);

package/es/General/Button/Button.stories.d.ts

@@ -0,0 +1,11 @@
+import { Story, Meta } from '@storybook/react';
+import { Props as ButtonProps } from './Button';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const SolidBlue: any;
+export declare const Variants: Story<ButtonProps>;
+export declare const Sizes: Story<ButtonProps>;
+export declare const Disable: Story<ButtonProps>;
+export declare const WithIcon: Story<ButtonProps>;
+export declare const WithDifferentTag: Story<ButtonProps>;
+export declare const WithRoundedCorner: Story<ButtonProps>;

package/es/General/Button/Button.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/es/General/Button/ButtonStyle.d.ts

@@ -0,0 +1,47 @@
+interface ButtonProps {
+    small?: boolean;
+}
+interface SolidBtnContainerProps {
+    block?: boolean;
+    disabled?: boolean;
+    isRoundedCorner?: boolean;
+}
+interface SolidBtnProps {
+    block?: boolean;
+    isRoundedCorner?: boolean;
+}
+export declare const SolidBtn: import("styled-components").StyledComponent<"button", any, ButtonProps & SolidBtnProps, never>;
+export declare const SolidBtnContainer: import("styled-components").StyledComponent<"div", any, SolidBtnContainerProps, never>;
+interface SolidShadowBtnProps {
+    block?: boolean;
+}
+export declare const SolidShadowBtn: import("styled-components").StyledComponent<"button", any, ButtonProps & SolidShadowBtnProps, never>;
+interface SolidShadowContainerProps {
+    block?: boolean;
+    disabled?: boolean;
+}
+export declare const SolidShadowContainer: import("styled-components").StyledComponent<"div", any, SolidShadowContainerProps, never>;
+interface GhostBtnProps {
+    block?: boolean;
+    isRoundedCorner?: boolean;
+}
+export declare const GhostBtn: import("styled-components").StyledComponent<"button", any, ButtonProps & GhostBtnProps, never>;
+interface GhostBtnContainerProps {
+    block?: boolean;
+    disabled?: boolean;
+    isRoundedCorner?: boolean;
+}
+export declare const GhostBtnContainer: import("styled-components").StyledComponent<"div", any, GhostBtnContainerProps, never>;
+interface WhiteGreyBtnProps {
+    block?: boolean;
+    isRoundedCorner?: boolean;
+}
+export declare const WhiteGreyBtn: import("styled-components").StyledComponent<"button", any, ButtonProps & WhiteGreyBtnProps, never>;
+export declare const LinkBtn: import("styled-components").StyledComponent<"button", any, ButtonProps & LinkBtnProps, never>;
+interface LinkBtnProps {
+    block?: boolean;
+    disabled?: boolean;
+}
+export declare const StartIconContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const EndIconContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

package/es/General/Button/ButtonStyle.js

@@ -0,0 +1,221 @@
+import styled from 'styled-components';
+import { Neutral } from '../../@next/utilities/colors';
+import { Greyscale, PrimaryColor, SecondaryColor } from '../../Utils/Colors';
+import { ButtonTheme } from '../../Utils/StyleConfig';
+var generalButtonPadding = [15, 40];
+var smallButtonPadding = [10, 20];
+var Button = styled.button.withConfig({
+  displayName: "ButtonStyle__Button",
+  componentId: "sc-jyb3o2-0"
+})(["display:flex;position:relative;align-items:center;justify-content:center;border:none;text-transform:uppercase;outline:none;cursor:pointer;font-weight:bold;font-size:", ";line-height:1.5;padding:", ";background:transparent;transition:all 0.2s;text-decoration:none;", ""], function (_ref) {
+  var small = _ref.small;
+  return small ? '14px' : '16px';
+}, function (_ref2) {
+  var small = _ref2.small;
+  return small ? smallButtonPadding[0] + "px " + smallButtonPadding[1] + "px" : generalButtonPadding[0] + "px " + generalButtonPadding[1] + "px";
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  if (disabled) {
+    return "\n        &:hover {\n          cursor: not-allowed;\n        }\n      ";
+  }
+});
+
+/*
+ * Default Button
+ */
+
+export var SolidBtn = styled(Button).withConfig({
+  displayName: "ButtonStyle__SolidBtn",
+  componentId: "sc-jyb3o2-1"
+})(["width:", ";border-radius:", ";&:active{background-color:", ";color:", ";}", " ", " &:hover{text-decoration:none;", "}"], function (_ref4) {
+  var block = _ref4.block;
+  return block && '100%';
+}, function (_ref5) {
+  var isRoundedCorner = _ref5.isRoundedCorner;
+  return isRoundedCorner ? '8px' : '0px';
+}, Greyscale.black, Greyscale.white, function (props) {
+  switch (props.theme) {
+    case "" + ButtonTheme.BLUE:
+      return "\n          background-color: " + SecondaryColor.actionblue + ";\n          color: " + Greyscale.white + ";\n\n          &:hover {\n            color: " + Greyscale.white + ";\n          }\n        ";
+    default:
+      return "\n          background-color: " + Greyscale.white + ";\n          color: " + SecondaryColor.actionblue + ";\n\n          &:hover {\n            color: " + SecondaryColor.actionblue + ";\n          }\n        ";
+  }
+}, function (_ref6) {
+  var disabled = _ref6.disabled;
+  if (disabled) {
+    return "\n        background-color: " + Greyscale.lightgrey + ";\n        color: " + Greyscale.white + ";\n      ";
+  }
+}, function (_ref7) {
+  var disabled = _ref7.disabled;
+  if (disabled) {
+    return "\n          background-color: " + Greyscale.lightgrey + ";\n          color: " + Greyscale.white + ";\n        ";
+  }
+});
+export var SolidBtnContainer = styled.div.withConfig({
+  displayName: "ButtonStyle__SolidBtnContainer",
+  componentId: "sc-jyb3o2-2"
+})(["position:relative;display:", ";z-index:1;border-radius:", ";", " &:hover{", "{", "}}&:active{", "{", "}}"], function (_ref8) {
+  var block = _ref8.block;
+  return block ? 'flex' : 'inline-flex';
+}, function (_ref9) {
+  var isRoundedCorner = _ref9.isRoundedCorner;
+  return isRoundedCorner ? '8px' : '0px';
+}, function (_ref10) {
+  var disabled = _ref10.disabled,
+    isRoundedCorner = _ref10.isRoundedCorner;
+  if (!disabled) {
+    return "\n      &:active {\n        background: " + Greyscale.black + ";\n        color: " + Greyscale.white + ";\n        transform: translate3d(2px, 2px, 0);\n        transition: all .2s;\n      }\n\n      &:after {\n        content: '';\n        opacity: 0;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        background: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0, 0, 0, 0.5) 5px);\n        top: 5px;\n        left: 5px;\n        z-index: -1;\n        transition: all .2s;\n        cursor: pointer;\n        border-radius: " + (isRoundedCorner ? '8px' : '0px') + ";\n      }\n\n      &:hover:after {\n        opacity: 1;\n        transition: all .2s;\n      }\n\n      &:active:after {\n        transform: translate3d(-5px, -5px, 0);\n        transition: all .2s;\n      }\n      ";
+  }
+}, SolidBtn, function (props) {
+  if (props.disabled) {
+    return "\n            background-color: none;\n          ";
+  }
+}, SolidBtn, function (props) {
+  if (props.disabled) {
+    return "\n            background-color: none;\n          ";
+  }
+  return "\n          background-color: " + Greyscale.black + ";\n          color: " + Greyscale.white + ";\n        ";
+});
+
+/*
+ * SolidShadow Button
+ */
+
+export var SolidShadowBtn = styled(Button).withConfig({
+  displayName: "ButtonStyle__SolidShadowBtn",
+  componentId: "sc-jyb3o2-3"
+})(["transition:all 0.2s;cursor:pointer;position:relative;width:100%;border-radius:4px;&:hover{text-decoration:none;}", ""], function (props) {
+  if (props.disabled) {
+    return "\n        background-color: " + Greyscale.lightgrey + ";\n        color: " + Greyscale.white + ";\n      ";
+  }
+  return "\n      background-color: " + PrimaryColor.glintsyellow + ";\n      color: " + Neutral.B18 + ";\n    ";
+});
+export var SolidShadowContainer = styled.div.withConfig({
+  displayName: "ButtonStyle__SolidShadowContainer",
+  componentId: "sc-jyb3o2-4"
+})(["position:relative;display:", ";z-index:1;cursor:pointer;&:hover{", "}&:active{", " ", "{", "}}&:before{content:'';width:100%;height:100%;position:absolute;top:5px;left:5px;transition:all 0.2s;border-radius:4px;", "}&:hover:before{", "}&:active:before{", "}"], function (_ref11) {
+  var block = _ref11.block;
+  return block ? 'flex' : 'inline-flex';
+}, function (props) {
+  if (props.disabled) {
+    return 'transform: none';
+  }
+  return "\n        transform: translate(2px, 2px);\n        transition: all .2s;\n      ";
+}, function (props) {
+  if (!props.disabled) {
+    return "\n          transform: translate(3px, 3px);\n          transition: all .2s;\n          color: " + Greyscale.white + ";\n        ";
+  }
+  return 'transform: none';
+}, SolidShadowBtn, function (props) {
+  if (props.disabled) {
+    return "\n            background-color: none;\n          ";
+  }
+  return "\n          background-color: " + Greyscale.black + ";\n          color: " + Greyscale.white + ";\n        ";
+}, function (props) {
+  if (props.disabled) {
+    return 'background-color: none';
+  }
+  return "background-color: " + PrimaryColor.glintsred + ";";
+}, function (props) {
+  if (props.disabled) {
+    return "\n          cursor: default;\n          background-color: none;\n        ";
+  }
+  return "\n      background: " + Greyscale.black + ";\n      transform: translate(-2px, -2px);\n      transition: all .2s;\n    ";
+}, function (props) {
+  if (!props.disabled) {
+    return "\n        transform: translate(-5px, -5px);\n        transition: all .2s;\n      ";
+  }
+  return false;
+});
+
+/*
+ * Ghost Button
+ */
+
+export var GhostBtn = styled(Button).withConfig({
+  displayName: "ButtonStyle__GhostBtn",
+  componentId: "sc-jyb3o2-5"
+})(["transition:background-color 0.5s;width:", ";background:", ";padding:", ";border:2px solid ", ";color:", ";border-radius:", ";&:hover{transition:background-color 0.5s;text-decoration:none;", "}", ""], function (_ref12) {
+  var block = _ref12.block;
+  return block && '100%';
+}, Greyscale.white, function (_ref13) {
+  var small = _ref13.small;
+  return small ? smallButtonPadding[0] - 2 + "px " + (smallButtonPadding[1] - 2) + "px" : generalButtonPadding[0] - 2 + "px " + (generalButtonPadding[1] - 2) + "px";
+}, SecondaryColor.actionblue, SecondaryColor.actionblue, function (_ref14) {
+  var isRoundedCorner = _ref14.isRoundedCorner;
+  return isRoundedCorner ? '8px' : '0px';
+}, function (_ref15) {
+  var disabled = _ref15.disabled;
+  if (!disabled) {
+    return "\n          background-color: " + SecondaryColor.actionblue + ";\n          color: " + Greyscale.white + ";\n        ";
+  }
+}, function (_ref16) {
+  var disabled = _ref16.disabled;
+  if (disabled) {
+    return "\n        background-color: " + Greyscale.lightgrey + ";\n        color: " + Greyscale.white + ";\n        border: none;\n      ";
+  }
+});
+export var GhostBtnContainer = styled.div.withConfig({
+  displayName: "ButtonStyle__GhostBtnContainer",
+  componentId: "sc-jyb3o2-6"
+})(["position:relative;display:", ";z-index:1;", " ", "{", "}"], function (_ref17) {
+  var block = _ref17.block;
+  return block ? 'flex' : 'inline-flex';
+}, function (_ref18) {
+  var disabled = _ref18.disabled,
+    isRoundedCorner = _ref18.isRoundedCorner;
+  if (!disabled) {
+    return "\n        &:active {\n          transition: background-color .5s;\n          transform: translate3d(2px, 2px, 0);\n          transition: all .2s;\n        }\n\n        &:after {\n          content: '';\n          opacity: 0;\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          background: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0, 0, 0, 0.5) 5px);\n          top: 5px;\n          left: 5px;\n          z-index: -1;\n          transition: all .2s;\n          cursor: pointer;\n          border-radius: " + (isRoundedCorner ? '8px' : '0px') + ";\n        }\n\n        &:hover:after {\n          opacity: 1;\n          transition: all .2s;\n        }\n\n        &:active:after {\n          transform: translate3d(-5px, -5px, 0);\n          transition: all .2s;\n        }\n        ";
+  }
+}, GhostBtn, function (_ref19) {
+  var disabled = _ref19.disabled;
+  if (!disabled) {
+    return "\n        &:active {\n          background-color: " + Greyscale.black + ";\n          color: " + Greyscale.white + ";\n          border: 2px solid " + Greyscale.black + ";\n        }\n      ";
+  }
+});
+
+/*
+ * White-Grey Button
+ */
+
+export var WhiteGreyBtn = styled(Button).withConfig({
+  displayName: "ButtonStyle__WhiteGreyBtn",
+  componentId: "sc-jyb3o2-7"
+})(["width:", ";", ""], function (_ref20) {
+  var block = _ref20.block;
+  return block && '100%';
+}, function (_ref21) {
+  var disabled = _ref21.disabled,
+    isRoundedCorner = _ref21.isRoundedCorner;
+  if (!disabled) {
+    return "\n        background-color: " + Greyscale.white + ";\n        color: " + SecondaryColor.actionblue + ";\n        border-radius: " + (isRoundedCorner ? '8px' : '0px') + ";\n\n        &:hover {\n          background-color: " + Greyscale.softgrey + ";\n          color: " + SecondaryColor.actionblue + ";\n        }\n\n        &:active {\n          background-color: " + Greyscale.black + ";\n          color: " + Greyscale.white + ";\n        }\n      ";
+  }
+  return "\n      background-color: " + Greyscale.lightgrey + ";\n      color: " + Greyscale.white + ";\n    ";
+});
+
+/*
+ * Link Button
+ */
+
+export var LinkBtn = styled(Button).withConfig({
+  displayName: "ButtonStyle__LinkBtn",
+  componentId: "sc-jyb3o2-8"
+})(["font-weight:normal;text-transform:inherit;width:", ";padding:0;justify-content:flex-start;color:", ";", ""], function (_ref22) {
+  var block = _ref22.block;
+  return block && '100%';
+}, SecondaryColor.actionblue, function (_ref23) {
+  var disabled = _ref23.disabled;
+  if (disabled) {
+    return "\n        color: " + Greyscale.grey + ";\n      ";
+  } else {
+    return "\n        &:hover {\n          color: " + SecondaryColor.darkblue + ";\n          text-decoration: none;\n        }\n\n        &:active {\n          color: " + Greyscale.black + ";\n        }\n      ";
+  }
+});
+export var StartIconContainer = styled.span.withConfig({
+  displayName: "ButtonStyle__StartIconContainer",
+  componentId: "sc-jyb3o2-9"
+})(["display:inline-flex;margin-right:10px;"]);
+export var EndIconContainer = styled.span.withConfig({
+  displayName: "ButtonStyle__EndIconContainer",
+  componentId: "sc-jyb3o2-10"
+})(["display:inline-flex;margin-left:10px;"]);

package/es/General/Button/GhostButton.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<(Pick<Pick<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+}, string | number | symbol> & {
+    children: React.ReactNode;
+    className?: string;
+    theme?: string;
+    disabled?: boolean;
+    block?: boolean;
+    small?: boolean;
+    tag?: React.ElementType<any>;
+    isRoundedCorner?: boolean;
+}, string | number | symbol> | Pick<Pick<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    children?: React.ReactNode;
+} & {
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+}, string | number | symbol> & {
+    children: React.ReactNode;
+    className?: string;
+    theme?: string;
+    disabled?: boolean;
+    block?: boolean;
+    small?: boolean;
+    tag?: React.ElementType<any>;
+    isRoundedCorner?: boolean;
+}, string | number | symbol>) & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/es/General/Button/GhostButton.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className", "theme", "disabled", "block", "small", "tag", "isRoundedCorner", "forwardedRef"];
+import * as React from 'react';
+import classNames from 'classnames';
+import { GhostBtnContainer, GhostBtn } from './ButtonStyle';
+var GhostButton = function GhostButton(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    theme = _ref.theme,
+    disabled = _ref.disabled,
+    block = _ref.block,
+    small = _ref.small,
+    tag = _ref.tag,
+    isRoundedCorner = _ref.isRoundedCorner,
+    forwardedRef = _ref.forwardedRef,
+    defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(GhostBtnContainer, {
+    className: classNames('aries-ghostbtn', className),
+    theme: theme,
+    disabled: disabled,
+    block: block,
+    isRoundedCorner: isRoundedCorner
+  }, /*#__PURE__*/React.createElement(GhostBtn, _extends({
+    ref: forwardedRef,
+    className: "ghostbtn-content",
+    theme: theme,
+    disabled: disabled,
+    block: block,
+    small: small,
+    as: tag || 'button',
+    isRoundedCorner: isRoundedCorner
+  }, defaultProps), children));
+};
+var forwardRef = function forwardRef(props, ref) {
+  return /*#__PURE__*/React.createElement(GhostButton, _extends({}, props, {
+    forwardedRef: ref
+  }));
+};
+forwardRef.displayName = GhostButton.name;
+export default /*#__PURE__*/React.forwardRef(forwardRef);

package/es/General/Button/LinkButton.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<(Pick<Pick<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+}, string | number | symbol> & {
+    children: React.ReactNode;
+    className: string;
+    block?: boolean;
+    tag?: React.ElementType<any>;
+}, string | number | symbol> | Pick<Pick<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    children?: React.ReactNode;
+} & {
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+}, string | number | symbol> & {
+    children: React.ReactNode;
+    className: string;
+    block?: boolean;
+    tag?: React.ElementType<any>;
+}, string | number | symbol>) & React.RefAttributes<HTMLButtonElement>>;
+export default _default;