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

package/Common/BaseButton/index.module.css

@@ -0,0 +1,372 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  padding-inline: calc(var(--spacing, 0.25rem)*4.5);
+  padding-block: calc(var(--spacing, 0.25rem)*2.5);
+  text-align: center;
+  --tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  @media (prefers-reduced-motion: no-preference) {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+  }
+  svg {
+    width: calc(var(--spacing, 0.25rem)*5);
+    height: calc(var(--spacing, 0.25rem)*5);
+  }
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  &.small {
+    padding-inline: calc(var(--spacing, 0.25rem)*3);
+    padding-block: calc(var(--spacing, 0.25rem)*2);
+    font-size: var(--text-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+  }
+  &.neutral {
+    border-radius: var(--radius-sm, 0.25rem);
+    background-color: var(--color-neutral-900, #2c3437);
+    color: var(--color-white, #fff);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
+    &:hover:not([aria-disabled='true']) {
+      background-color: var(--color-neutral-800, #556066);
+    }
+    &[aria-disabled='true'] {
+      background-color: var(--color-neutral-900, #2c3437);
+      opacity: 50%;
+    }
+    &:focus {
+      background-color: var(--color-neutral-800, #556066);
+    }
+  }
+  &.primary {
+    border-radius: var(--radius-sm, 0.25rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-green-600, #417e38);
+    background-color: var(--color-green-600, #417e38);
+    color: var(--color-white, #fff);
+    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in srgb, #101828 5%, transparent));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 5%, transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    &:hover:not([aria-disabled='true']) {
+      border-color: var(--color-green-700, #2c682c);
+      background-color: var(--color-green-700, #2c682c);
+      color: var(--color-white, #fff);
+    }
+    &:focus {
+      border-color: var(--color-green-700, #2c682c);
+      background-color: var(--color-green-700, #2c682c);
+    }
+    &[aria-disabled='true'] {
+      background-color: var(--color-green-600, #417e38);
+      opacity: 50%;
+    }
+  }
+  &.secondary {
+    border-radius: var(--radius-lg, 0.5rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-neutral-200, #e9edf0);
+    color: var(--color-neutral-800, #556066);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      border-color: var(--color-neutral-900, #2c3437);
+    }
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
+    &:hover:not([aria-disabled='true']) {
+      background-color: var(--color-neutral-200, #e9edf0);
+      color: var(--color-neutral-800, #556066);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        background-color: var(--color-neutral-900, #2c3437);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-200, #e9edf0);
+      }
+    }
+    &[aria-disabled='true'] {
+      background-color: transparent;
+      opacity: 50%;
+    }
+    &:focus {
+      background-color: var(--color-neutral-100, #f6f7f9);
+      color: var(--color-neutral-800, #556066);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        background-color: var(--color-neutral-900, #2c3437);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-200, #e9edf0);
+      }
+    }
+  }
+  &.special {
+    border-radius: var(--radius-lg, 0.5rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: color-mix(in srgb, #417e38 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-green-600, #417e38) 30%, transparent);
+    }
+    background-color: color-mix(in srgb, #417e38 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-600, #417e38) 10%, transparent);
+    }
+    color: var(--color-white, #fff);
+    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in srgb, #101828 5%, transparent));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 5%, transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+    &::before {
+      content: var(--tw-content);
+      top: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::before {
+      content: var(--tw-content);
+      right: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::before {
+      content: var(--tw-content);
+      left: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::before {
+      content: var(--tw-content);
+      z-index: -10;
+    }
+    &::before {
+      content: var(--tw-content);
+      margin-inline: auto;
+    }
+    &::before {
+      content: var(--tw-content);
+      height: 100%;
+    }
+    &::before {
+      content: var(--tw-content);
+      width: 100%;
+    }
+    &::before {
+      content: var(--tw-content);
+      background-image: radial-gradient( 8em circle at 50% 10px, var(--color-green-400), transparent 30% );
+    }
+    &::before {
+      content: var(--tw-content);
+      opacity: 30%;
+    }
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+    &::after {
+      content: var(--tw-content);
+      top: -1px;
+    }
+    &::after {
+      content: var(--tw-content);
+      right: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::after {
+      content: var(--tw-content);
+      left: calc(var(--spacing, 0.25rem)*0);
+    }
+    &::after {
+      content: var(--tw-content);
+      margin-inline: auto;
+    }
+    &::after {
+      content: var(--tw-content);
+      height: 1px;
+    }
+    &::after {
+      content: var(--tw-content);
+      width: 40%;
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-position: to right in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-from: color-mix(in srgb, #417e38 0%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-from: color-mix(in oklab, var(--color-green-600, #417e38) 0%, transparent);
+      }
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-via: var(--color-green-600, #417e38);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-via-stops);
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-to: color-mix(in srgb, #417e38 0%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-to: color-mix(in oklab, var(--color-green-600, #417e38) 0%, transparent);
+      }
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+    &[aria-disabled='true'] {
+      opacity: 50%;
+    }
+    &:hover:not([aria-disabled='true']) {
+      background-color: color-mix(in srgb, #417e38 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-600, #417e38) 20%, transparent);
+      }
+    }
+    &:focus {
+      background-color: color-mix(in srgb, #417e38 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-600, #417e38) 20%, transparent);
+      }
+    }
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}

package/Common/BaseCodeBox/index.js

@@ -0,0 +1,50 @@
+'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/BaseCodeBox/index.module.css

@@ -0,0 +1,96 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.root {
+  width: 100%;
+  border-radius: var(--radius-sm, 0.25rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-neutral-900, #2c3437);
+  background-color: var(--color-neutral-950, #0d121c);
+  .content {
+    margin: calc(var(--spacing, 0.25rem)*0);
+    padding: calc(var(--spacing, 0.25rem)*4);
+    & > code {
+      display: grid;
+      overflow-x: auto;
+      background-color: transparent;
+      padding: calc(var(--spacing, 0.25rem)*0);
+      font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
+      font-size: var(--text-sm, 0.875rem);
+      line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+      --tw-leading: var(--leading-snug, 1.375);
+      line-height: var(--leading-snug, 1.375);
+      --tw-font-weight: var(--font-weight-regular, 400);
+      font-weight: var(--font-weight-regular, 400);
+      color: var(--color-neutral-400, #cbd4d9);
+      counter-reset: line;
+      scrollbar-width: thin;
+      & > [class='line'] {
+        position: relative;
+        min-width: calc(var(--spacing, 0.25rem)*0);
+        padding-left: calc(var(--spacing, 0.25rem)*8);
+        &:not(:empty:last-child)::before {
+          display: inline-block;
+          --tw-content: '';
+          content: var(--tw-content);
+        }
+        &:not(:empty:last-child)::after {
+          position: absolute;
+          top: calc(var(--spacing, 0.25rem)*0);
+          left: calc(var(--spacing, 0.25rem)*0);
+          margin-right: calc(var(--spacing, 0.25rem)*4);
+          width: calc(var(--spacing, 0.25rem)*4.5);
+          text-align: right;
+          font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
+          color: var(--color-neutral-600, #929fa5);
+          content: counter(line);
+          counter-increment: line;
+        }
+      }
+    }
+  }
+  & > .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-top-color: var(--color-neutral-900, #2c3437);
+    padding-inline: calc(var(--spacing, 0.25rem)*4);
+    padding-block: calc(var(--spacing, 0.25rem)*3);
+    font-size: var(--text-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+    --tw-font-weight: var(--font-weight-medium, 500);
+    font-weight: var(--font-weight-medium, 500);
+    & > .language {
+      color: var(--color-neutral-400, #cbd4d9);
+    }
+    & > .action {
+      padding-inline: calc(var(--spacing, 0.25rem)*3);
+      padding-block: calc(var(--spacing, 0.25rem)*1.5);
+      --tw-font-weight: var(--font-weight-medium, 500);
+      font-weight: var(--font-weight-medium, 500);
+    }
+  }
+}
+.icon {
+  width: calc(var(--spacing, 0.25rem)*4);
+  height: calc(var(--spacing, 0.25rem)*4);
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}

package/Common/BaseCrossLink/index.js

@@ -0,0 +1,12 @@
+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/BaseCrossLink/index.module.css

@@ -0,0 +1,69 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.crossLink {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: var(--radius-sm, 0.25rem);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: var(--color-neutral-300, #d9e1e4);
+  background-color: var(--color-white, #fff);
+  padding: calc(var(--spacing, 0.25rem)*3);
+  text-decoration-line: none;
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-color: var(--color-neutral-900, #2c3437);
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    background-color: var(--color-neutral-950, #0d121c);
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing, 0.25rem)*2);
+    align-self: stretch;
+    font-size: var(--text-xs, 0.75rem);
+    line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
+    color: var(--color-neutral-800, #556066);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-100, #f6f7f9);
+    }
+    &.reverse {
+      flex-direction: row-reverse;
+      justify-content: flex-start;
+    }
+    .icon {
+      width: calc(var(--spacing, 0.25rem)*4);
+      height: calc(var(--spacing, 0.25rem)*4);
+      color: var(--color-neutral-600, #929fa5);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-400, #cbd4d9);
+      }
+    }
+  }
+  .content {
+    align-self: stretch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--text-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+    color: var(--color-neutral-900, #2c3437);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-white, #fff);
+    }
+    &.reverse {
+      text-align: right;
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/Common/BaseLinkTabs/index.js

@@ -0,0 +1,5 @@
+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/BaseLinkTabs/index.module.css

@@ -0,0 +1,77 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.tabsList {
+  margin-top: calc(var(--spacing, 0.25rem)*10);
+  margin-bottom: calc(var(--spacing, 0.25rem)*6);
+  display: flex;
+  gap: calc(var(--spacing, 0.25rem)*2);
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: var(--color-neutral-200, #e9edf0);
+  font-family: var(--font-open-sans, var(--font-open-sans));
+  @media (width < 670px) {
+    display: none;
+  }
+  &:where([data-theme=dark], [data-theme=dark] *) {
+    border-bottom-color: var(--color-neutral-800, #556066);
+  }
+  .tabsTrigger {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+    border-bottom-color: transparent;
+    padding-inline: calc(var(--spacing, 0.25rem)*1);
+    padding-bottom: 11px;
+    font-size: var(--text-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+    --tw-font-weight: var(--font-weight-semibold, 600);
+    font-weight: var(--font-weight-semibold, 600);
+    color: var(--color-neutral-800, #556066);
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      color: var(--color-neutral-200, #e9edf0);
+    }
+    &:not([data-state='active']):hover {
+      border-bottom-color: var(--color-neutral-900, #2c3437);
+      color: var(--color-neutral-900, #2c3437);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        border-bottom-color: var(--color-neutral-300, #d9e1e4);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-neutral-300, #d9e1e4);
+      }
+    }
+    &[data-state='active'] {
+      border-bottom-color: var(--color-green-600, #417e38);
+      color: var(--color-green-600, #417e38);
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        border-bottom-color: var(--color-green-400, #84ba64);
+      }
+      &:where([data-theme=dark], [data-theme=dark] *) {
+        color: var(--color-green-400, #84ba64);
+      }
+    }
+  }
+}
+.tabsSelect {
+  @media (width >= 40rem) {
+    visibility: visible;
+  }
+  @media (width >= 48rem) {
+    display: none;
+  }
+  > span {
+    margin-block: calc(var(--spacing, 0.25rem)*6);
+    display: none;
+    width: 100%;
+    @media (width < 670px) {
+      display: flex;
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/Common/BasePagination/Ellipsis/index.js

@@ -0,0 +1,4 @@
+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;