@node-core/ui-components 1.0.1-a459447336d99556960d6f9e1c997327b29e4974 → 1.0.1-ab0ba1dcb1d91392c44e91b1e74e9f565e460543

package/Common/Badge/index.module.css

@@ -1,46 +0,0 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-.badge {
-  border-radius: calc(infinity*1px);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  text-align: center;
-  color: var(--color-white, #fff);
-  &.small {
-    padding-inline: calc(var(--spacing, 0.25rem)*1.5);
-    padding-block: calc(var(--spacing, 0.25rem)*0.5);
-    font-size: var(--text-xs, 0.75rem);
-    line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
-  }
-  &.medium {
-    padding-inline: calc(var(--spacing, 0.25rem)*2.5);
-    padding-block: calc(var(--spacing, 0.25rem)*0.5);
-    font-size: var(--text-base, 1rem);
-    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
-  }
-  &.default {
-    border-color: var(--color-green-200, #c5e5b4);
-    background-color: var(--color-green-600, #417e38);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-green-800, #2c682c);
-    }
-  }
-  &.error {
-    border-color: var(--color-danger-200, #fad3d4);
-    background-color: var(--color-danger-600, #de1a1b);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-danger-800, #900e0e);
-    }
-  }
-  &.warning {
-    border-color: var(--color-warning-200, #fad9b0);
-    background-color: var(--color-warning-600, #ae5f00);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-warning-600, #ae5f00);
-    }
-  }
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

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/BadgeGroup/index.module.css

@@ -1,101 +0,0 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-.wrapper {
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  border-radius: calc(infinity*1px);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  padding-block: calc(var(--spacing, 0.25rem)*1);
-  padding-right: calc(var(--spacing, 0.25rem)*2.5);
-  padding-left: calc(var(--spacing, 0.25rem)*1);
-  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);
-  .icon {
-    width: calc(var(--spacing, 0.25rem)*4);
-    height: calc(var(--spacing, 0.25rem)*4);
-  }
-  .badge {
-    margin-right: calc(var(--spacing, 0.25rem)*2);
-  }
-  .message {
-    margin-right: calc(var(--spacing, 0.25rem)*1);
-  }
-  &.default {
-    border-color: var(--color-green-200, #c5e5b4);
-    background-color: var(--color-green-100, #edf2eb);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-green-700, #2c682c);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
-    .icon {
-      color: var(--color-green-500, #5fa04e);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-green-300, #99cc7d);
-      }
-    }
-    .message {
-      color: var(--color-green-700, #2c682c);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-green-300, #99cc7d);
-      }
-    }
-  }
-  &.error {
-    border-color: var(--color-danger-200, #fad3d4);
-    background-color: var(--color-danger-100, #fbf1f0);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-danger-700, #b80c0c);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
-    .icon {
-      color: var(--color-danger-500, #f65354);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-danger-300, #fab6b7);
-      }
-    }
-    .message {
-      color: var(--color-danger-700, #b80c0c);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-danger-300, #fab6b7);
-      }
-    }
-  }
-  &.warning {
-    border-color: var(--color-warning-200, #fad9b0);
-    background-color: var(--color-warning-100, #fdf3e7);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-warning-700, #8b4d04);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
-    .icon {
-      color: var(--color-warning-500, #d07912);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-warning-300, #f5bc75);
-      }
-    }
-    .message {
-      color: var(--color-warning-700, #8b4d04);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-warning-300, #f5bc75);
-      }
-    }
-  }
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}

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/Banner/index.module.css

@@ -1,45 +0,0 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-.banner {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  padding-inline: calc(var(--spacing, 0.25rem)*8);
-  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));
-  &,
-  a {
-    color: var(--color-white, #fff);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-white, #fff);
-    }
-  }
-  a {
-    width: fit-content;
-    text-decoration-line: underline;
-    text-decoration-color: color-mix(in srgb, #fff 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      text-decoration-color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
-    }
-  }
-  svg {
-    width: calc(var(--spacing, 0.25rem)*4);
-    height: calc(var(--spacing, 0.25rem)*4);
-    color: color-mix(in srgb, #fff 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
-    }
-  }
-}
-.default {
-  background-color: var(--color-green-600, #417e38);
-}
-.error {
-  background-color: var(--color-danger-600, #de1a1b);
-}
-.warning {
-  background-color: var(--color-warning-600, #ae5f00);
-}

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/BaseButton/index.module.css

@@ -1,372 +0,0 @@
-/*! 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

@@ -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;