@node-core/ui-components 1.0.1-1b9af3ec9e0268bfc734b2489cbc584fa3edf026 → 1.0.1-1ccf19c1836415b6ec7bc2d63ffba4686b390ca9

package/styles/markdown.css

@@ -0,0 +1,173 @@
+main {
+  @apply flex
+    w-full
+    flex-col
+    gap-6;
+
+  hr {
+    @apply w-full
+      border-t
+      border-t-neutral-200
+      bg-white
+      dark:border-t-neutral-900
+      dark:bg-neutral-950;
+  }
+
+  h1 {
+    @apply text-3xl;
+  }
+
+  h2 {
+    @apply text-2xl;
+  }
+
+  h3 {
+    @apply text-xl;
+  }
+
+  h4 {
+    @apply text-lg;
+  }
+
+  h5,
+  h6 {
+    @apply text-base;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-semibold
+      text-neutral-900
+      dark:text-white;
+
+    &[id] a {
+      @apply text-neutral-900
+        dark:text-white;
+    }
+  }
+
+  strong {
+    @apply font-semibold;
+  }
+
+  code {
+    @apply font-ibm-plex-mono
+      rounded-xs
+      bg-neutral-100
+      px-1
+      text-base
+      font-semibold
+      text-neutral-900
+      dark:bg-neutral-900
+      dark:text-white;
+  }
+
+  p {
+    @apply text-neutral-900
+      dark:text-white;
+  }
+
+  /* link that isn't inside a heading */
+  a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
+  .anchor {
+    @apply max-xs:font-semibold
+      text-green-600
+      dark:text-green-400;
+
+    &:hover {
+      @apply text-green-900
+        dark:text-green-300;
+    }
+
+    &[role='button'] {
+      @apply max-xs:font-regular;
+    }
+
+    &:has(code) {
+      @apply max-xs:decoration-neutral-800
+        dark:max-xs:decoration-neutral-200;
+
+      code {
+        @apply text-inherit;
+      }
+    }
+  }
+
+  ul {
+    @apply list-disc
+      pl-9
+      pr-5
+      leading-6
+      text-neutral-900
+      dark:text-white;
+
+    li div:has(> pre) {
+      @apply my-1!;
+    }
+  }
+
+  ol {
+    @apply list-decimal
+      px-5
+      leading-6
+      text-neutral-900
+      dark:text-white;
+
+    li div:has(> pre) {
+      @apply my-1!;
+    }
+  }
+
+  table {
+    @apply rounded-xs
+      mb-1
+      w-full
+      border-separate
+      border-spacing-0
+      border
+      border-neutral-200
+      text-left
+      text-sm
+      dark:border-neutral-800;
+
+    th,
+    td {
+      @apply max-xs:block
+        max-xs:border-l-0
+        border
+        border-r-0
+        border-t-0
+        border-neutral-200
+        px-4
+        py-2
+        text-neutral-900
+        dark:border-neutral-800
+        dark:text-white;
+
+      > a {
+        @apply pr-2;
+      }
+    }
+
+    th {
+      @apply font-semibold;
+    }
+
+    tr:last-child td {
+      @apply sm:border-b-0;
+
+      &:last-child {
+        @apply max-xs:border-b-0;
+      }
+    }
+
+    td:first-child,
+    th:first-child {
+      @apply sm:border-l-0;
+    }
+  }
+}

package/styles/theme.css

@@ -0,0 +1,175 @@
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@source '../Common';
+@source '../Containers';
+@source '../Icons';
+
+@theme {
+  --color-green-100: #edf2eb;
+  --color-green-200: #c5e5b4;
+  --color-green-300: #99cc7d;
+  --color-green-400: #84ba64;
+  --color-green-500: #5fa04e;
+  --color-green-600: #417e38;
+  --color-green-700: #2c682c;
+  --color-green-800: #2c682c;
+  --color-green-900: #1a3f1d;
+  --color-neutral-100: #f6f7f9;
+  --color-neutral-200: #e9edf0;
+  --color-neutral-300: #d9e1e4;
+  --color-neutral-400: #cbd4d9;
+  --color-neutral-500: #b1bcc2;
+  --color-neutral-600: #929fa5;
+  --color-neutral-700: #6e7b83;
+  --color-neutral-800: #556066;
+  --color-neutral-900: #2c3437;
+  --color-neutral-950: #0d121c;
+  --color-danger-100: #fbf1f0;
+  --color-danger-200: #fad3d4;
+  --color-danger-300: #fab6b7;
+  --color-danger-400: #fa8e8e;
+  --color-danger-500: #f65354;
+  --color-danger-600: #de1a1b;
+  --color-danger-700: #b80c0c;
+  --color-danger-800: #900e0e;
+  --color-danger-900: #661514;
+  --color-warning-100: #fdf3e7;
+  --color-warning-200: #fad9b0;
+  --color-warning-300: #f5bc75;
+  --color-warning-400: #e99c40;
+  --color-warning-500: #d07912;
+  --color-warning-600: #ae5f00;
+  --color-warning-700: #8b4d04;
+  --color-warning-800: #683d08;
+  --color-warning-900: #4d2f0b;
+  --color-info-100: #e9f4fa;
+  --color-info-200: #bce6fc;
+  --color-info-300: #8ed4f8;
+  --color-info-400: #52baed;
+  --color-info-500: #229ad6;
+  --color-info-600: #0c7bb3;
+  --color-info-700: #066291;
+  --color-info-800: #074d71;
+  --color-info-900: #0a3953;
+  --color-accent1-100: #f7f1fb;
+  --color-accent1-200: #ead9fb;
+  --color-accent1-300: #dbbdf9;
+  --color-accent1-400: #c79bf2;
+  --color-accent1-500: #af74e8;
+  --color-accent1-600: #9756d6;
+  --color-accent1-700: #7d3cbe;
+  --color-accent1-800: #642b9e;
+  --color-accent1-900: #361b52;
+  --color-accent2-100: #fbf0f4;
+  --color-accent2-200: #fbd4e6;
+  --color-accent2-300: #fbb4d2;
+  --color-accent2-400: #f68bb7;
+  --color-accent2-500: #ed5393;
+  --color-accent2-600: #d6246e;
+  --color-accent2-700: #b01356;
+  --color-accent2-800: #8b1245;
+  --color-accent2-900: #411526;
+  --color-pulse-100: #0000330f;
+  --color-pulse-200: #00002d17;
+  --color-pulse-300: #ddeaf814;
+  --color-pulse-400: #d3edf81d;
+  --color-white: #fff;
+  --color-transparent: 'transparent';
+  --color-shadow: #101828;
+  --shadow-xs: 0px 1px 2px 0px --alpha(var(--color-shadow, #101828) / 5%);
+  --shadow-lg:
+    0px 4px 6px -2px --alpha(var(--color-shadow, #101828) / 3%),
+    0px 12px 16px -4px --alpha(var(--color-shadow, #101828) / 8%);
+
+  /* TODO(@avivkeller): The --font-xyz-xyz variable is assigned by Next.js in apps/site.
+      Ideally, this package shouldn't depend on the consuming application's
+      variables, it should remain self-contained. */
+  --font-open-sans: var(--font-open-sans);
+  --font-ibm-plex-mono: var(--font-ibm-plex-mono);
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-xs: 0.75rem;
+  --font-xs-line-height: 1rem;
+  --font-sm: 0.87rem;
+  --font-sm-line-height: 1.25rem;
+  --font-base: 1rem;
+  --font-base-line-height: 1.5rem;
+  --font-lg: 1.125rem;
+  --font-lg-line-height: 1.75rem;
+  --font-xl: 1.25rem;
+  --font-xl-line-height: 1.875rem;
+  --font-2xl: 1.5rem;
+  --font-2xl-line-height: 2rem;
+  --font-3xl: 1.875rem;
+  --font-3xl-line-height: 2.25rem;
+  --font-4xl: 2.25rem;
+  --font-4xl-line-height: 2.5rem;
+  --font-5xl: 3rem;
+  --font-5xl-line-height: 3rem;
+  --font-6xl: 3.75rem;
+  --font-6xl-line-height: 3.75rem;
+  --font-7xl: 4.5rem;
+  --font-7xl-line-height: 4.5rem;
+  --breakpoint-xs: 670px;
+}
+
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+}
+
+@utility max-w-8xl {
+  max-width: 95rem;
+}
+
+@utility bg-gradient-subtle-dark {
+  background-image: linear-gradient(
+    180deg,
+    --alpha(var(--color-neutral-900) / 50%) 0%,
+    --alpha(var(--color-neutral-900) / 0%) 48.32%
+  );
+}
+
+@utility bg-gradient-subtle {
+  background-image: linear-gradient(
+    180deg,
+    --alpha(var(--color-neutral-100) / 50%) 0%,
+    --alpha(var(--color-neutral-100) / 0%) 48.32%
+  );
+}
+
+@utility bg-gradient-subtle-gray {
+  background-image: linear-gradient(
+    180deg,
+    var(--color-neutral-900) 0%,
+    --alpha(var(--color-neutral-900) / 80%) 100%
+  );
+}
+
+@utility bg-gradient-subtle-white {
+  background-image: linear-gradient(
+    180deg,
+    var(--color-white) 0%,
+    --alpha(var(--color-white) / 80%) 100%
+  );
+}
+
+@utility bg-gradient-glow-backdrop {
+  background-image: radial-gradient(
+    8em circle at calc(50%) 10px,
+    var(--color-green-400),
+    transparent 30%
+  );
+}
+
+@utility bg-gradient-radial {
+  background-image: radial-gradient(
+    var(--tw-gradient-from),
+    var(--tw-gradient-to)
+  );
+}
+
+@utility text-inherit {
+  color: inherit;
+}

package/types.ts

@@ -0,0 +1,25 @@
+import type {
+  SVGProps,
+  AnchorHTMLAttributes,
+  ReactElement,
+  JSXElementConstructor,
+  ReactNode,
+} from 'react';
+
+export type LogoVariant = 'default' | 'pride';
+export type TailwindSVG = SVGProps<SVGSVGElement> & { tw?: string };
+export type BlogPreviewType = 'announcements' | 'release' | 'vulnerability';
+export type LinkLike =
+  | JSXElementConstructor<AnchorHTMLAttributes<HTMLAnchorElement>>
+  | 'a';
+
+export type FormattedMessage =
+  | string
+  | ReactElement<HTMLElement, string | JSXElementConstructor<HTMLElement>>
+  | ReadonlyArray<ReactNode>;
+
+export type SimpleLocaleConfig = {
+  code: string;
+  localName: string;
+  name: string;
+};

package/Common/AlertBox/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import styles from './index.module.css';
-const AlertBox = ({ level, title, children, size = 'default', }) => (_jsxs("div", { className: classNames(styles.alertBox, styles[level], styles[size]), children: [_jsx("span", { className: styles.title, children: title }), _jsx("span", { children: children })] }));
-export default AlertBox;

package/Common/AvatarGroup/Avatar/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as RadixAvatar from '@radix-ui/react-avatar';
-import classNames from 'classnames';
-import { forwardRef } from 'react';
-import styles from './index.module.css';
-const Avatar = forwardRef(({ image, nickname, name, fallback, url, size = 'small', as: Component = 'a', ...props }, ref) => {
-    if (!url)
-        Component = 'div';
-    return (_jsx(RadixAvatar.Root, { ...props, ref: ref, className: classNames(styles.avatar, styles[size], props.className), children: _jsxs(Component, { href: url || undefined, target: url ? '_blank' : undefined, className: styles.wrapper, children: [_jsx(RadixAvatar.Image, { loading: "lazy", decoding: "async", src: image, alt: name || nickname, className: styles.item }), _jsx(RadixAvatar.Fallback, { className: classNames(styles.item, styles[size]), children: fallback })] }) }));
-});
-export default Avatar;

package/Common/AvatarGroup/Overlay/index.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
-import Avatar from '#ui/Common/AvatarGroup/Avatar';
-import styles from './index.module.css';
-const AvatarOverlay = ({ image, name, nickname, fallback, url, as: Component = 'a', }) => (_jsxs(Component, { className: styles.overlay, href: url, target: "_blank", children: [_jsx(Avatar, { image: image, name: name, nickname: nickname, fallback: fallback, size: "medium" }), _jsxs("div", { className: styles.user, children: [name && _jsx("div", { className: styles.name, children: name }), nickname && _jsx("div", { className: styles.nickname, children: nickname })] }), _jsx(ArrowUpRightIcon, { className: styles.arrow })] }));
-export default AvatarOverlay;

package/Common/AvatarGroup/index.js

@@ -1,21 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { useState, useMemo } from 'react';
-import Avatar from '#ui/Common/AvatarGroup/Avatar';
-import avatarstyles from '#ui/Common/AvatarGroup/Avatar/index.module.css';
-import AvatarOverlay from '#ui/Common/AvatarGroup/Overlay';
-import Tooltip from '#ui/Common/Tooltip';
-import styles from './index.module.css';
-const AvatarGroup = ({ avatars, limit = 10, isExpandable = true, size = 'small', container, as, }) => {
-    const [showMore, setShowMore] = useState(false);
-    const renderAvatars = useMemo(() => avatars.slice(0, showMore ? avatars.length : limit), [avatars, limit, showMore]);
-    const handleShowMoreClick = isExpandable
-        ? () => setShowMore(prev => !prev)
-        : undefined;
-    return (_jsxs("div", { className: classNames(styles.avatarGroup, styles[size]), children: [renderAvatars.map(avatar => (_jsx(Tooltip, { asChild: true, container: container, content: _jsx(AvatarOverlay, { ...avatar, as: as }), children: _jsx(Avatar, { ...avatar, size: size, className: classNames({
-                        'cursor-pointer': avatar.url,
-                        'pointer-events-none': !avatar.url,
-                    }), as: as }) }, avatar.nickname))), avatars.length > limit && (_jsx("span", { onClick: handleShowMoreClick, className: classNames(avatarstyles.avatar, avatarstyles[size], 'cursor-pointer'), children: _jsx("span", { className: avatarstyles.item, children: `${showMore ? '-' : '+'}${avatars.length - limit}` }) }))] }));
-};
-export default AvatarGroup;

package/Common/Badge/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import styles from './index.module.css';
-const Badge = ({ kind = 'default', size = 'medium', className, children, ...props }) => {
-    return (_jsx("span", { className: classNames(styles.badge, styles[kind], styles[size], className), ...props, children: children }));
-};
-export default Badge;

package/Common/BadgeGroup/index.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
-import Badge from '#ui/Common/Badge';
-import styles from './index.module.css';
-const BadgeGroup = ({ kind = 'default', badgeText, children, as: Component = 'a', ...args }) => (_jsxs(Component, { className: `${styles.wrapper} ${styles[kind]}`, ...args, children: [badgeText && (_jsx(Badge, { kind: kind, className: styles.badge, children: badgeText })), _jsx("span", { className: styles.message, children: children }), args.href && _jsx(ArrowRightIcon, { className: styles.icon })] }));
-export default BadgeGroup;

package/Common/Banner/index.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './index.module.css';
-const Banner = ({ type = 'default', children, }) => (_jsx("div", { className: `${styles.banner} ${styles[type] || styles.default}`, children: children }));
-export default Banner;

package/Common/BaseActiveLink/index.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-const BaseActiveLink = ({ activeClassName = 'active', allowSubPath = false, className, href = '', pathname = '/', as: Component = 'a', ...props }) => {
-    const finalClassName = classNames(className, {
-        [activeClassName]: allowSubPath
-            ? // When using allowSubPath we want only to check if
-                // the current pathname starts with the utmost upper level
-                // of an href (e.g. /docs/...)
-                pathname.startsWith(`/${href.toString().split('/')[1]}`)
-            : href.toString() === pathname,
-    });
-    return _jsx(Component, { className: finalClassName, href: href, ...props });
-};
-export default BaseActiveLink;

package/Common/BaseButton/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import styles from './index.module.css';
-const BaseButton = ({ kind = 'primary', size = 'default', disabled = false, className, as: Component = 'a', ...props }) => {
-    if ('href' in props && Component) {
-        return (_jsx(Component, { role: "button", href: disabled ? undefined : props.href, "aria-disabled": disabled, className: classNames(styles.button, styles[kind], styles[size], className), tabIndex: disabled ? -1 : 0, ...props }));
-    }
-    return (_jsx("button", { disabled: disabled, className: classNames(styles.button, styles[kind], styles[size], className), type: "button", ...props }));
-};
-export default BaseButton;

package/Common/BaseCodeBox/index.js

@@ -1,50 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
-import { Fragment, isValidElement, useRef } from 'react';
-import BaseButton from '#ui/Common/BaseButton';
-import styles from './index.module.css';
-// Transforms a code element with plain text content into a more structured
-// format for rendering with line numbers
-const transformCode = (code, language) => {
-    if (!isValidElement(code)) {
-        // Early return when the `CodeBox` child is not a valid element since the
-        // type is a ReactNode, and can assume any value
-        return code;
-    }
-    const content = code.props?.children;
-    if (code.type !== 'code' || typeof content !== 'string') {
-        // There is no need to transform an element that is not a code element or
-        // a content that is not a string
-        return code;
-    }
-    // Note that since we use `.split` we will have an extra entry
-    // being an empty string, so we need to remove it
-    const lines = content.split('\n');
-    const extraStyle = language.length === 0 ? { fontFamily: 'monospace' } : {};
-    return (_jsx("code", { style: extraStyle, children: lines
-            .flatMap((line, lineIndex) => {
-            const columns = line.split(' ');
-            return [
-                _jsx("span", { className: "line", children: columns.map((column, columnIndex) => (_jsxs(Fragment, { children: [_jsx("span", { children: column }), columnIndex < columns.length - 1 && _jsx("span", { children: " " })] }, columnIndex))) }, lineIndex),
-                // Add a break line so the text content is formatted correctly
-                // when copying to clipboard
-                '\n',
-            ];
-        })
-            // Here we remove that empty line from before and
-            // the last flatMap entry which is an `\n`
-            .slice(0, -2) }));
-};
-const BaseCodeBox = ({ children, language, className, onCopy, buttonText, as = 'a', showCopyButton = true, }) => {
-    const containerRef = useRef(null);
-    const handleCopy = () => {
-        const text = containerRef.current?.textContent;
-        if (text) {
-            onCopy(text);
-        }
-    };
-    return (_jsxs("div", { className: styles.root, children: [_jsx("pre", { ref: containerRef, className: classNames(styles.content, className), tabIndex: 0, children: transformCode(children, language) }), language && (_jsxs("div", { className: styles.footer, children: [_jsx("span", { className: styles.language, children: language }), showCopyButton && (_jsxs(BaseButton, { as: as, className: styles.action, kind: "neutral", onClick: handleCopy, children: [_jsx(DocumentDuplicateIcon, { className: styles.icon }), buttonText] }))] }))] }));
-};
-export default BaseCodeBox;

package/Common/BaseCrossLink/index.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import PrevNextArrow from '#ui/Common/BasePagination/PrevNextArrow';
-import styles from './index.module.css';
-const BaseCrossLink = ({ type, label, text, link, as: Component = 'a', }) => {
-    return (_jsxs(Component, { className: styles.crossLink, href: link, children: [_jsxs("span", { className: classNames(styles.header, {
-                    [styles.reverse]: type === 'next',
-                }), children: [_jsx(PrevNextArrow, { className: styles.icon, type: type }), label] }), _jsx("span", { className: classNames(styles.content, {
-                    [styles.reverse]: type === 'next',
-                }), children: text })] }));
-};
-export default BaseCrossLink;

package/Common/BaseLinkTabs/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Select from '#ui/Common/Select';
-import styles from './index.module.css';
-const BaseLinkTabs = ({ tabs, label, activeTab, children, as: Component = 'a', onSelect, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.tabsList, children: tabs.map(tab => (_jsx(Component, { href: tab.link, className: styles.tabsTrigger, "data-state": tab.key === activeTab ? 'active' : 'inactive', children: tab.label }, tab.key))) }), _jsx("div", { className: styles.tabsSelect, children: _jsx(Select, { label: label, defaultValue: tabs.find(tab => tab.key === activeTab)?.link, values: tabs.map(tab => ({ label: tab.label, value: tab.link })), onChange: onSelect }) }), children] }));
-export default BaseLinkTabs;

package/Common/BasePagination/Ellipsis/index.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './index.module.css';
-const Ellipsis = () => (_jsx("span", { "aria-hidden": "true", className: styles.ellipsis, children: "..." }));
-export default Ellipsis;

package/Common/BasePagination/PaginationListItem/index.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './index.module.css';
-const PaginationListItem = ({ url, pageNumber, currentPage, totalPages, as: Component = 'a', label, }) => {
-    return (_jsx("li", { "aria-setsize": totalPages, "aria-posinset": pageNumber, children: _jsx(Component, { href: url, "aria-label": label, className: styles.listItem, ...(pageNumber === currentPage && { 'aria-current': 'page' }), children: _jsx("span", { children: pageNumber }) }) }, pageNumber));
-};
-export default PaginationListItem;

package/Common/BasePagination/PrevNextArrow.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
-const PrevNextArrow = ({ type, ...extra }) => {
-    const ChevronComponent = type === 'previous' ? ChevronLeftIcon : ChevronRightIcon;
-    return _jsx(ChevronComponent, { ...extra });
-};
-export default PrevNextArrow;

package/Common/BasePagination/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowRightIcon, ArrowLeftIcon } from '@heroicons/react/20/solid';
-import Button from '#ui/Common/BaseButton';
-import { useGetPageElements } from '#ui/Common/BasePagination/useGetPageElements';
-import styles from './index.module.css';
-const BasePagination = ({ currentPage, pages, as = 'a', currentPageSiblingsCount = 1, labels, getPageLabel, }) => {
-    const parsedPages = useGetPageElements(currentPage, pages, currentPageSiblingsCount, as, getPageLabel);
-    return (_jsxs("nav", { "aria-label": labels.aria, className: styles.pagination, children: [_jsxs(Button, { as: as, "aria-label": labels.prevAria, disabled: currentPage === 1, kind: "secondary", className: styles.previousButton, href: pages[currentPage - 2]?.url, children: [_jsx(ArrowLeftIcon, { className: styles.arrowIcon }), _jsx("span", { children: labels.prev })] }), _jsx("ol", { className: styles.list, children: parsedPages }), _jsxs(Button, { as: as, "aria-label": labels.nextAria, disabled: currentPage === pages.length, kind: "secondary", className: styles.nextButton, href: pages[currentPage]?.url, children: [_jsx("span", { children: labels.next }), _jsx(ArrowRightIcon, { className: styles.arrowIcon })] })] }));
-};
-export default BasePagination;

package/Common/BasePagination/useGetPageElements.js

@@ -1,77 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Ellipsis from '#ui/Common/BasePagination/Ellipsis';
-import PaginationListItem from '#ui/Common/BasePagination/PaginationListItem';
-const parsePages = (pages, currentPage, totalPages, as, getLabel) => pages.map(({ url }, index) => ({
-    url,
-    pageNumber: index + 1,
-    currentPage,
-    totalPages,
-    label: getLabel(index + 1),
-    as,
-}));
-const createPaginationListItems = (parsedPages) => parsedPages.map(page => _jsx(PaginationListItem, { ...page }, page.url));
-// The minimum amount of elements are first page, current page, and last page
-const MINIMUM_AMOUNT_OF_ELEMENTS = 3;
-// Not more than two ellipses will be shown at the same time
-const MAXIMUM_AMOUNT_OF_ELLIPSES = 2;
-// The logic of this custom hook has taken the internal logic of
-// React MUI's Pagination component as reference. More info here:
-// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js
-export const useGetPageElements = (currentPage, pages, currentPageSiblingsCount, as, getLabel) => {
-    const totalPages = pages.length;
-    const parsedPages = parsePages(pages, currentPage, totalPages, as, getLabel);
-    const currentPageIndex = currentPage - 1;
-    // We multiply it by two (2) as siblings are located on both left and right sides
-    // of the current page
-    const totalSiblingsCount = 2 * currentPageSiblingsCount;
-    const visiblePages = totalSiblingsCount +
-        MINIMUM_AMOUNT_OF_ELEMENTS +
-        MAXIMUM_AMOUNT_OF_ELLIPSES;
-    // When there are more pages than the visible pages to be shown
-    // we do not need to perform any calculations
-    if (totalPages <= visiblePages) {
-        return createPaginationListItems(parsedPages);
-    }
-    // The index of the far-left sibling of the current page
-    const leftSiblingsFirstIndex = Math.max(currentPageIndex - currentPageSiblingsCount, 1);
-    // The index of the far-right sibling of the current page
-    const rightSiblingsLastIndex = Math.min(currentPageIndex + currentPageSiblingsCount + 1, totalPages);
-    const firstIndex = 0;
-    const lastIndex = totalPages - 1;
-    // If there are at least two (2) elements between the far-left sibling of
-    // the current page, and the first page, we should show left ellipsis
-    // between them
-    const hasLeftEllipsis = leftSiblingsFirstIndex > firstIndex + 2;
-    // If there are at least two (2) elements between the far-right sibling of
-    // the current page, and the last page, we should show right ellipsis
-    // between them
-    const hasRightEllipsis = rightSiblingsLastIndex < lastIndex - 1;
-    if (!hasLeftEllipsis && hasRightEllipsis) {
-        const leftPagesLastIndex = MINIMUM_AMOUNT_OF_ELEMENTS + totalSiblingsCount;
-        const leftPages = parsedPages.slice(firstIndex, leftPagesLastIndex);
-        return [
-            ...createPaginationListItems(leftPages),
-            _jsx(Ellipsis, {}, "ellipsis"),
-            ...createPaginationListItems(parsedPages.slice(lastIndex)),
-        ];
-    }
-    if (hasLeftEllipsis && !hasRightEllipsis) {
-        const rightPagesFirstIndex = MINIMUM_AMOUNT_OF_ELEMENTS + totalSiblingsCount;
-        const rightPages = parsedPages.slice(totalPages - rightPagesFirstIndex);
-        return [
-            ...createPaginationListItems(parsedPages.slice(firstIndex, firstIndex + 1)),
-            _jsx(Ellipsis, {}, "ellipsis"),
-            ...createPaginationListItems(rightPages),
-        ];
-    }
-    if (hasLeftEllipsis && hasRightEllipsis) {
-        const middlePages = parsedPages.slice(leftSiblingsFirstIndex, rightSiblingsLastIndex);
-        return [
-            ...createPaginationListItems(parsedPages.slice(firstIndex, firstIndex + 1)),
-            _jsx(Ellipsis, {}, "ellipsis-1"),
-            ...createPaginationListItems(middlePages),
-            _jsx(Ellipsis, {}, "ellipsis-2"),
-            ...createPaginationListItems(parsedPages.slice(lastIndex)),
-        ];
-    }
-};

package/Common/Blockquote/index.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './index.module.css';
-const Blockquote = ({ children }) => (_jsx("blockquote", { className: styles.wrapper, children: children }));
-export default Blockquote;