@stack-spot/portal-components 2.26.0 → 2.27.0

package/dist/components/Stepper/Stepper.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, Flex } from '@citric/core';
 import { createContext, useState } from 'react';
 import { styled } from 'styled-components';
@@ -12,12 +12,12 @@ const StepperContext = createContext({
     goToPreviousStep: () => { },
     goToStep: () => { },
 });
-const Wrapper = styled(Box) `
-  width: 100%;
-  gap: 1.5rem;
+const Wrapper = styled(Box) `
+  width: 100%;
+  gap: 1.5rem;
 `;
-const ContentWrapper = styled(Flex) `
-  width: 100%;
+const ContentWrapper = styled(Flex) `
+  width: 100%;
 `;
 /**
  * Renders a component that provides an interface of steps for creating some content.

package/dist/components/Stepper/headers.js

@@ -1,31 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { Box, Flex, Text } from '@citric/core';
 import { theme } from '@stack-spot/portal-theme';
 import { useContext } from 'react';
 import { styled } from 'styled-components';
 import { StepperContext } from './Stepper.js';
-const StyledStepHeader = styled(Box) `
-  flex: 1;
-  border-top: 0.25rem solid ${theme.color.light[600]};
-  padding-top: 1rem;
-
-  &.active {
-    border-color: ${theme.color.primary[500]};
-  }
-
-  &.finished {
-    flex: unset;
-    width: 4.5rem;
-    border-color: ${theme.color.success[500]};
-  }
+const StyledStepHeader = styled(Box) `
+  flex: 1;
+  border-top: 0.25rem solid ${theme.color.light[600]};
+  padding-top: 1rem;
+
+  &.active {
+    border-color: ${theme.color.primary[500]};
+  }
+
+  &.finished {
+    flex: unset;
+    width: 4.5rem;
+    border-color: ${theme.color.success[500]};
+  }
 `;
-const StyledStepHeaderText = styled(Text) `
-  color: ${theme.color.light.contrastText};
-  width: 100%;
-  height: 1.5rem;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+const StyledStepHeaderText = styled(Text) `
+  color: ${theme.color.light.contrastText};
+  width: 100%;
+  height: 1.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 /**
  * Renders a component that represents the visual part of a step within the stepper component.

package/dist/components/Table/HeaderItem.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 { SortAscending, SortDescending } from '@citric/icons';
 export const parseParams = ({ key, sort }) => key && sort ? `${key?.toUpperCase()}_${sort?.toUpperCase()}` : undefined;

package/dist/components/Table/SettingsVerticalMenu.d.ts

@@ -9,6 +9,6 @@ interface SettingsVerticalMenuProps {
     buttonDataTestHint?: string;
     items: React.ComponentProps<typeof SelectionList>['items'];
 }
-export declare const SettingsVerticalMenu: ({ id, buttonAriaLabel, size, buttonDataTestHint, sxIconButton, items }: SettingsVerticalMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SettingsVerticalMenu: ({ id, buttonAriaLabel, size, buttonDataTestHint, sxIconButton, items }: SettingsVerticalMenuProps) => import("react/jsx-runtime.js").JSX.Element | null;
 export {};
 //# sourceMappingURL=SettingsVerticalMenu.d.ts.map

package/dist/components/Table/SettingsVerticalMenu.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 } from '@citric/core';
 import { EllipsisVertical } from '@citric/icons';
 import { IconButton } from '@citric/ui';

package/dist/components/Table/StyledLinkTable.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
 export declare const StyledLinkTable: ({ children, ...props }: {
     children: ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => import("react/jsx-runtime").JSX.Element;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=StyledLinkTable.d.ts.map

package/dist/components/Table/StyledLinkTable.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import styled from 'styled-components';
 import { useAnchorTag } from '../../context/anchor.js';
-const StyledLink = styled.a `
-  &:hover {
-    text-decoration: underline;
-  }
+const StyledLink = styled.a `
+  &:hover {
+    text-decoration: underline;
+  }
 `;
 export const StyledLinkTable = ({ children, ...props }) => {
     const Link = useAnchorTag();

package/dist/components/Table/TableData.d.ts

@@ -32,6 +32,6 @@ type TableProps<T, K extends keyof T> = {
      */
     afterContent?: React.ReactElement;
 };
-export declare const TableData: <T, K extends keyof T>({ data, columns, onSort, onRemove, canRemove, tableAppearance, options, sxHeader, hasHeaderBorder, searchParamName, initialSortDetails, afterContent, }: TableProps<T, K>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableData: <T, K extends keyof T>({ data, columns, onSort, onRemove, canRemove, tableAppearance, options, sxHeader, hasHeaderBorder, searchParamName, initialSortDetails, afterContent, }: TableProps<T, K>) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=TableData.d.ts.map

package/dist/components/Table/TableData.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 { Button, IconBox, Text } from '@citric/core';
 import { Trash } from '@citric/icons';
 import { LoadingCircular, Table, Tbody, Td, Th, Thead, Tr } from '@citric/ui';
@@ -9,31 +9,31 @@ import styled from 'styled-components';
 import { ContentValidateFilter } from '../ContentValidateFilter.js';
 import { HeaderSort } from './HeaderItem.js';
 import { SettingsVerticalMenu } from './SettingsVerticalMenu.js';
-const StyledTh = styled(Th) `
-  border-top: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
-  border-bottom: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
-  &:first-child {
-    border-left: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-  }
-  &:last-child {
-    border-right: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
+const StyledTh = styled(Th) `
+  border-top: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+  border-bottom: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+  &:first-child {
+    border-left: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  &:last-child {
+    border-right: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
 `;
-const StyledTd = styled(Td) `
-  border-radius: 0px !important;
-  
-  &:first-child {
-    border-top-left-radius: 4px !important;
-    border-bottom-left-radius: 4px !important;
-  }
-  &:last-child {
-    border-top-right-radius: 4px !important;
-    border-bottom-right-radius: 4px !important;
-  }
+const StyledTd = styled(Td) `
+  border-radius: 0px !important;
+  
+  &:first-child {
+    border-top-left-radius: 4px !important;
+    border-bottom-left-radius: 4px !important;
+  }
+  &:last-child {
+    border-top-right-radius: 4px !important;
+    border-bottom-right-radius: 4px !important;
+  }
 `;
 const TableHeader = ({ columns, onSort, onRemove, sxTh, hasBorder, initialSortDetails }) => {
     const [sort, setSort] = useState(initialSortDetails?.direction);

package/dist/components/TimelineSection.d.ts

@@ -19,6 +19,6 @@ interface Props {
  * Renders a section in a timeline where the left side is a header with the date and the right side is the content (children).
  * @param props React props: {@link Props}.
  */
-export declare const TimelineSection: ({ children, day, month, className, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineSection: ({ children, day, month, className, style }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=TimelineSection.d.ts.map

package/dist/components/TimelineSection.js

@@ -1,20 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { Text } from '@citric/core';
 import { useMonthDictionary, useTranslate } from '@stack-spot/portal-translate';
 import { styled } from 'styled-components';
-const Styled = styled.div `
-  display: flex;
-  flex-direction: row;
-  align-items: start;
-
-  .timeline-section-header {
-    width: 80px;
-  }
-
-  .timeline-section-content {
-    min-width: 0;
-    flex: 1;
-  }
+const Styled = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+
+  .timeline-section-header {
+    width: 80px;
+  }
+
+  .timeline-section-content {
+    min-width: 0;
+    flex: 1;
+  }
 `;
 /**
  * Renders a section in a timeline where the left side is a header with the date and the right side is the content (children).

package/dist/components/error/ErrorFeedback.d.ts

@@ -54,5 +54,5 @@ export interface ErrorDescription {
  *
  * @param options the error code, the error message and whether or not the application is in debug mode.
  */
-export declare const ErrorFeedback: ({ code, message, debug, title, body, image, action, description, help, direction, style, className }: ErrorDescription) => import("react/jsx-runtime").JSX.Element;
+export declare const ErrorFeedback: ({ code, message, debug, title, body, image, action, description, help, direction, style, className }: ErrorDescription) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=ErrorFeedback.d.ts.map

package/dist/components/error/ErrorFeedback.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 { Button, LinkBox, Text } from '@citric/core';
 import { listToClass, theme } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
@@ -18,40 +18,40 @@ const imageMap = {
     403: _jsx(Forbidden, { style: imageStyle }),
     404: _jsx(NotFound, { style: imageStyle }),
 };
-const FeedbackBox = styled.div `
-  background-color: ${theme.color.light[400]};
-  padding: 24px;
-  .content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    &.row {
-      flex-direction: row;
-      gap: 40px;
-    }
-    &.column {
-      flex-direction: column;
-      .text-content {
-        align-items: center;
-      }
-    }
-    .text-content {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: row;
-      gap: '10px';
-    }
-    .details {
-      background-color: ${theme.color.danger[500]};
-      color: ${theme.color.danger.contrastText};
-      padding: 12px;
-      border-radius: 5px;
-    }
-  }
+const FeedbackBox = styled.div `
+  background-color: ${theme.color.light[400]};
+  padding: 24px;
+  .content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.row {
+      flex-direction: row;
+      gap: 40px;
+    }
+    &.column {
+      flex-direction: column;
+      .text-content {
+        align-items: center;
+      }
+    }
+    .text-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      gap: '10px';
+    }
+    .details {
+      background-color: ${theme.color.danger[500]};
+      color: ${theme.color.danger.contrastText};
+      padding: 12px;
+      border-radius: 5px;
+    }
+  }
 `;
 /**
  * A box with an icon and an error message. This is used for giving error feedbacks to the user.

package/dist/components/error/NotFound.d.ts

@@ -1,4 +1,4 @@
 export declare const PageNotFound: ({ goHome }: {
     goHome?: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=NotFound.d.ts.map

package/dist/components/error/NotFound.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { useTranslate } from '@stack-spot/portal-translate';
 import { ErrorFeedback } from './ErrorFeedback.js';
 export const PageNotFound = ({ goHome }) => {

package/dist/components/error/UnderMaintenance.d.ts

@@ -1,4 +1,4 @@
 export declare const UnderMaintenance: ({ refresh }: {
     refresh?: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=UnderMaintenance.d.ts.map

package/dist/components/error/UnderMaintenance.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { useTranslate } from '@stack-spot/portal-translate';
 import { ErrorFeedback } from './ErrorFeedback.js';
 export const UnderMaintenance = ({ refresh }) => {

package/dist/components/form/Form/Form.d.ts

@@ -11,5 +11,5 @@ export interface FormProps {
     style?: React.CSSProperties;
     className?: string;
 }
-export declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: (props: FormProps) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=Form.d.ts.map

package/dist/components/form/Form/Form.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { get } from 'lodash';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 function handleGraphqlErrors(error, methods) {

package/dist/components/form/Form/FormGroup.d.ts

@@ -28,10 +28,10 @@ interface FormGroupProps<T extends ElementType> {
     shouldUnregister?: boolean;
 }
 type Props<T extends ElementType> = FormGroupProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof FormGroupProps<T>>;
-export declare const FormGroup: <T extends ElementType>({ fieldAddonAfter, fieldAddonBefore, formHelper, id, name, component, label, registerOptions, formGroupSx, formItemSx, componentSx, disabled, readOnly, onChange, tooltipProps, required, colorScheme: propColorScheme, fieldAddonBeforeSx, fieldAddonAfterSx, standalone, delay, hideRequiredSymbol, shouldUnregister, ...props }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormGroup: <T extends ElementType>({ fieldAddonAfter, fieldAddonBefore, formHelper, id, name, component, label, registerOptions, formGroupSx, formItemSx, componentSx, disabled, readOnly, onChange, tooltipProps, required, colorScheme: propColorScheme, fieldAddonBeforeSx, fieldAddonAfterSx, standalone, delay, hideRequiredSymbol, shouldUnregister, ...props }: Props<T>) => import("react/jsx-runtime.js").JSX.Element;
 export declare const FormItemError: ({ name, id }: {
     name: string;
     id: string;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react/jsx-runtime.js").JSX.Element | null;
 export {};
 //# sourceMappingURL=FormGroup.d.ts.map

package/dist/components/form/Form/FormGroup.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime.js";
 import { Box, Flex, IconBox, Input, Label } from '@citric/core';
 import { InfoCircle, TimesCircle } from '@citric/icons';
 import { FieldAddon, FieldGroup, FormHelper, FormItem, Tooltip } from '@citric/ui';

package/dist/components/form/SearchInput.d.ts

@@ -5,5 +5,5 @@ export declare const SearchInput: ({ searchText, defaultValue, disabled, onChang
     onChange: (value?: string) => void;
     style?: React.CSSProperties;
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/form/SearchInput.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, Input } from '@citric/core';
 import { Filter, Times } from '@citric/icons';
 import { FieldAddon, FieldGroup, IconButton } from '@citric/ui';

package/dist/components/form/Select/CustomSelect.d.ts

@@ -77,5 +77,5 @@ import { CustomSelectProps } from './types.js';
  * ```
  * @param props the component props: {@link CustomSelectProps}.
  */
-export declare function CustomSelect<T>({ onChange, options, value, emptyOption, renderLabel, renderValue, maxItems, onFocus, onBlur, style, className, isLoading, disabled, height, ...props }: CustomSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function CustomSelect<T>({ onChange, options, value, emptyOption, renderLabel, renderValue, maxItems, onFocus, onBlur, style, className, isLoading, disabled, height, ...props }: CustomSelectProps<T>): import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=CustomSelect.d.ts.map

package/dist/components/form/Select/CustomSelect.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 } from '@citric/icons';
 import { LoadingCircular } from '@citric/ui';

package/dist/components/form/Select/DetailedSelect.d.ts

@@ -61,5 +61,5 @@ import { DetailedSelectProps } from './types.js';
  * ```
  * @param props the component props: {@link DetailedSelectProps}.
  */
-export declare function DetailedSelect<T>({ renderLabel, emptyOption, ...props }: DetailedSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DetailedSelect<T>({ renderLabel, emptyOption, ...props }: DetailedSelectProps<T>): import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=DetailedSelect.d.ts.map

package/dist/components/form/Select/DetailedSelect.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { useCallback } from 'react';
 import { CustomSelect } from './CustomSelect.js';
 import { parseLabel } from './utils.js';

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

@@ -43,5 +43,5 @@ import { SelectProps } from './types.js';
  * ```
  * @param props the component props: {@link CustomSelectProps}.
  */
-export declare function Select<T>({ renderLabel, emptyOption, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<T>({ renderLabel, emptyOption, ...props }: SelectProps<T>): import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

package/dist/components/form/Select/Select.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { useCallback } from 'react';
 import { CustomSelect } from './CustomSelect.js';
 import { parseLabel } from './utils.js';