glints-aries 4.1.3 → 4.1.4

package/es/@next/Modal/ModalStyle.d.ts

@@ -0,0 +1,11 @@
+import { ModalProps } from './Modal';
+export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", any, Pick<ModalProps, "zIndexOverride">, never>;
+export declare const StyledModalContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledModalBackButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledModalCloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledModalLeftAndRightComponent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Modal/ModalStyle.js

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { borderRadius8 } from '../utilities/borderRadius';
+import { Neutral } from '../utilities/colors';
+import { space16, space24 } from '../utilities/spacing';
+export var StyledModalWrapper = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalWrapper",
+  componentId: "sc-1694up4-0"
+})(["position:fixed;inset:0;background-color:rgba(45,45,45,0.5);display:flex;gap:", ";align-items:center;justify-content:center;overflow:hidden;z-index:", ";"], space24, function (props) {
+  return props.zIndexOverride;
+});
+export var StyledModalContainer = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalContainer",
+  componentId: "sc-1694up4-1"
+})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100vh - 96px);overflow:hidden;@media (max-width:", "){position:fixed;bottom:0;width:100vw;max-width:none;max-height:calc(100vh - 70px);border-radius:0;}"], Neutral.B100, borderRadius8, Breakpoints.large);
+export var StyledModalHeader = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalHeader",
+  componentId: "sc-1694up4-2"
+})(["display:flex;flex-direction:row;align-items:center;box-shadow:inset 0px -1px 0px ", ";border-radius:", " ", " 0 0;align-self:stretch;div{flex:1;}&[data-header-has-default-padding='true']{padding:", " 20px;@media (max-width:", "){padding:", ";}}&[data-show-border='false']{box-shadow:unset;}"], Neutral.B95, borderRadius8, borderRadius8, space16, Breakpoints.large, space16);
+export var StyledModalContent = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalContent",
+  componentId: "sc-1694up4-3"
+})(["min-height:24px;color:#202223;width:fit-content;padding:20px;overflow:auto;::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}::-webkit-scrollbar-thumb:hover{background-color:", ";}@media (max-width:", "){padding:20px 16px;&[data-has-scrollbar='true']{padding:20px 6px 20px 16px;width:calc(100vw - 27px);}}"], Neutral.B68, Neutral.B40, Breakpoints.large);
+export var StyledModalActions = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalActions",
+  componentId: "sc-1694up4-4"
+})(["display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;align-self:stretch;padding:", " 20px;gap:10px;box-shadow:inset 0px 1px 0px ", ";border-radius:0 0 ", " ", ";@media (max-width:", "){padding:", ";}"], space16, Neutral.B95, borderRadius8, borderRadius8, Breakpoints.large, space16);
+export var StyledButtonContainer = styled.div.withConfig({
+  displayName: "ModalStyle__StyledButtonContainer",
+  componentId: "sc-1694up4-5"
+})(["display:contents;"]);
+export var StyledModalButton = styled.button.withConfig({
+  displayName: "ModalStyle__StyledModalButton",
+  componentId: "sc-1694up4-6"
+})(["cursor:pointer;border:0;background:transparent;padding:0;svg{width:24px;height:24px;fill:", ";}&[data-has-decription='true']{margin-top:-20px;}@media (max-width:", "){&[data-has-decription='true']{margin-top:-18px;}}"], Neutral.B40, Breakpoints.large);
+export var StyledModalBackButton = styled(StyledModalButton).withConfig({
+  displayName: "ModalStyle__StyledModalBackButton",
+  componentId: "sc-1694up4-7"
+})(["margin-right:16px;"]);
+export var StyledModalCloseButton = styled(StyledModalButton).withConfig({
+  displayName: "ModalStyle__StyledModalCloseButton",
+  componentId: "sc-1694up4-8"
+})(["margin-left:16px;"]);
+export var StyledModalLeftAndRightComponent = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalLeftAndRightComponent",
+  componentId: "sc-1694up4-9"
+})(["@media (max-width:", "){display:none;}"], Breakpoints.large);

package/es/@next/Modal/ModalWithProvider.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ModalWithProvider: () => JSX.Element;

package/es/@next/Modal/ModalWithProvider.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["close", "onClose"],
+  _excluded2 = ["isOpen"];
+import React from 'react';
+import { Modal } from './Modal';
+import { useModal } from './useModal';
+export var ModalWithProvider = function ModalWithProvider() {
+  var _useModal = useModal(),
+    close = _useModal.close,
+    _onClose = _useModal.onClose,
+    rest = _objectWithoutPropertiesLoose(_useModal, _excluded);
+  var isOpen = rest.isOpen,
+    modalProps = _objectWithoutPropertiesLoose(rest, _excluded2);
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, modalProps, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      close();
+      _onClose == null ? void 0 : _onClose();
+    }
+  }));
+};

package/es/@next/Modal/ModalWithProvider.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 WithLockedScrollableBackdrop: any;

package/es/@next/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Modal';
+export * from './useModal';
+export * from './ModalContext';
+export * from './ModalProvider';
+export * from './ModalWithProvider';

package/es/@next/Modal/index.js

@@ -0,0 +1,5 @@
+export * from './Modal';
+export * from './useModal';
+export * from './ModalContext';
+export * from './ModalProvider';
+export * from './ModalWithProvider';

package/es/@next/Modal/modalStoryHelper/ModalStoryStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Modal").ModalProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/es/@next/Modal/modalStoryHelper/ModalStoryStyle.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Modal } from '../Modal';
+export var SelectWrapper = styled.div.withConfig({
+  displayName: "ModalStoryStyle__SelectWrapper",
+  componentId: "sc-2frqws-0"
+})(["width:100%;height:100%;display:flex;"]);
+export var StyledModal = styled(Modal).withConfig({
+  displayName: "ModalStoryStyle__StyledModal",
+  componentId: "sc-2frqws-1"
+})(["height:600px;width:800px;.modal-content{height:100%;}"]);

package/es/@next/Modal/useModal.d.ts

@@ -0,0 +1 @@
+export declare const useModal: () => import("./ModalContext").ModalContextProps;

package/es/@next/Modal/useModal.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ModalContext } from './ModalContext';
+export var useModal = function useModal() {
+  var context = useContext(ModalContext);
+  if (!context) {
+    throw new Error('No ModalContext was provided via "ModalProvider", to use this hook you must provide them in your app root.');
+  }
+  return context;
+};

package/es/@next/NumberInput/NumberInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputProps } from '../Input/Input';
+export declare type NumberInputProps = Omit<InputProps, 'type' | 'prefix'>;
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/es/@next/NumberInput/NumberInput.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import styled from 'styled-components';
+import { Input } from '../Input/Input';
+var StyledInput = styled(Input).withConfig({
+  displayName: "NumberInput__StyledInput",
+  componentId: "sc-1f5ws9y-0"
+})(["&[type='number']{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}&[type='number']::-webkit-inner-spin-button,&[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;}"]);
+export var NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, ref) {
+  return /*#__PURE__*/React.createElement(StyledInput, _extends({
+    ref: ref,
+    type: "number"
+  }, props));
+});

package/es/@next/NumberInput/NumberInput.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/@next/NumberInput/index.d.ts

@@ -0,0 +1 @@
+export * from './NumberInput';

package/es/@next/NumberInput/index.js

@@ -0,0 +1 @@
+export * from './NumberInput';

package/es/@next/Pagination/IconPagination.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconPaginationProps } from './paginationUtils';
+export declare const IconPagination: React.ForwardRefExoticComponent<IconPaginationProps & React.RefAttributes<HTMLElement>>;

package/es/@next/Pagination/IconPagination.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IconPaginationStyledNav, StyledBorderPaginationButton, StyledLabel } from './PaginationStyle';
+import { Icon } from '../Icon';
+export var IconPagination = /*#__PURE__*/React.forwardRef(function IconPagination(_ref, ref) {
+  var label = _ref.label,
+    disableNext = _ref.disableNext,
+    disablePrevious = _ref.disablePrevious,
+    onNext = _ref.onNext,
+    onPrevious = _ref.onPrevious;
+  return /*#__PURE__*/React.createElement(IconPaginationStyledNav, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(StyledBorderPaginationButton, {
+    "data-testid": "previous-page",
+    disabled: disablePrevious,
+    onClick: onPrevious
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-left-line"
+  })), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledBorderPaginationButton, {
+    "data-testid": "next-page",
+    disabled: disableNext,
+    onClick: onNext
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-right-line"
+  })));
+});

package/es/@next/Pagination/IconPagination.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 WithLabel: any;

package/es/@next/Pagination/PageButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface PageButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    children?: React.ReactNode;
+    value?: number;
+    active?: boolean;
+    onClick?: (page: number) => void;
+}
+export declare const PageButton: ({ value, active, children, onClick, ...props }: PageButtonProps) => JSX.Element;

package/es/@next/Pagination/PageButton.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "active", "children", "onClick"];
+import React from 'react';
+import { Typography } from '../Typography';
+import { StyledPageButton } from './PaginationStyle';
+export var PageButton = function PageButton(_ref) {
+  var value = _ref.value,
+    active = _ref.active,
+    children = _ref.children,
+    _onClick = _ref.onClick,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var content = children ? children : value;
+  return /*#__PURE__*/React.createElement(StyledPageButton, _extends({
+    "data-active": active,
+    onClick: function onClick() {
+      return _onClick == null ? void 0 : _onClick(value);
+    }
+  }, props), /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle2"
+  }, content));
+};

package/es/@next/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PaginationProps } from './paginationUtils';
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;

package/es/@next/Pagination/Pagination.js

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value"];
+import React from 'react';
+import { PageButton } from './PageButton';
+import { StyledNav } from './PaginationStyle';
+import { defaultBufferSize, defaultPageSize, getAllPages, getBufferSize } from './paginationUtils';
+import { NextStepper, PreviousStepper } from './Stepper';
+export var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_ref, ref) {
+  var _ref$totalItems = _ref.totalItems,
+    totalItems = _ref$totalItems === void 0 ? 1 : _ref$totalItems,
+    _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
+    disabled = _ref.disabled,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? defaultPageSize : _ref$pageSize,
+    onPageChanged = _ref.onPageChanged;
+  var pageList = [];
+  var totalPages = getAllPages(pageSize, totalItems);
+  var bufferSize = getBufferSize(defaultBufferSize, totalPages);
+  var beginFoldPage = 1 + 2 + bufferSize;
+  var endFoldPage = totalPages - 2 - bufferSize;
+  var handlePagerClick = function handlePagerClick(value) {
+    if (value < 1 || value > totalPages) {
+      return;
+    }
+    onPageChanged == null ? void 0 : onPageChanged(value);
+  };
+  var Pager = function Pager(_ref2) {
+    var value = _ref2.value,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    return /*#__PURE__*/React.createElement(PageButton, _extends({}, props, {
+      value: value,
+      onClick: handlePagerClick,
+      disabled: disabled,
+      active: currentPage === value
+    }));
+  };
+  if (
+  // beginPage(1 page) + bufferSize * 2 + endPage(1 page) + ...(2 pages)
+  totalPages <= 4 + bufferSize * 2 || currentPage === beginFoldPage && currentPage === endFoldPage) {
+    for (var i = 1; i <= totalPages; i++) {
+      pageList.push( /*#__PURE__*/React.createElement(Pager, {
+        key: i,
+        value: i
+      }));
+    }
+  } else {
+    var left = 1;
+    var right = totalPages;
+    var hasJumpPre = true;
+    var hasJumpNext = true;
+    var calculateNextJumpPage = function calculateNextJumpPage(jumpPage) {
+      var minCurrent = totalPages > 0 ? 1 : 0;
+      var nextPage = Math.min(totalPages, Math.max(minCurrent, currentPage + jumpPage));
+      return nextPage;
+    };
+
+    // when first and last page not within reach from current page
+    if (currentPage > beginFoldPage && currentPage < endFoldPage) {
+      right = currentPage + bufferSize;
+      left = currentPage - bufferSize;
+      // first page is within reach from current page
+    } else if (currentPage <= beginFoldPage) {
+      hasJumpPre = false;
+      left = 1;
+      right = Math.max(beginFoldPage, bufferSize + currentPage);
+      // last page within reach from current page
+    } else if (currentPage >= endFoldPage) {
+      hasJumpNext = false;
+      right = totalPages;
+      left = Math.min(endFoldPage, currentPage - bufferSize);
+    }
+    for (var _i = left; _i <= right; _i++) {
+      pageList.push( /*#__PURE__*/React.createElement(Pager, {
+        key: _i,
+        value: _i
+      }));
+    }
+    var jumpPre = calculateNextJumpPage(-(bufferSize * 2 + 1));
+    var jumpNext = calculateNextJumpPage(bufferSize * 2 + 1);
+    var FirstPager = /*#__PURE__*/React.createElement(Pager, {
+      value: 1,
+      key: 1
+    });
+    var LastPager = /*#__PURE__*/React.createElement(Pager, {
+      value: totalPages,
+      key: totalPages
+    });
+    if (hasJumpPre) {
+      pageList.unshift( /*#__PURE__*/React.createElement(Pager, {
+        key: "jump-pre",
+        "data-testid": "previous-jumper",
+        value: jumpPre
+      }, "..."));
+      pageList.unshift(FirstPager);
+    }
+    if (hasJumpNext) {
+      pageList.push( /*#__PURE__*/React.createElement(Pager, {
+        key: "jump-next",
+        "data-testid": "next-jumper",
+        value: jumpNext
+      }, "..."));
+      pageList.push(LastPager);
+    }
+  }
+  var hasPrevious = currentPage - 1 > 0;
+  var hasNext = currentPage + 1 <= totalPages;
+  pageList.unshift( /*#__PURE__*/React.createElement(PreviousStepper, {
+    key: "prev-stepper",
+    value: currentPage - 1,
+    disabled: !hasPrevious || disabled,
+    onClick: handlePagerClick
+  }));
+  pageList.push( /*#__PURE__*/React.createElement(NextStepper, {
+    key: "next-stepper",
+    value: currentPage + 1,
+    disabled: !hasNext || disabled,
+    onClick: handlePagerClick
+  }));
+  return /*#__PURE__*/React.createElement(StyledNav, {
+    ref: ref
+  }, pageList);
+});

package/es/@next/Pagination/Pagination.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/@next/Pagination/PaginationStyle.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PageButtonProps } from './PageButton';
+export declare const StyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const SimplePaginationStyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const IconPaginationStyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const StyledPageButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
+export declare const StyledSimplePaginationButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
+export declare const StyledBorderPaginationButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledActiveSimplePaginationButton: import("styled-components").StyledComponent<(props: PageButtonProps) => JSX.Element, any, {}, never>;
+export declare const StyledSimplePaginationInput: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../NumberInput").NumberInputProps & React.RefAttributes<HTMLInputElement>>, any, {}, never>;

package/es/@next/Pagination/PaginationStyle.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import { NumberInput } from '../NumberInput';
+import { borderRadius2, borderRadius4 } from '../utilities/borderRadius';
+import { Blue, Neutral } from '../utilities/colors';
+import { space12, space4 } from '../utilities/spacing';
+import { PageButton } from './PageButton';
+export var StyledNav = styled.nav.withConfig({
+  displayName: "PaginationStyle__StyledNav",
+  componentId: "sc-1hi5sa8-0"
+})(["display:flex;gap:10px;"]);
+export var SimplePaginationStyledNav = styled(StyledNav).withConfig({
+  displayName: "PaginationStyle__SimplePaginationStyledNav",
+  componentId: "sc-1hi5sa8-1"
+})(["gap:4px;"]);
+export var IconPaginationStyledNav = styled(StyledNav).withConfig({
+  displayName: "PaginationStyle__IconPaginationStyledNav",
+  componentId: "sc-1hi5sa8-2"
+})(["gap:0px;align-items:center;column-gap:1px;"]);
+export var StyledPageButton = styled.button.withConfig({
+  displayName: "PaginationStyle__StyledPageButton",
+  componentId: "sc-1hi5sa8-3"
+})(["cursor:pointer;height:32px;min-width:32px;border:0;background:transparent;border-radius:", ";padding:", ";color:", ";&:hover{background:", ";}&:disabled{color:", ";}svg{fill:", ";width:24px;height:24px;}&[data-active='true']{background:", ";color:", ";}&:disabled svg{fill:", ";}&[data-active='true']:disabled{background:", ";color:", ";}"], borderRadius2, space4, Neutral.B18, Neutral.B95, Neutral.B85, Neutral.B40, Blue.S08, Blue.S99, Neutral.B85, Neutral.B95, Neutral.B85);
+export var StyledSimplePaginationButton = styled(StyledPageButton).withConfig({
+  displayName: "PaginationStyle__StyledSimplePaginationButton",
+  componentId: "sc-1hi5sa8-4"
+})(["pointer-events:none;"]);
+export var StyledBorderPaginationButton = styled(StyledPageButton).withConfig({
+  displayName: "PaginationStyle__StyledBorderPaginationButton",
+  componentId: "sc-1hi5sa8-5"
+})(["outline:1px solid ", ";height:36px;min-width:36px;svg{vertical-align:middle;}&:first-of-type{border-radius:", " 0 0 ", ";}&:last-of-type{border-radius:0 ", " ", " 0;}&:hover{background:", ";}&:disabled{background:", ";}"], Neutral.B85, borderRadius4, borderRadius4, borderRadius4, borderRadius4, Blue.S08, Neutral.B95);
+export var StyledLabel = styled.div.withConfig({
+  displayName: "PaginationStyle__StyledLabel",
+  componentId: "sc-1hi5sa8-6"
+})(["padding:0 ", " 0;vertical-align:middle;"], space12);
+export var StyledActiveSimplePaginationButton = styled(function (props) {
+  return /*#__PURE__*/React.createElement(PageButton, props);
+}).withConfig({
+  displayName: "PaginationStyle__StyledActiveSimplePaginationButton",
+  componentId: "sc-1hi5sa8-7"
+})(["background:", ";color:", ";&:hover{background:", ";color:", ";}"], Blue.S08, Blue.S99, Neutral.B95, Neutral.B18);
+export var StyledSimplePaginationInput = styled(NumberInput).withConfig({
+  displayName: "PaginationStyle__StyledSimplePaginationInput",
+  componentId: "sc-1hi5sa8-8"
+})(["padding:0;text-align:center;height:32px;width:32px;"]);

package/es/@next/Pagination/SimplePagination.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PaginationProps } from './paginationUtils';
+export declare const SimplePagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;

package/es/@next/Pagination/SimplePagination.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Typography } from '../Typography';
+import { StyledActiveSimplePaginationButton, StyledSimplePaginationInput, StyledSimplePaginationButton, SimplePaginationStyledNav } from './PaginationStyle';
+import { defaultPageSize, getAllPages } from './paginationUtils';
+import { NextStepper, PreviousStepper } from './Stepper';
+export var SimplePagination = /*#__PURE__*/React.forwardRef(function SimplePagination(_ref, ref) {
+  var _ref$totalItems = _ref.totalItems,
+    totalItems = _ref$totalItems === void 0 ? 1 : _ref$totalItems,
+    _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
+    disabled = _ref.disabled,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? defaultPageSize : _ref$pageSize,
+    onPageChanged = _ref.onPageChanged;
+  var _useState = useState(false),
+    editMode = _useState[0],
+    setEditMode = _useState[1];
+  var totalPages = getAllPages(pageSize, totalItems);
+  var hasPrevious = currentPage - 1 > 0;
+  var hasNext = currentPage + 1 <= totalPages;
+  var handlePageNumberChange = function handlePageNumberChange(value) {
+    var page = value;
+    if (value < 1) {
+      page = 1;
+    }
+    if (value > totalPages) {
+      page = totalPages;
+    }
+    onPageChanged == null ? void 0 : onPageChanged(page);
+  };
+  var handleEditMode = function handleEditMode() {
+    if (editMode) {
+      return;
+    }
+    setEditMode(true);
+  };
+  var handleFocus = function handleFocus(e) {
+    e.target.select();
+  };
+  return /*#__PURE__*/React.createElement(SimplePaginationStyledNav, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(PreviousStepper, {
+    value: currentPage - 1,
+    disabled: !hasPrevious || disabled,
+    onClick: handlePageNumberChange
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "current-page-btn",
+    onClick: handleEditMode
+  }, !editMode && /*#__PURE__*/React.createElement(StyledActiveSimplePaginationButton, {
+    value: currentPage,
+    disabled: disabled,
+    onClick: handlePageNumberChange
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle2"
+  }, currentPage)), editMode && /*#__PURE__*/React.createElement(StyledSimplePaginationInput, {
+    "data-testid": "current-page-input",
+    autoFocus: true,
+    onFocus: handleFocus,
+    onChange: function onChange(e) {
+      handlePageNumberChange(Number(e.currentTarget.value));
+    },
+    onBlur: function onBlur() {
+      return setEditMode(false);
+    },
+    value: currentPage
+  })), /*#__PURE__*/React.createElement(StyledSimplePaginationButton, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle2"
+  }, "/")), /*#__PURE__*/React.createElement(StyledSimplePaginationButton, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle2"
+  }, totalPages)), /*#__PURE__*/React.createElement(NextStepper, {
+    value: currentPage + 1,
+    disabled: !hasNext || disabled,
+    onClick: handlePageNumberChange
+  }));
+});

package/es/@next/Pagination/SimplePagination.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/@next/Pagination/Stepper.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PageButtonProps } from './PageButton';
+export declare const PreviousStepper: (props: Partial<PageButtonProps>) => JSX.Element;
+export declare const NextStepper: (props: Partial<PageButtonProps>) => JSX.Element;

package/es/@next/Pagination/Stepper.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Icon } from '../Icon';
+import { PageButton } from './PageButton';
+export var PreviousStepper = function PreviousStepper(props) {
+  return /*#__PURE__*/React.createElement(PageButton, _extends({
+    "data-testid": "previous-page"
+  }, props), /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-left-line"
+  }));
+};
+export var NextStepper = function NextStepper(props) {
+  return /*#__PURE__*/React.createElement(PageButton, _extends({
+    "data-testid": "next-page"
+  }, props), /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-right-line"
+  }));
+};

package/es/@next/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Pagination';
+export * from './IconPagination';
+export * from './SimplePagination';
+export type { PaginationProps, IconPaginationProps } from './paginationUtils';

package/es/@next/Pagination/index.js

@@ -0,0 +1,4 @@
+export * from './Pagination';
+export * from './IconPagination';
+export * from './SimplePagination';
+export {};

package/es/@next/Pagination/paginationUtils.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare type PaginationProps = {
+    /** Total items to be displayed, must be positive integer and above 0 */
+    totalItems: number;
+    /** Current page, must be positive integer and above 0 */
+    currentPage?: number;
+    /** Size of a page, must be positive integer and above 0 */
+    pageSize?: number;
+    disabled?: boolean;
+    onPageChanged?: (currentPage: number) => void;
+};
+export declare type IconPaginationProps = {
+    label?: React.ReactNode;
+    disableNext?: boolean;
+    disablePrevious?: boolean;
+    onNext?: () => void;
+    onPrevious?: () => void;
+};
+export declare const defaultPageSize = 10;
+export declare const defaultBufferSize = 2;
+export declare const getAllPages: (pageSize: number, total: number) => number;
+export declare const getBufferSize: (bufferSize: number, allPages: number) => number;

package/es/@next/Pagination/paginationUtils.js

@@ -0,0 +1,15 @@
+export var defaultPageSize = 10;
+export var defaultBufferSize = 2;
+export var getAllPages = function getAllPages(pageSize, total) {
+  if (pageSize < 1) {
+    console.warn('pageSize must be above 0');
+    return 0;
+  }
+  return Math.ceil(total / pageSize);
+};
+export var getBufferSize = function getBufferSize(bufferSize, allPages) {
+  var min = 0;
+  var max = Math.floor(allPages / 2) - 1;
+  var newBufferSize = Math.max(bufferSize, min);
+  return Math.min(newBufferSize, max);
+};

package/es/@next/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type PasswordInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
+    onChange?: (value: string) => void;
+    error?: boolean;
+};
+export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
+    onChange?: (value: string) => void;
+    error?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;