glints-aries 4.1.3 → 4.1.4

package/es/Display/PointingModal/PointingModalHeader.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PointingModalHeaderWrapper } from './PointingModalStyle';
+declare const PointingModalHeader: React.FunctionComponent<Props>;
+declare type Props = React.ComponentPropsWithoutRef<typeof PointingModalHeaderWrapper> & {
+    children: React.ReactNode;
+};
+export default PointingModalHeader;

package/es/Display/PointingModal/PointingModalHeader.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className"];
+import * as React from 'react';
+import classNames from 'classnames';
+import { PointingModalHeaderWrapper } from './PointingModalStyle';
+var PointingModalHeader = function PointingModalHeader(props) {
+  var children = props.children,
+    className = props.className,
+    defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/React.createElement(PointingModalHeaderWrapper, _extends({
+    className: classNames('pointingmodal-header', className),
+    role: "group"
+  }, defaultProps), children);
+};
+export default PointingModalHeader;

package/es/Display/PointingModal/PointingModalItem.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PointingModalItemWrapper } from './PointingModalStyle';
+declare const PointingModalItem: React.FunctionComponent<Props>;
+declare type Props = React.ComponentPropsWithoutRef<typeof PointingModalItemWrapper> & {
+    children: React.ReactNode;
+};
+export default PointingModalItem;

package/es/Display/PointingModal/PointingModalItem.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className"];
+import * as React from 'react';
+import classNames from 'classnames';
+import { PointingModalItemWrapper } from './PointingModalStyle';
+var PointingModalItem = function PointingModalItem(props) {
+  var children = props.children,
+    className = props.className,
+    defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/React.createElement(PointingModalItemWrapper, _extends({
+    className: classNames('pointingmodal-item', className)
+  }, defaultProps), children);
+};
+export default PointingModalItem;

package/es/Display/PointingModal/PointingModalStyle.d.ts

@@ -0,0 +1,6 @@
+export declare const PointingModalContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PointingModalHeaderArrow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PointingModalHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PointingModalBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PointingModalItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const PointingModalFooterWrapper: import("styled-components").StyledComponent<"footer", any, {}, never>;

package/es/Display/PointingModal/PointingModalStyle.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { Greyscale } from '../../Utils/Colors';
+import { Shadow } from '../../Utils/Shadow';
+export var PointingModalContainer = styled.div.withConfig({
+  displayName: "PointingModalStyle__PointingModalContainer",
+  componentId: "sc-wzvi3y-0"
+})(["position:relative;background:", ";box-shadow:", ";outline:none;"], Greyscale.white, Shadow.down2);
+export var PointingModalHeaderArrow = styled.div.withConfig({
+  displayName: "PointingModalStyle__PointingModalHeaderArrow",
+  componentId: "sc-wzvi3y-1"
+})(["position:absolute;right:1em;top:-0.7em;width:1.5em;height:1.5em;transform:rotate(45deg);background-color:white;box-shadow:-2px -2px 5px rgba(0,0,0,0.06);"]);
+export var PointingModalHeaderWrapper = styled.div.withConfig({
+  displayName: "PointingModalStyle__PointingModalHeaderWrapper",
+  componentId: "sc-wzvi3y-2"
+})(["display:flex;align-items:center;padding:1.2em;> *:first-child{margin-left:0;}> *:last-child{margin-right:0;}> *{margin-left:0.5em;margin-right:0.5em;}.aries-modal-profile{font-weight:700;}span{font-size:1em;font-weight:500;}a{display:flex;color:", ";font-size:1.2em;margin:0;}"], Greyscale.black);
+export var PointingModalBodyWrapper = styled.div.withConfig({
+  displayName: "PointingModalStyle__PointingModalBodyWrapper",
+  componentId: "sc-wzvi3y-3"
+})(["position:relative;display:flex;flex-direction:column;ul{padding:1.2em 0;margin:0;}"]);
+export var PointingModalItemWrapper = styled.li.withConfig({
+  displayName: "PointingModalStyle__PointingModalItemWrapper",
+  componentId: "sc-wzvi3y-4"
+})(["font-weight:600;cursor:pointer;padding:0.5em 1.2em;list-style-type:none;&:last-child{margin-bottom:0;}*{cursor:pointer;color:", ";}&:hover{background:", ";}"], Greyscale.black, Greyscale.softgrey);
+export var PointingModalFooterWrapper = styled.footer.withConfig({
+  displayName: "PointingModalStyle__PointingModalFooterWrapper",
+  componentId: "sc-wzvi3y-5"
+})(["display:flex;position:relative;padding:1.2em;"]);

package/es/Display/PointingModal/index.d.ts

@@ -0,0 +1,2 @@
+import PointingModal from './PointingModal';
+export default PointingModal;

package/es/Display/PointingModal/index.js

@@ -0,0 +1,2 @@
+import PointingModal from './PointingModal';
+export default PointingModal;

package/es/Display/Popover/Popover.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const Popover: ({ className, children, content }: Props) => JSX.Element;
+export interface Props {
+    className?: string;
+    children: React.ReactNode;
+    /** The content to be displayed when the child element is clicked */
+    content: React.ReactNode;
+}
+export default Popover;

package/es/Display/Popover/Popover.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { ArrowDownIcon } from '../../General/Icon/components';
+import { PopoverContainer, PopoverContentWrapper, PopoverChildren, PopoverIcon, PopOverContent, PopoverItemWrapper } from './PopoverStyle';
+var Popover = function Popover(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    content = _ref.content;
+  var _React$useState = React.useState(false),
+    isOpen = _React$useState[0],
+    setIsOpen = _React$useState[1];
+  var handleOnClick = function handleOnClick() {
+    return setIsOpen(!isOpen);
+  };
+  var handleClickOutside = function handleClickOutside() {
+    return setIsOpen(false);
+  };
+  return /*#__PURE__*/React.createElement(PopoverContainer, {
+    className: classNames('aries-popover', className),
+    onBlur: handleClickOutside,
+    "aria-haspopup": "true",
+    "aria-busy": "false",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(PopoverChildren, {
+    "data-testid": "popover-children",
+    onClick: handleOnClick
+  }, children), /*#__PURE__*/React.createElement(PopoverContentWrapper, {
+    onClick: handleOnClick
+  }, /*#__PURE__*/React.createElement(PopoverItemWrapper, null, /*#__PURE__*/React.createElement(PopoverIcon, null, /*#__PURE__*/React.createElement(ArrowDownIcon, {
+    color: "black"
+  })), isOpen && /*#__PURE__*/React.createElement(PopOverContent, null, content))));
+};
+export default Popover;

package/es/Display/Popover/Popover.stories.d.ts

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

package/es/Display/Popover/Popover.test.d.ts

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

package/es/Display/Popover/PopoverStyle.d.ts

@@ -0,0 +1,6 @@
+export declare const PopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopOverContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/Display/Popover/PopoverStyle.js

@@ -0,0 +1,26 @@
+import styled, { keyframes } from 'styled-components';
+var opacityAnimation = keyframes(["0%{opacity:0}80%{opacity:1;}"]);
+export var PopoverContainer = styled.div.withConfig({
+  displayName: "PopoverStyle__PopoverContainer",
+  componentId: "sc-1cb03rg-0"
+})(["position:relative;outline:none;display:flex;justify-content:flex-end;cursor:pointer;"]);
+export var PopoverChildren = styled.div.withConfig({
+  displayName: "PopoverStyle__PopoverChildren",
+  componentId: "sc-1cb03rg-1"
+})(["position:relative;"]);
+export var PopoverContentWrapper = styled.div.withConfig({
+  displayName: "PopoverStyle__PopoverContentWrapper",
+  componentId: "sc-1cb03rg-2"
+})(["display:flex;align-items:center;margin-left:1em;"]);
+export var PopoverItemWrapper = styled.div.withConfig({
+  displayName: "PopoverStyle__PopoverItemWrapper",
+  componentId: "sc-1cb03rg-3"
+})(["position:relative;"]);
+export var PopoverIcon = styled.div.withConfig({
+  displayName: "PopoverStyle__PopoverIcon",
+  componentId: "sc-1cb03rg-4"
+})(["display:flex;font-size:1.5em;"]);
+export var PopOverContent = styled.div.withConfig({
+  displayName: "PopoverStyle__PopOverContent",
+  componentId: "sc-1cb03rg-5"
+})(["position:absolute;right:50%;top:2.5em;animation:", " 0.2s linear;z-index:10;min-width:250px;transform:translateX(calc(1em + 0.7em)) translateY(0.5em);"], opacityAnimation);

package/es/Display/Popover/index.d.ts

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

package/es/Display/Popover/index.js

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

package/es/Display/Slider/LeftArrow.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const LeftArrow: (props: Props) => JSX.Element;
+interface Props {
+    index: number;
+    previousSlide: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    arrowWhite: boolean;
+    renderLeftIcon?: (disabled: boolean) => React.ReactElement;
+}
+export default LeftArrow;

package/es/Display/Slider/LeftArrow.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ArrowBackIcon } from '../../General/Icon/components';
+import { LeftArrowContainer } from './SliderStyle';
+import { getArrowColor } from './utils';
+var LeftArrow = function LeftArrow(props) {
+  var index = props.index,
+    previousSlide = props.previousSlide,
+    arrowWhite = props.arrowWhite,
+    renderLeftIcon = props.renderLeftIcon;
+  var disabled = index === 1;
+  var color = getArrowColor(arrowWhite, disabled);
+  return /*#__PURE__*/React.createElement(LeftArrowContainer, {
+    disabled: disabled,
+    onClick: previousSlide,
+    "data-testid": "slider_left-arrow"
+  }, renderLeftIcon ? renderLeftIcon(disabled) : /*#__PURE__*/React.createElement(ArrowBackIcon, {
+    color: color
+  }));
+};
+export default LeftArrow;

package/es/Display/Slider/RightArrow.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare const RightArrow: React.FunctionComponent<Props>;
+interface Props {
+    index: number;
+    limit: number;
+    nextSlide: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    arrowWhite: boolean;
+    renderRightIcon?: (disabled: boolean) => React.ReactElement;
+}
+export default RightArrow;

package/es/Display/Slider/RightArrow.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ArrowNextIcon } from '../../General/Icon/components';
+import { RightArrowContainer } from './SliderStyle';
+import { getArrowColor } from './utils';
+var RightArrow = function RightArrow(props) {
+  var index = props.index,
+    limit = props.limit,
+    nextSlide = props.nextSlide,
+    arrowWhite = props.arrowWhite,
+    renderRightIcon = props.renderRightIcon;
+  var disabled = index === limit;
+  var color = getArrowColor(arrowWhite, disabled);
+  return /*#__PURE__*/React.createElement(RightArrowContainer, {
+    disabled: disabled,
+    onClick: nextSlide,
+    "data-testid": "slider_right-arrow"
+  }, renderRightIcon ? renderRightIcon(disabled) : /*#__PURE__*/React.createElement(ArrowNextIcon, {
+    color: color
+  }));
+};
+export default RightArrow;

package/es/Display/Slider/Slider.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export declare const Slider: {
+    ({ afterChange, children, autoplay, initialItem, className, fullContent, arrowWhite, removeDots, renderLeftIcon, renderRightIcon, containerRef, }: Props): JSX.Element;
+    Item: React.FunctionComponent<import("./SliderItem").Props>;
+};
+export interface Props {
+    children: React.ReactNode;
+    className?: string;
+    /** The index of the page that will be shown initally (before the first manual- or auto-scroll). Note that the index starts at 1. */
+    initialItem?: number;
+    /** If true, the dot controls will be superimposed on the current page */
+    fullContent?: boolean;
+    /** If true, the arrow controls will have a white color */
+    arrowWhite?: boolean;
+    /** If true, dot controls will be removed */
+    removeDots?: boolean;
+    /** Sets the left icon. Receives the "disabled" flag as an argument. */
+    renderLeftIcon?: (disabled: boolean) => React.ReactElement;
+    /** Sets the right icon. Receives the "disabled" flag as an argument. */
+    renderRightIcon?: (disabled: boolean) => React.ReactElement;
+    /** Called with the new index after a new Slider page has been shown */
+    afterChange?: (index: number) => void;
+    /** If true, the Slider will flip through its pages at a regular interval */
+    autoplay?: boolean;
+    containerRef?: React.RefObject<HTMLDivElement>;
+}
+export default Slider;

package/es/Display/Slider/Slider.js

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { isNil } from 'lodash-es';
+import classNames from 'classnames';
+import { SliderContainer, SliderContentWrapper, NavigationContainer, NavigationItem } from './SliderStyle';
+import LeftArrow from './LeftArrow';
+import RightArrow from './RightArrow';
+import SliderItem from './SliderItem';
+export var Slider = function Slider(_ref) {
+  var afterChange = _ref.afterChange,
+    children = _ref.children,
+    _ref$autoplay = _ref.autoplay,
+    autoplay = _ref$autoplay === void 0 ? false : _ref$autoplay,
+    initialItem = _ref.initialItem,
+    className = _ref.className,
+    _ref$fullContent = _ref.fullContent,
+    fullContent = _ref$fullContent === void 0 ? false : _ref$fullContent,
+    _ref$arrowWhite = _ref.arrowWhite,
+    arrowWhite = _ref$arrowWhite === void 0 ? false : _ref$arrowWhite,
+    _ref$removeDots = _ref.removeDots,
+    removeDots = _ref$removeDots === void 0 ? false : _ref$removeDots,
+    renderLeftIcon = _ref.renderLeftIcon,
+    renderRightIcon = _ref.renderRightIcon,
+    containerRef = _ref.containerRef;
+  var interval = React.useRef();
+  var privateContainerRef = React.useRef();
+  var sliderContainerRef = containerRef || privateContainerRef;
+  var _React$useState = React.useState(0),
+    translateValue = _React$useState[0],
+    setTranslateValue = _React$useState[1];
+  var _React$useState2 = React.useState(0),
+    screenSize = _React$useState2[0],
+    setScreenSize = _React$useState2[1];
+  var _React$useState3 = React.useState(1),
+    index = _React$useState3[0],
+    setIndex = _React$useState3[1];
+  var previousSlide = function previousSlide() {
+    if (index !== 1) {
+      setIndex(index - 1);
+      setTranslateValue(translateValue + screenSize);
+      if (afterChange !== undefined) {
+        afterChange(index - 1);
+      }
+    }
+  };
+  var nextSlide = function nextSlide() {
+    var childrenCount = React.Children.toArray(children).filter(function (child) {
+      return !isNil(child);
+    }).length;
+    if (index !== childrenCount) {
+      setIndex(index + 1);
+      setTranslateValue(translateValue - screenSize);
+      if (afterChange !== undefined) {
+        afterChange(index + 1);
+      }
+    }
+  };
+  var getSliderContainerDOMNode = React.useCallback(function () {
+    return ReactDOM.findDOMNode(sliderContainerRef.current);
+  }, [sliderContainerRef]);
+  var handleDotClick = function handleDotClick(idx) {
+    setIndex(idx + 1);
+    setTranslateValue(-(screenSize * idx));
+    if (afterChange !== undefined) {
+      afterChange(idx + 1);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === 37) {
+      previousSlide();
+    } else if (e.keyCode === 39) {
+      nextSlide();
+    }
+  };
+  React.useEffect(function onMount() {
+    var childrenCount = React.Children.toArray(children).filter(function (child) {
+      return !isNil(child);
+    }).length;
+    var windowWidth = getSliderContainerDOMNode().getBoundingClientRect().width;
+    setScreenSize(windowWidth);
+    if (initialItem !== undefined) {
+      if (initialItem > 0 && initialItem <= childrenCount) {
+        setTranslateValue(-(windowWidth * (initialItem - 1)));
+        setIndex(initialItem);
+      } else {
+        setTranslateValue(0);
+        setIndex(1);
+      }
+    }
+    // Disabling this warning because we want to preserver some legacy
+    // behaviour here.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useEffect(function registerAutoplay() {
+    var setSize = function setSize() {
+      var windowWidth = getSliderContainerDOMNode().getBoundingClientRect().width;
+      setScreenSize(getSliderContainerDOMNode().getBoundingClientRect().width);
+      setTranslateValue(-(windowWidth * (index - 1)));
+    };
+    var childrenCount = React.Children.toArray(children).filter(function (child) {
+      return !isNil(child);
+    }).length;
+    if (autoplay) {
+      interval.current = setInterval(function () {
+        if (index != childrenCount) {
+          setIndex(function (prevIndex) {
+            return prevIndex + 1;
+          });
+          setTranslateValue(-(screenSize * index));
+        } else {
+          setIndex(1);
+          setTranslateValue(0);
+        }
+      }, 6000);
+    }
+    window.addEventListener('resize', setSize);
+    return function unregisterAutoplay() {
+      window.removeEventListener('resize', setSize);
+      clearInterval(interval.current);
+    };
+  }, [autoplay, children, index, screenSize, getSliderContainerDOMNode]);
+  React.useEffect(function receiveProps() {
+    if (initialItem === undefined) return;
+    var windowWidth = getSliderContainerDOMNode().getBoundingClientRect().width;
+    setTranslateValue(-(windowWidth * (initialItem - 1)));
+    setIndex(initialItem);
+  }, [initialItem, getSliderContainerDOMNode]);
+  var childrenCount = React.Children.toArray(children).filter(function (child) {
+    return !isNil(child);
+  }).length;
+  return /*#__PURE__*/React.createElement(SliderContainer, {
+    ref: sliderContainerRef,
+    className: classNames('aries-slider', className),
+    onKeyDown: handleKeyDown,
+    fullContent: fullContent,
+    tabIndex: 0,
+    "data-testid": "slider"
+  }, /*#__PURE__*/React.createElement(SliderContentWrapper, {
+    className: "slider-wrapper",
+    style: {
+      transform: "translateX(" + translateValue + "px)",
+      transition: 'transform ease-out 0.45s'
+    }
+  }, children), /*#__PURE__*/React.createElement(LeftArrow, {
+    previousSlide: previousSlide,
+    index: index,
+    arrowWhite: arrowWhite,
+    renderLeftIcon: renderLeftIcon
+  }), /*#__PURE__*/React.createElement(RightArrow, {
+    nextSlide: nextSlide,
+    index: index,
+    limit: childrenCount,
+    arrowWhite: arrowWhite,
+    renderRightIcon: renderRightIcon
+  }), !removeDots && /*#__PURE__*/React.createElement(NavigationContainer, null, React.Children.map(children, function (data, idx) {
+    if (isNil(data)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(NavigationItem, {
+      className: idx + 1 === index ? 'active' : null,
+      onClick: function onClick() {
+        return handleDotClick(idx);
+      },
+      key: idx
+    });
+  })));
+};
+Slider.Item = SliderItem;
+export default Slider;

package/es/Display/Slider/Slider.stories.d.ts

@@ -0,0 +1,12 @@
+import { Story, Meta } from '@storybook/react';
+import { Props } from './Slider';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const Autoplay: any;
+export declare const FullContent: any;
+export declare const ArrowWhite: any;
+export declare const RemoveDots: any;
+export declare const InitialItem: any;
+export declare const CustomizedRenderLeftIcon: Story<Props>;
+export declare const CustomizedRenderRightIcon: Story<Props>;

package/es/Display/Slider/Slider.test.d.ts

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

package/es/Display/Slider/SliderItem.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare const SliderItem: React.FunctionComponent<Props>;
+export interface Props {
+    children: React.ReactNode;
+}
+export default SliderItem;

package/es/Display/Slider/SliderItem.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SliderItemWrapper } from './SliderStyle';
+var SliderItem = function SliderItem(props) {
+  var children = props.children;
+  return /*#__PURE__*/React.createElement(SliderItemWrapper, {
+    className: "slider-item"
+  }, children);
+};
+export default SliderItem;

package/es/Display/Slider/SliderStyle.d.ts

@@ -0,0 +1,14 @@
+export declare const SliderContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SliderItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface ArrowContainerProps {
+    disabled: boolean;
+}
+export declare const LeftArrowContainer: import("styled-components").StyledComponent<"div", any, ArrowContainerProps, never>;
+export declare const RightArrowContainer: import("styled-components").StyledComponent<"div", any, ArrowContainerProps, never>;
+export declare const SliderContainer: import("styled-components").StyledComponent<"div", any, SliderContainerProps, never>;
+export declare const NavigationContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const NavigationItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+interface SliderContainerProps {
+    fullContent: boolean;
+}
+export {};

package/es/Display/Slider/SliderStyle.js

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+import { Greyscale, PrimaryColor } from '../../Utils/Colors';
+import { ScreenSize } from '../../Utils/StyleConfig';
+var arrow = css(["position:absolute;display:flex;top:50%;transform:translateY(-50%);cursor:pointer;font-size:2em;"]);
+export var SliderContentWrapper = styled.div.withConfig({
+  displayName: "SliderStyle__SliderContentWrapper",
+  componentId: "sc-1wof4f4-0"
+})(["position:relative;display:flex;align-items:center;"]);
+export var SliderItemWrapper = styled.div.withConfig({
+  displayName: "SliderStyle__SliderItemWrapper",
+  componentId: "sc-1wof4f4-1"
+})(["display:inline-flex;flex:0 0 auto;justify-content:center;width:100%;white-space:normal;"]);
+export var LeftArrowContainer = styled.div.withConfig({
+  displayName: "SliderStyle__LeftArrowContainer",
+  componentId: "sc-1wof4f4-2"
+})(["", ";left:0;cursor:", ";"], arrow, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+});
+export var RightArrowContainer = styled.div.withConfig({
+  displayName: "SliderStyle__RightArrowContainer",
+  componentId: "sc-1wof4f4-3"
+})(["", ";right:0;cursor:", ";"], arrow, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+});
+export var SliderContainer = styled.div.withConfig({
+  displayName: "SliderStyle__SliderContainer",
+  componentId: "sc-1wof4f4-4"
+})(["position:relative;white-space:nowrap;overflow:hidden;outline:none;", "{padding:", ";}"], SliderItemWrapper, function (_ref3) {
+  var fullContent = _ref3.fullContent;
+  return !fullContent && '2em 4em';
+});
+export var NavigationContainer = styled.ul.withConfig({
+  displayName: "SliderStyle__NavigationContainer",
+  componentId: "sc-1wof4f4-5"
+})(["position:absolute;bottom:0;width:100%;padding:0;margin:10px 0;display:flex;justify-content:center;align-items:center;"]);
+export var NavigationItem = styled.li.withConfig({
+  displayName: "SliderStyle__NavigationItem",
+  componentId: "sc-1wof4f4-6"
+})(["display:inline-flex;width:6px;height:6px;background:", ";border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,0.15);margin:0 3px;cursor:pointer;&.active{width:20px;height:6px;border-radius:8px;background:", ";}@media (min-width:", "px){width:8px;height:8px;margin:0 4px;&.active{width:30px;height:10px;}}"], Greyscale.lightgrey, PrimaryColor.glintsyellow, ScreenSize.tablet);

package/es/Display/Slider/index.d.ts

@@ -0,0 +1,2 @@
+import Slider from './Slider';
+export default Slider;

package/es/Display/Slider/index.js

@@ -0,0 +1,2 @@
+import Slider from './Slider';
+export default Slider;

package/es/Display/Slider/utils.d.ts

@@ -0,0 +1 @@
+export declare const getArrowColor: (isWhite: boolean, isDisabled: boolean) => string;

package/es/Display/Slider/utils.js

@@ -0,0 +1,5 @@
+import { Greyscale } from '../../Utils/Colors';
+export var getArrowColor = function getArrowColor(isWhite, isDisabled) {
+  var color = isWhite ? Greyscale.white : Greyscale.black;
+  return isDisabled ? '#c7c7c7' : color;
+};

package/es/Display/Swipeable/Swipeable.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import SwipeableItem from './SwipeableItem';
+/** You can add any number of  <Swipeable.Item />  components as children of the Swipeable component, controlling the behavior of an individual swipeable item.  */
+export declare const Swipeable: SwipeableType;
+declare type SwipeableType = React.FunctionComponent<Props> & {
+    Item: typeof SwipeableItem;
+};
+export interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+export default Swipeable;

package/es/Display/Swipeable/Swipeable.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { SwipeableContainer } from './SwipeableStyle';
+import SwipeableItem from './SwipeableItem';
+
+/** You can add any number of  <Swipeable.Item />  components as children of the Swipeable component, controlling the behavior of an individual swipeable item.  */
+export var Swipeable = function Swipeable(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(SwipeableContainer, {
+    className: classNames('aries-swipeable', className)
+  }, children);
+};
+Swipeable.Item = SwipeableItem;
+export default Swipeable;

package/es/Display/Swipeable/Swipeable.stories.d.ts

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

package/es/Display/Swipeable/Swipeable.test.d.ts

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

package/es/Display/Swipeable/SwipeableItem.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SwipeableItemWrapper } from './SwipeableStyle';
+declare const SwipeableItem: React.FunctionComponent<Props>;
+declare type Props = React.ComponentPropsWithoutRef<typeof SwipeableItemWrapper> & {
+    children: React.ReactNode;
+};
+export default SwipeableItem;

package/es/Display/Swipeable/SwipeableItem.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className"];
+import * as React from 'react';
+import classNames from 'classnames';
+import { SwipeableItemWrapper } from './SwipeableStyle';
+var SwipeableItem = function SwipeableItem(props) {
+  var children = props.children,
+    className = props.className,
+    defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/React.createElement(SwipeableItemWrapper, _extends({
+    className: classNames('swipeable-itemwrapper', className)
+  }, defaultProps), children);
+};
+export default SwipeableItem;