@stack-spot/portal-components 2.26.0 → 2.27.0

package/dist/components/AnimatedHeight.d.ts

@@ -53,6 +53,6 @@ interface Props {
  * This panel can also be hidden or visible and transitions between these two state will be animated.
  * @param props the React props for this component. {@link Props}.
  */
-export declare const AnimatedHeight: ({ children, footer, header, visible, duration, className, style, outerClassName, outerStyle }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimatedHeight: ({ children, footer, header, visible, duration, className, style, outerClassName, outerStyle }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=AnimatedHeight.d.ts.map

package/dist/components/AnimatedHeight.js

@@ -1,33 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { listToClass } from '@stack-spot/portal-theme';
 import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useManualRender } from '../hooks/manual-render.js';
-const Box = styled.div `
-  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
-  transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
-
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &.initial {
-    opacity: 0;
-    pointer-events: none;
-    overflow: inherit;
-    transition: none;
-
-    &.content {
-      overflow: inherit;
-      transition: none;
-    }
-  }
-
-  .content {
-    overflow: hidden;
-    transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
-  }
+const Box = styled.div `
+  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
+  transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.initial {
+    opacity: 0;
+    pointer-events: none;
+    overflow: inherit;
+    transition: none;
+
+    &.content {
+      overflow: inherit;
+      transition: none;
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+  }
 `;
 function getActualContent(wrapper) {
     const firstChild = wrapper.firstChild;

package/dist/components/AsyncContent.d.ts

@@ -41,6 +41,6 @@ interface Props {
  *
  * @param options the props for rendering the component: {@link Props}.
  */
-export declare const AsyncContent: ({ loading, error, autofocus, children, errorDetails }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const AsyncContent: ({ loading, error, autofocus, children, errorDetails }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime.js").JSX.Element | null | undefined;
 export {};
 //# sourceMappingURL=AsyncContent.d.ts.map

package/dist/components/AsyncContent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Flex } from '@citric/core';
 import { LoadingCircular } from '@citric/ui';
 import { useEffect, useLayoutEffect } from 'react';

package/dist/components/BannerWarning.d.ts

@@ -9,5 +9,5 @@ export declare const BannerWarning: ({ children, showCloseButton }: {
     children: React.ReactNode;
     sx?: SxProp;
     showCloseButton?: boolean;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react/jsx-runtime.js").JSX.Element | null;
 //# sourceMappingURL=BannerWarning.d.ts.map

package/dist/components/BannerWarning.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { Button, Flex, IconBox, Text } from '@citric/core';
 import { ExclamationTriangle, TimesCircleFill } from '@citric/icons';
 import { Alert } from '@citric/ui';

package/dist/components/Breadcrumb/index.d.ts

@@ -39,12 +39,12 @@ interface Props {
 interface ItemProps extends Pick<Props, 'currentPageKey'> {
     item: BreadcrumbItem;
 }
-declare const BreadcrumbItem: ({ item: { label, href, key }, currentPageKey }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const BreadcrumbItem: ({ item: { label, href, key }, currentPageKey }: ItemProps) => import("react/jsx-runtime.js").JSX.Element;
 /**
  * Builds a breadcrumb navigator based on the items passed in the properties.
  *
  * If the breadcrumb is obtained asynchronously, pass `isLoading = true` in order to show a loading feedback.
  */
-export declare const BreadcrumbList: ({ items, isLoading, shouldUpdatePageTitle, currentPageKey }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbList: ({ items, isLoading, shouldUpdatePageTitle, currentPageKey }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Breadcrumb/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Text } from '@citric/core';
 import { Skeleton } from '@citric/ui';
 import { last } from 'lodash';

package/dist/components/Breadcrumb/styled.js

@@ -2,36 +2,36 @@ import { getFontAppearance } from '@citric/core/dist/utils/theme.js';
 import { theme } from '@stack-spot/portal-theme';
 import { styled } from 'styled-components';
 // the type below should be inferred, but a bug in TS+PNPM prevents it: https://github.com/microsoft/TypeScript/issues/42873
-export const Box = styled.nav `
-  margin-bottom: 24px;
-  
-  ul {
-    display: flex;
-    flex-direction: row;
-  }
-
-  li {
-    display: flex;
-    flex-direction: row;
-
-    &:before {
-      content: '/';
-      font: ${({ theme }) => getFontAppearance(theme, 'breadcrumb')};
-      margin: 0 10px;
-      color: ${theme.color.light['700']};
-    }
-
-    &:first-child:before {
-      content: none;
-    }
-  }
-
-  a {
-    color: ${theme.color.light['700']};
-    &:hover {
-      text-decoration: underline;
-      color: ${theme.color.light.contrastText};
-    }
-  }
+export const Box = styled.nav `
+  margin-bottom: 24px;
+  
+  ul {
+    display: flex;
+    flex-direction: row;
+  }
+
+  li {
+    display: flex;
+    flex-direction: row;
+
+    &:before {
+      content: '/';
+      font: ${({ theme }) => getFontAppearance(theme, 'breadcrumb')};
+      margin: 0 10px;
+      color: ${theme.color.light['700']};
+    }
+
+    &:first-child:before {
+      content: none;
+    }
+  }
+
+  a {
+    color: ${theme.color.light['700']};
+    &:hover {
+      text-decoration: underline;
+      color: ${theme.color.light.contrastText};
+    }
+  }
 `;
 //# sourceMappingURL=styled.js.map

package/dist/components/ButtonLoading.d.ts

@@ -6,6 +6,6 @@ interface Props extends ButtonProps {
     children: ReactNode;
     onClick?: () => void;
 }
-export declare const ButtonLoading: ({ isLoading, loadingSize, children, disabled, sx, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonLoading: ({ isLoading, loadingSize, children, disabled, sx, ...props }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=ButtonLoading.d.ts.map

package/dist/components/ButtonLoading.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { Button, Text } from '@citric/core';
 import { LoadingCircular } from '@citric/ui';
 export const ButtonLoading = ({ isLoading, loadingSize = 'sm', children, disabled, sx, ...props }) => (_jsxs(Button, { type: "submit", ...props, disabled: isLoading || disabled, sx: { ...sx, position: 'relative' }, children: [_jsx(Text, { as: "span", sx: { visibility: isLoading ? 'hidden' : 'visible' }, children: children }), _jsx(LoadingCircular, { colorScheme: props.colorScheme, size: loadingSize, sx: { visibility: isLoading ? 'visible' : 'hidden', position: 'absolute' } })] }));

package/dist/components/ChatBot.d.ts

@@ -3,5 +3,5 @@
  *
  * This is a circular orange button with a chat icon if the chat window is closed or a close icon if the chat window is open.
  */
-export declare const ChatBot: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChatBot: () => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=ChatBot.d.ts.map

package/dist/components/ChatBot.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { Button, Flex, IconBox } from '@citric/core';
 import { QuestionAnswer, Times } from '@citric/icons';
 import { CHAT_BUTTON_ID, CHAT_BUTTON_WRAPPER_ID, getServiceNowLauncher, hideChatWindow, showChatWindow } from '../hooks/service-now.js';

package/dist/components/ContentValidateFilter.d.ts

@@ -2,5 +2,5 @@ export declare const ContentValidateFilter: ({ searchText, listLength, children,
     searchText?: string;
     listLength: number;
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=ContentValidateFilter.d.ts.map

package/dist/components/ContentValidateFilter.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime.js";
 import { PlaceholderResourceEmptySearch } from './Placeholder.js';
 export const ContentValidateFilter = ({ searchText, listLength, children, }) => {
     if (!listLength && searchText)

package/dist/components/FadingOverflow.d.ts

@@ -32,6 +32,6 @@ interface Props extends WithStyle {
  *
  * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
  */
-export declare const FadingOverflow: ({ children, scroll, sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FadingOverflow: ({ children, scroll, sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=FadingOverflow.d.ts.map

package/dist/components/FadingOverflow.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { IconBox } from '@citric/core';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons';
 import { listToClass, theme } from '@stack-spot/portal-theme';
@@ -20,74 +20,74 @@ const masks = {
     horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
     vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
 };
-const OverflowBox = styled.div `
-  &.hidden-scroll-bars::-webkit-scrollbar, &.scroll-arrows ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  &.scroll-arrows {
-    position: relative;
-
-    > .content {
-      width: 100%;
-    }
-  }
-
-  .scroll-to-left, .scroll-to-right, .scroll-to-top, .scroll-to-bottom {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s;
-
-    ${IconBox} {
-      background-color: ${theme.color.light[300]};
-      border-radius: 50%;
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &.visible {
-      opacity: 0.6;
-      pointer-events: auto;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .scroll-to-left {
-    right: unset;
-    height: unset;
-  }
-  
-  .scroll-to-right {
-    left: unset;
-    height: unset;
-  }
-  
-  .scroll-to-top {
-    bottom: unset;
-    width: unset;
-  }
-  
-  .scroll-to-bottom {
-    top: unset;
-    width: unset;
-  }
+const OverflowBox = styled.div `
+  &.hidden-scroll-bars::-webkit-scrollbar, &.scroll-arrows ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &.scroll-arrows {
+    position: relative;
+
+    > .content {
+      width: 100%;
+    }
+  }
+
+  .scroll-to-left, .scroll-to-right, .scroll-to-top, .scroll-to-bottom {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    ${IconBox} {
+      background-color: ${theme.color.light[300]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.visible {
+      opacity: 0.6;
+      pointer-events: auto;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .scroll-to-left {
+    right: unset;
+    height: unset;
+  }
+  
+  .scroll-to-right {
+    left: unset;
+    height: unset;
+  }
+  
+  .scroll-to-top {
+    bottom: unset;
+    width: unset;
+  }
+  
+  .scroll-to-bottom {
+    top: unset;
+    width: unset;
+  }
 `;
 /**
  * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.

package/dist/components/FileTreeView/More.d.ts

@@ -18,6 +18,6 @@ interface Props {
     loading?: boolean;
     menu: MenuOption[];
 }
-export declare function More({ loading, menu }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function More({ loading, menu }: Props): import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=More.d.ts.map

package/dist/components/FileTreeView/More.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { Box, IconBox, Text } from '@citric/core';
 import * as icons from '@citric/icons';
 import { EllipsisVertical } from '@citric/icons';

package/dist/components/FileTreeView/index.d.ts

@@ -27,6 +27,6 @@ interface Props {
      */
     fileTree: FileDir;
 }
-export declare const FileTreeView: ({ fileTree }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FileTreeView: ({ fileTree }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/FileTreeView/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime.js";
 import { Box, IconBox, Text } from '@citric/core';
 import { ChevronRight, Code, Folder } from '@citric/icons';
 import { theme } from '@stack-spot/portal-theme';

package/dist/components/InfiniteScroll.d.ts

@@ -7,5 +7,5 @@ import { Props as ReactInfiniteScrollProps } from 'react-infinite-scroll-compone
  *
  * By default, it adds the scrollable target as page and overflow hidden.
  */
-export declare const InfiniteScroll: ({ style, children, scrollableTarget, ...props }: Omit<ReactInfiniteScrollProps, "loader">) => import("react/jsx-runtime").JSX.Element;
+export declare const InfiniteScroll: ({ style, children, scrollableTarget, ...props }: Omit<ReactInfiniteScrollProps, "loader">) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=InfiniteScroll.d.ts.map

package/dist/components/InfiniteScroll.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Flex } from '@citric/core';
 import { LoadingCircular } from '@citric/ui';
 import ReactInfiniteScroll from 'react-infinite-scroll-component';

package/dist/components/InfoMaintenanceBanner.d.ts

@@ -3,6 +3,6 @@ interface InfoMaintenanceBannerProps {
     initialHour: string;
     endHour: string;
 }
-export declare const InfoMaintenanceBanner: ({ date, initialHour, endHour }: InfoMaintenanceBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InfoMaintenanceBanner: ({ date, initialHour, endHour }: InfoMaintenanceBannerProps) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=InfoMaintenanceBanner.d.ts.map

package/dist/components/InfoMaintenanceBanner.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Text } from '@citric/core';
 import { interpolate, useLanguage, useTranslate } from '@stack-spot/portal-translate';
 import { format } from 'date-fns';
-import { enUS, ptBR } from 'date-fns/locale';
+import { enUS, ptBR } from 'date-fns/locale.js';
 export const InfoMaintenanceBanner = ({ date, initialHour, endHour }) => {
     const t = useTranslate(dictionary);
     const language = useLanguage();

package/dist/components/LazyMarkdown/BlockquoteMd.d.ts

@@ -7,5 +7,5 @@
  */
 export declare const BlockquoteMd: ({ props }: {
     props: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=BlockquoteMd.d.ts.map

package/dist/components/LazyMarkdown/BlockquoteMd.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { Blockquote, Box, Flex, IconBox, Text } from '@citric/core';
 import * as icons from '@citric/icons';
 import { useTranslate } from '@stack-spot/portal-translate';

package/dist/components/LazyMarkdown/CodeViewer.d.ts

@@ -11,7 +11,7 @@ interface Props {
  *
 * @param options the props for rendering the component: {@link Props}.
  */
-export declare const CodeViewer: ({ language, data, onClickRefresh, scrollable, copyButton }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeViewer: ({ language, data, onClickRefresh, scrollable, copyButton }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export declare const codeViewerLocale: {
     en: {
         noData: string;