@stack-spot/portal-components 2.26.0 → 2.27.0

package/dist/components/LazyMarkdown/CodeViewer.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, Flex, Text } from '@citric/core';
 import { getColor, getRadius } from '@citric/core/dist/utils/theme.js';
 import { Copy, Refresh } from '@citric/icons';
@@ -26,81 +26,81 @@ const style = {
         },
     },
 };
-const Wrapper = styled(Box) `
-  background-color: ${theme.color.gray[900]};
-  border-radius: ${({ theme }) => getRadius(theme, 'xs')};
-  position: relative;
-  padding: 8px;
-  overflow: hidden;
-
-  > .scrollable-container {
-    min-height: 64px;
-    max-height: 232px;
-    overflow: auto;
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
-    }
-    &::-webkit-scrollbar-track {
-      background: ${theme.color.light[400]};
-      border-radius: 2px;
-    }
-    &::-webkit-scrollbar-thumb,
-    &::-webkit-scrollbar-thumb:hover {
-      background: ${theme.color.light[700]};
-      border-radius: 2px;
-    }
-  }
-
-  pre {
-    background-color: transparent;
-    font-family: 'Roboto Mono';
-    font-size: 14.4px;
-    padding: 0;
-    margin-top: 0;
-    overflow: unset;
-    text-shadow: none;
-    color: ${theme.color.gray[50]};
-  }
-
-  .hljs-string {
-    color: ${theme.color.teal[300]};
-  }
-  .hljs-tag {
-    color: ${({ theme }) => getColor(theme, 'teal')};
-  }
-  .hljs-attr {
-    color: ${theme.color.gray[50]};
-  }
-  .hljs-number {
-    color: ${theme.color.gray[300]};
-  }
-  .hljs-property {
-    color: ${theme.color.gray[50]};
-  }
-  .hljs-keyword {
-    color: ${theme.color.blue[200]};
-  }
-  .comment {
-    color: ${theme.color.gray[400]};
-  }
-  .hljs-expression {
-    color: ${theme.color.orange[400]};
-  }
-
-  .button-group {
-    position: absolute;
-    top: 8px;
-    right: 24px;
-    display: flex;
-
-    button {
-      margin-left: 6px;
-      &:focus {
-        background-color: ${({ theme }) => getColor(theme, 'light.300')};
-      }
-    }
-  }
+const Wrapper = styled(Box) `
+  background-color: ${theme.color.gray[900]};
+  border-radius: ${({ theme }) => getRadius(theme, 'xs')};
+  position: relative;
+  padding: 8px;
+  overflow: hidden;
+
+  > .scrollable-container {
+    min-height: 64px;
+    max-height: 232px;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background: ${theme.color.light[400]};
+      border-radius: 2px;
+    }
+    &::-webkit-scrollbar-thumb,
+    &::-webkit-scrollbar-thumb:hover {
+      background: ${theme.color.light[700]};
+      border-radius: 2px;
+    }
+  }
+
+  pre {
+    background-color: transparent;
+    font-family: 'Roboto Mono';
+    font-size: 14.4px;
+    padding: 0;
+    margin-top: 0;
+    overflow: unset;
+    text-shadow: none;
+    color: ${theme.color.gray[50]};
+  }
+
+  .hljs-string {
+    color: ${theme.color.teal[300]};
+  }
+  .hljs-tag {
+    color: ${({ theme }) => getColor(theme, 'teal')};
+  }
+  .hljs-attr {
+    color: ${theme.color.gray[50]};
+  }
+  .hljs-number {
+    color: ${theme.color.gray[300]};
+  }
+  .hljs-property {
+    color: ${theme.color.gray[50]};
+  }
+  .hljs-keyword {
+    color: ${theme.color.blue[200]};
+  }
+  .comment {
+    color: ${theme.color.gray[400]};
+  }
+  .hljs-expression {
+    color: ${theme.color.orange[400]};
+  }
+
+  .button-group {
+    position: absolute;
+    top: 8px;
+    right: 24px;
+    display: flex;
+
+    button {
+      margin-left: 6px;
+      &:focus {
+        background-color: ${({ theme }) => getColor(theme, 'light.300')};
+      }
+    }
+  }
 `;
 /**
  * CodeViewer component that displays code with syntax highlighting based on application theme and optional copy and refresh buttons.

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

@@ -14,6 +14,6 @@ interface MarkdownProps {
  *
  * @param options the props for rendering the component: {@link MarkdownProps}.
  */
-declare const Markdown: ({ children, components }: MarkdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const Markdown: ({ children, components }: MarkdownProps) => import("react/jsx-runtime.js").JSX.Element;
 export default Markdown;
 //# sourceMappingURL=Markdown.d.ts.map

package/dist/components/LazyMarkdown/Markdown.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Box, Image, Link, Text } from '@citric/core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@citric/ui';
 import ReactMarkdown from 'react-markdown';

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

@@ -14,6 +14,6 @@ interface MarkdownButtonProps {
  *
  * @param options the props for rendering the component: {@link MarkdownButtonProps}.
  */
-export declare const MarkdownButton: ({ ...props }: MarkdownButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MarkdownButton: ({ ...props }: MarkdownButtonProps) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=MarkdownButton.d.ts.map

package/dist/components/LazyMarkdown/MarkdownButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { IconButton } from '@citric/ui';
 /**
  * Renders a component that provides an IconButton with custom styles and content.

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

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

package/dist/components/LazyMarkdown/Video.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 /**
  * Video component that renders an iframe with the given source URL.
  *

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

@@ -5,6 +5,6 @@ interface Props {
     language?: string;
     components?: Components;
 }
-declare const LazyMarkdown: ({ children, components }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const LazyMarkdown: ({ children, components }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export { LazyMarkdown, MarkdownButton };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/LazyMarkdown/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Skeleton } from '@citric/ui';
 import { Suspense, lazy } from 'react';
 import { MarkdownButton } from './MarkdownButton.js';

package/dist/components/Placeholder.d.ts

@@ -16,8 +16,8 @@ interface PropsCallToAction extends Props {
     subDescription?: string;
     titleAs?: AsProp;
 }
-export declare const Placeholder: ({ title, description, button, img, fullWidth, show, sx, style, className }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export declare const PlaceholderCallToAction: ({ title, description, subDescription, img, button, fullWidth, show, sx, sxCard, style, className, titleAs, }: PropsCallToAction) => import("react/jsx-runtime").JSX.Element | null;
-export declare const PlaceholderResourceEmptySearch: ({ title, description }: Pick<Props, "title" | "description">) => import("react/jsx-runtime").JSX.Element;
+export declare const Placeholder: ({ title, description, button, img, fullWidth, show, sx, style, className }: Props) => import("react/jsx-runtime.js").JSX.Element | null;
+export declare const PlaceholderCallToAction: ({ title, description, subDescription, img, button, fullWidth, show, sx, sxCard, style, className, titleAs, }: PropsCallToAction) => import("react/jsx-runtime.js").JSX.Element | null;
+export declare const PlaceholderResourceEmptySearch: ({ title, description }: Pick<Props, "title" | "description">) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=Placeholder.d.ts.map

package/dist/components/Placeholder.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 { useTranslate } from '@stack-spot/portal-translate';
 import { Box, Flex, Text } from '@citric/core';
 import { Card, CardContent } from '@citric/ui';

package/dist/components/ScrollView.js

@@ -10,21 +10,21 @@ function getDirectionStyle({ direction = 'both', scrollType = 'auto' }) {
  *
  * @param options the props for rendering the component: {@link Props}.
  */
-export const ScrollView = styled.div `
-  ${getDirectionStyle}
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-  &::-webkit-scrollbar-track {
-    background: ${({ theme, trackColor = 'light.400' }) => getColor(theme, trackColor)};
-    border-radius: 2px;
-    left: 40px;
-  }
-  &::-webkit-scrollbar-thumb,
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${({ theme, thumbColor = 'light.700' }) => getColor(theme, thumbColor)};
-    border-radius: 2px;
-  }
+export const ScrollView = styled.div `
+  ${getDirectionStyle}
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: ${({ theme, trackColor = 'light.400' }) => getColor(theme, trackColor)};
+    border-radius: 2px;
+    left: 40px;
+  }
+  &::-webkit-scrollbar-thumb,
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ theme, thumbColor = 'light.700' }) => getColor(theme, thumbColor)};
+    border-radius: 2px;
+  }
 `;
 //# sourceMappingURL=ScrollView.js.map

package/dist/components/Select/BadgeItem.d.ts

@@ -1,4 +1,4 @@
 import { GroupBase, MultiValueProps } from 'react-select';
 import { CreatableSelectOptionType } from './types.js';
-export declare const BadgeItem: (props: MultiValueProps<CreatableSelectOptionType, boolean, GroupBase<any>>) => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeItem: (props: MultiValueProps<CreatableSelectOptionType, boolean, GroupBase<any>>) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=BadgeItem.d.ts.map

package/dist/components/Select/BadgeItem.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { TimesMini } from '@citric/icons';
 import { Badge, IconButton } from '@citric/ui';
 import { interpolate, useTranslate } from '@stack-spot/portal-translate';

package/dist/components/Select/ClearInput.d.ts

@@ -1,3 +1,3 @@
 import { ClearIndicatorProps } from 'react-select';
-export declare const ClearInput: (props: ClearIndicatorProps<any>) => import("react/jsx-runtime").JSX.Element;
+export declare const ClearInput: (props: ClearIndicatorProps<any>) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=ClearInput.d.ts.map

package/dist/components/Select/ClearInput.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Times } from '@citric/icons';
 import { IconButton } from '@citric/ui';
 import { useTranslate } from '@stack-spot/portal-translate';

package/dist/components/Select/CloseItem.d.ts

@@ -1,3 +1,3 @@
 import { MultiValueRemoveProps } from 'react-select';
-export declare const CloseItem: (props: MultiValueRemoveProps<any>) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseItem: (props: MultiValueRemoveProps<any>) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=CloseItem.d.ts.map

package/dist/components/Select/CloseItem.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { IconBox } from '@citric/core';
 import { TimesMini } from '@citric/icons';
 import { IconButton } from '@citric/ui';

package/dist/components/Select/CreatableSelect.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime.js";
 import { theme } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
 import Creatable from 'react-select/creatable';

package/dist/components/Select/CustomMenu.d.ts

@@ -3,6 +3,6 @@ import { GroupBase, MenuProps } from 'react-select';
 interface CustomMenuProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends MenuProps<Option, IsMulti, Group> {
     afterList?: ReactNode;
 }
-export declare const CustomMenu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: CustomMenuProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomMenu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: CustomMenuProps<Option, IsMulti, Group>) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=CustomMenu.d.ts.map

package/dist/components/Select/CustomMenu.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { components } from 'react-select';
 export const CustomMenu = (props) => (_jsxs(components.Menu, { ...props, children: [props.children, props.afterList && _jsx(_Fragment, { children: props.afterList })] }));
 //# sourceMappingURL=CustomMenu.js.map

package/dist/components/Select/LabelItem.d.ts

@@ -1,3 +1,3 @@
 import { MultiValueGenericProps } from 'react-select';
-export declare const LabelItem: (props: MultiValueGenericProps<any>) => import("react/jsx-runtime").JSX.Element;
+export declare const LabelItem: (props: MultiValueGenericProps<any>) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=LabelItem.d.ts.map

package/dist/components/Select/LabelItem.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Box, Text } from '@citric/core';
 export const LabelItem = (props) => (_jsx(Box, { children: _jsx(Text, { children: props.data.label }) }));
 //# sourceMappingURL=LabelItem.js.map

package/dist/components/Select/MultiValue.d.ts

@@ -1,3 +1,3 @@
 import { MultiValueProps } from 'react-select';
-export declare const MultiValue: (props: MultiValueProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiValue: (props: MultiValueProps) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=MultiValue.d.ts.map

package/dist/components/Select/MultiValue.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 { TimesMini } from '@citric/icons';
 import { Badge, IconButton } from '@citric/ui';
 import { interpolate, useTranslate } from '@stack-spot/portal-translate';

package/dist/components/Select/SelectInfiniteScroll.d.ts

@@ -9,6 +9,6 @@ export interface SelectInfiniteScrollProps extends SelectSearchProps {
     hasMore: boolean;
     isLoadingMore?: boolean;
 }
-export declare const SelectInfiniteScroll: ({ options, loadMore, hasMore, isLoadingMore, ...props }: SelectInfiniteScrollProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInfiniteScroll: ({ options, loadMore, hasMore, isLoadingMore, ...props }: SelectInfiniteScrollProps) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=SelectInfiniteScroll.d.ts.map

package/dist/components/Select/SelectInfiniteScroll.js

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

package/dist/components/Select/SelectSearch.d.ts

@@ -7,5 +7,5 @@ export interface SelectSearchProps extends Partial<SelectProps> {
     onChange?: (newValue?: any) => void;
     ref?: RefCallback<any>;
 }
-export declare const SelectSearch: ({ options, components: customComponents, onChange, styles: customStyles, disabled, ref, ...props }: SelectSearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectSearch: ({ options, components: customComponents, onChange, styles: customStyles, disabled, ref, ...props }: SelectSearchProps) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=SelectSearch.d.ts.map

package/dist/components/Select/SelectSearch.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime.js";
 import { IconBox } from '@citric/core';
 import { ChevronDown } from '@citric/icons';
 import { theme } from '@stack-spot/portal-theme';

package/dist/components/SelectionList.d.ts

@@ -146,6 +146,6 @@ export interface SelectionListProps extends WithStyle {
  * This component implements keyboard controls and accessibility features.
  * @param props the component's props {@link SelectionListProps}.
  */
-export declare const SelectionList: ({ id, items, className, style, visible, maxHeight, onHide, before, after, scroll, showListAsCard, }: SelectionListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionList: ({ id, items, className, style, visible, maxHeight, onHide, before, after, scroll, showListAsCard, }: SelectionListProps) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=SelectionList.d.ts.map

package/dist/components/SelectionList.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 { Flex, IconBox, Text } from '@citric/core';
 import { ArrowLeft, Check, ChevronRight } from '@citric/icons';
 import { IconButton } from '@citric/ui';
@@ -10,66 +10,66 @@ import { useAnchorTag } from '../context/anchor.js';
 import { useKeyboardControls } from '../hooks/keyboard.js';
 const ANIMATION_DURATION_MS = 300;
 const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`;
-const SelectionBox = styled.div `
-  max-height: 0;
-  overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
-  overflow-x: hidden;
-  transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
-  z-index: 1;
-  box-shadow: 4px 4px 48px #000;
-  border-radius: 0.5rem;
-  visibility: hidden;
-
-  .selection-list-content {
-    display: flex;
-    flex-direction: column;
-    border-radius: 0.5rem;
-    background-color: ${theme.color.light['300']};
-    padding-inline: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
-  }
-
-  .section-title, li > a {
-    height: 40px;
-    padding: 0 8px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  li > a {
-    gap: 4px;
-    transition: background-color 0.2s;
-    &:hover, &:focus {
-      background: ${theme.color.light['400']};
-    }
-    .label {
-      flex: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  li.action {
-    background-color: ${({ $showListAsCard }) => $showListAsCard ? theme.color.light['400'] : ''};
-    border:  ${({ $showListAsCard }) => '1px solid' + $showListAsCard ? theme.color.light['500'] : 'transparent'};
-    border-radius: ${({ $showListAsCard }) => $showListAsCard ? '4px' : '0'};
-    margin-bottom: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
-  }
-
-  li.section {
-    border-bottom: 2px solid;
-    border-bottom-color: ${({ $showListAsCard }) => $showListAsCard ? 'transparent' : theme.color.light['600']};
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  &.visible {
-    max-height: ${({ $maxHeight }) => $maxHeight};
-    visibility: visible;
-    transition: ${MAX_HEIGHT_TRANSITION};
-  }
+const SelectionBox = styled.div `
+  max-height: 0;
+  overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
+  overflow-x: hidden;
+  transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
+  z-index: 1;
+  box-shadow: 4px 4px 48px #000;
+  border-radius: 0.5rem;
+  visibility: hidden;
+
+  .selection-list-content {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0.5rem;
+    background-color: ${theme.color.light['300']};
+    padding-inline: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
+  }
+
+  .section-title, li > a {
+    height: 40px;
+    padding: 0 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  li > a {
+    gap: 4px;
+    transition: background-color 0.2s;
+    &:hover, &:focus {
+      background: ${theme.color.light['400']};
+    }
+    .label {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  li.action {
+    background-color: ${({ $showListAsCard }) => $showListAsCard ? theme.color.light['400'] : ''};
+    border:  ${({ $showListAsCard }) => '1px solid' + $showListAsCard ? theme.color.light['500'] : 'transparent'};
+    border-radius: ${({ $showListAsCard }) => $showListAsCard ? '4px' : '0'};
+    margin-bottom: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
+  }
+
+  li.section {
+    border-bottom: 2px solid;
+    border-bottom-color: ${({ $showListAsCard }) => $showListAsCard ? 'transparent' : theme.color.light['600']};
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &.visible {
+    max-height: ${({ $maxHeight }) => $maxHeight};
+    visibility: visible;
+    transition: ${MAX_HEIGHT_TRANSITION};
+  }
 `;
 function renderAction({ label, href, onClick, icon, iconRight, active, target, iconActive = _jsx(Check, {}), className = '', lang, hrefLang, title, role = 'link', }, { onClose, Link }) {
     function handleClick(event) {

package/dist/components/StatusCircle.d.ts

@@ -19,6 +19,6 @@ interface WithTooltip {
  *
  * @param props the component's props {@link Props}.
  */
-export declare const StatusCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<WithTooltip, Props>> & string & Omit<({ tooltip, className, style }: WithTooltip) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const StatusCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<WithTooltip, Props>> & string & Omit<({ tooltip, className, style }: WithTooltip) => import("react/jsx-runtime.js").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};
 //# sourceMappingURL=StatusCircle.d.ts.map

package/dist/components/StatusCircle.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { getColor } from '@citric/core/dist/utils/theme.js';
 import { Tooltip } from '@citric/ui';
 import styled from 'styled-components';
@@ -35,10 +35,10 @@ const CircleWithTooltip = ({ tooltip, className, style }) => {
  *
  * @param props the component's props {@link Props}.
  */
-export const StatusCircle = styled(CircleWithTooltip) `
-  background-color: ${({ status, theme }) => getColorFromStatus(theme, status)};
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
+export const StatusCircle = styled(CircleWithTooltip) `
+  background-color: ${({ status, theme }) => getColorFromStatus(theme, status)};
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
 `;
 //# sourceMappingURL=StatusCircle.js.map

package/dist/components/Stepper/Navigation.js

@@ -1,13 +1,13 @@
-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, Text } from '@citric/core';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { useContext } from 'react';
 import { styled } from 'styled-components';
 import { useLoadingComponent } from '../../context/loading.js';
 import { StepperContext } from './Stepper.js';
-const Wrapper = styled(Flex) `
-  width: 100%;
-  justify-content: space-between;
+const Wrapper = styled(Flex) `
+  width: 100%;
+  justify-content: space-between;
 `;
 /**
  * Renders a component that represents the stepper component's navigation buttons, containing the button options (back, skip, and next).

package/dist/components/Stepper/Step.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Box } from '@citric/core';
 import { styled } from 'styled-components';
-const Wrapper = styled(Box) `
-  width: 100%;
+const Wrapper = styled(Box) `
+  width: 100%;
 `;
 /**
  * Renders a component that represents the body of a step within the stepper component.