@ultraviolet/plus 3.0.0-beta.16 → 3.0.0-beta.18

package/dist/components/EstimateCost/OverlayContext.js

@@ -1,9 +1,7 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-const OverlayContext = createContext({
-  isOverlay: false
-});
+const OverlayContext = createContext({ isOverlay: false });
 const useOverlay = () => useContext(OverlayContext);
 const OverlayContextProvider = ({
   children,

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

@@ -9,5 +9,5 @@ type FAQProps = {
     title: string;
     style?: CSSProperties;
 };
-export declare const FAQ: ({ productIconName, illustrationText, title, description, notes, style, }: FAQProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FAQ: ({ productIconName, illustrationText, title, description, notes, style, }: FAQProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FAQ/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as ProductIcon from "@ultraviolet/icons/product";
 import { Card, Stack, Bullet, Text } from "@ultraviolet/ui";
 import { faq } from "./styles.css.js";

package/dist/components/InfoTable/InfoTable.d.ts

@@ -11,17 +11,17 @@ type InfoTableProps = {
  * Create rows with `InfoTable.Row` and place cells within each row using `InfoTable.Cell`.
  */
 export declare const InfoTable: {
-    ({ children, width, className, style, "data-testid": dataTestId, }: InfoTableProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, width, className, style, "data-testid": dataTestId, }: InfoTableProps): import("react/jsx-runtime").JSX.Element;
     Row: ({ children, templateColumns, style, }: {
         children: ReactNode;
         templateColumns: string;
         style?: CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     Cell: ({ children, title, multiline, style, }: {
         children: ReactNode;
         title: ReactNode;
         multiline?: boolean;
         style?: CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/InfoTable/InfoTable.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { InfoTableCell } from "./components/Cell.js";
 import { InfoTableRow } from "./components/Row.js";
 import { InfoTableContext } from "./context.js";
@@ -10,9 +10,15 @@ const InfoTable = ({
   className,
   style,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsx(InfoTableContext.Provider, { value: {
-  width
-}, children: /* @__PURE__ */ jsx("dl", { className: `${className ? `${className} ` : ""}${dl}`, "data-testid": dataTestId, style, children }) });
+}) => /* @__PURE__ */ jsx(InfoTableContext.Provider, { value: { width }, children: /* @__PURE__ */ jsx(
+  "dl",
+  {
+    className: `${className ? `${className} ` : ""}${dl}`,
+    "data-testid": dataTestId,
+    style,
+    children
+  }
+) });
 InfoTable.Row = InfoTableRow;
 InfoTable.Cell = InfoTableCell;
 export {

package/dist/components/InfoTable/components/Cell.d.ts

@@ -5,5 +5,5 @@ type CellProps = {
     multiline?: boolean;
     style?: CSSProperties;
 };
-export declare const InfoTableCell: ({ children, title, multiline, style, }: CellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const InfoTableCell: ({ children, title, multiline, style, }: CellProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfoTable/components/Cell.js

@@ -1,15 +1,35 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Stack, Text } from "@ultraviolet/ui";
-import { term, desc, cellText, cellTextOneLine } from "../styles.css.js";
+import { term, desc, cellText } from "../styles.css.js";
 const InfoTableCell = ({
   children,
   title,
   multiline = false,
   style
 }) => /* @__PURE__ */ jsxs(Stack, { gap: "0.5", minWidth: "0", style, width: "100%", children: [
-  /* @__PURE__ */ jsx("dt", { className: term, children: /* @__PURE__ */ jsx(Text, { as: "div", prominence: "weak", sentiment: "neutral", variant: "bodySmallStrong", children: title }) }),
-  /* @__PURE__ */ jsx("dd", { className: desc, children: /* @__PURE__ */ jsx(Text, { as: "div", className: `${cellText} ${!multiline ? cellTextOneLine : ""}`, oneLine: !multiline, prominence: "default", sentiment: "neutral", variant: "body", children }) })
+  /* @__PURE__ */ jsx("dt", { className: term, children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "div",
+      prominence: "weak",
+      sentiment: "neutral",
+      variant: "bodySmallStrong",
+      children: title
+    }
+  ) }),
+  /* @__PURE__ */ jsx("dd", { className: desc, children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "div",
+      className: `${cellText}`,
+      oneLine: !multiline,
+      prominence: "default",
+      sentiment: "neutral",
+      variant: "body",
+      children
+    }
+  ) })
 ] });
 export {
   InfoTableCell

package/dist/components/InfoTable/components/Row.d.ts

@@ -4,5 +4,5 @@ type RowProps = {
     templateColumns: string;
     style?: CSSProperties;
 };
-export declare const InfoTableRow: ({ children, templateColumns, style, }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const InfoTableRow: ({ children, templateColumns, style, }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfoTable/components/Row.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Row } from "@ultraviolet/ui";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useContext } from "react";
@@ -10,15 +10,21 @@ const InfoTableRow = ({
   templateColumns,
   style
 }) => {
-  const {
-    width
-  } = useContext(InfoTableContext);
-  return /* @__PURE__ */ jsx(Row, { className: infoTableRow, style: {
-    ...assignInlineVars({
-      [rowWidth]: width ?? "100%"
-    }),
-    ...style
-  }, templateColumns, children });
+  const { width } = useContext(InfoTableContext);
+  return /* @__PURE__ */ jsx(
+    Row,
+    {
+      className: infoTableRow,
+      style: {
+        ...assignInlineVars({
+          [rowWidth]: width ?? "100%"
+        }),
+        ...style
+      },
+      templateColumns,
+      children
+    }
+  );
 };
 export {
   InfoTableRow

package/dist/components/InfoTable/styles.css.d.ts

@@ -4,4 +4,3 @@ export declare const infoTableRow: string;
 export declare const term: string;
 export declare const desc: string;
 export declare const cellText: string;
-export declare const cellTextOneLine: string;

package/dist/components/InfoTable/styles.css.js

@@ -5,10 +5,8 @@ var infoTableRow = "uv_plus_h6pvpm2";
 var term = "uv_plus_h6pvpm3";
 var desc = "uv_plus_h6pvpm4";
 var cellText = "uv_plus_h6pvpm5";
-var cellTextOneLine = "uv_plus_h6pvpm6";
 export {
   cellText,
-  cellTextOneLine,
   desc,
   dl,
   infoTableRow,

package/dist/components/Navigation/Footer.d.ts

@@ -4,5 +4,5 @@ type FooterProps = {
     onToggleExpand: NavigationProps['onToggleExpand'];
     contentRef: RefObject<HTMLDivElement | null>;
 };
-export declare const Footer: ({ onToggleExpand, contentRef }: FooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Footer: ({ onToggleExpand, contentRef }: FooterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Navigation/Footer.js

@@ -1,19 +1,12 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ArrowLeftDoubleIcon, ArrowRightDoubleIcon } from "@ultraviolet/icons";
 import { Tooltip, Button } from "@ultraviolet/ui";
 import { useCallback, useState, useEffect, useMemo } from "react";
 import { useNavigation } from "./NavigationProvider.js";
 import { navigationStickyFooter } from "./styles.css.js";
-const Footer = ({
-  onToggleExpand,
-  contentRef
-}) => {
-  const {
-    expanded,
-    toggleExpand,
-    locales
-  } = useNavigation();
+const Footer = ({ onToggleExpand, contentRef }) => {
+  const { expanded, toggleExpand, locales } = useNavigation();
   const isScrollAtBottom = useCallback(() => {
     if (contentRef.current) {
       if (contentRef.current.scrollTop + contentRef.current.offsetHeight >= contentRef.current.scrollHeight) {
@@ -23,7 +16,9 @@ const Footer = ({
     }
     return true;
   }, [contentRef]);
-  const [footerHasOverflowStyle, setFooterHasOverflowStyle] = useState(isScrollAtBottom());
+  const [footerHasOverflowStyle, setFooterHasOverflowStyle] = useState(
+    isScrollAtBottom()
+  );
   useEffect(() => {
     const currentContentRef = contentRef.current;
     const scroll = () => {
@@ -42,14 +37,34 @@ const Footer = ({
   useEffect(() => {
     setFooterHasOverflowStyle(isScrollAtBottom());
   }, [isScrollAtBottom]);
-  const Icon = useMemo(() => expanded ? ArrowLeftDoubleIcon : ArrowRightDoubleIcon, [expanded]);
-  const label = useMemo(() => expanded ? locales["navigation.collapse.button"] : locales["navigation.expand.button"], [expanded, locales]);
-  return /* @__PURE__ */ jsx("div", { className: navigationStickyFooter({
-    overflow: footerHasOverflowStyle
-  }), children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", text: label, children: /* @__PURE__ */ jsx(Button, { "aria-label": label, onClick: () => {
-    toggleExpand();
-    onToggleExpand?.(!expanded);
-  }, sentiment: "neutral", size: "small", variant: "ghost", children: /* @__PURE__ */ jsx(Icon, {}) }) }) });
+  const Icon = useMemo(
+    () => expanded ? ArrowLeftDoubleIcon : ArrowRightDoubleIcon,
+    [expanded]
+  );
+  const label = useMemo(
+    () => expanded ? locales["navigation.collapse.button"] : locales["navigation.expand.button"],
+    [expanded, locales]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: navigationStickyFooter({ overflow: footerHasOverflowStyle }),
+      children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", text: label, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": label,
+          onClick: () => {
+            toggleExpand();
+            onToggleExpand?.(!expanded);
+          },
+          sentiment: "neutral",
+          size: "small",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx(Icon, {})
+        }
+      ) })
+    }
+  );
 };
 export {
   Footer

package/dist/components/Navigation/Header.d.ts

@@ -2,5 +2,5 @@ import type { NavigationProps } from './types';
 type HeaderProps = {
     logo: NavigationProps['logo'];
 };
-export declare const Header: import("react").MemoExoticComponent<({ logo }: HeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Header: import("react").MemoExoticComponent<({ logo }: HeaderProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/Navigation/Header.js

@@ -1,17 +1,20 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Stack } from "@ultraviolet/ui";
 import { memo } from "react";
 import { useNavigation } from "./NavigationProvider.js";
 import { navigationHeader, navigationLogoContainer } from "./styles.css.js";
-const Header = memo(({
-  logo
-}) => {
-  const {
-    animation,
-    expanded
-  } = useNavigation();
-  return /* @__PURE__ */ jsx("div", { className: navigationHeader, children: /* @__PURE__ */ jsx(Stack, { alignItems: "start", className: navigationLogoContainer, justifyContent: !expanded ? "center" : void 0, children: typeof logo === "function" ? logo(animation ? false : expanded) : logo }) });
+const Header = memo(({ logo }) => {
+  const { animation, expanded } = useNavigation();
+  return /* @__PURE__ */ jsx("div", { className: navigationHeader, children: /* @__PURE__ */ jsx(
+    Stack,
+    {
+      alignItems: "start",
+      className: navigationLogoContainer,
+      justifyContent: !expanded ? "center" : void 0,
+      children: typeof logo === "function" ? logo(animation ? false : expanded) : logo
+    }
+  ) });
 });
 export {
   Header

package/dist/components/Navigation/Navigation.d.ts

@@ -5,12 +5,12 @@ import type { NavigationProps } from './types';
  * to make it work in your application.
  */
 export declare const Navigation: {
-    ({ children, ...props }: NavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: NavigationProps): import("react/jsx-runtime").JSX.Element;
     Group: ({ children, label, style }: {
         children: import("react").ReactNode;
         label: string;
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     Item: import("react").MemoExoticComponent<({ children, categoryIcon, label, labelDescription, subLabel, badgeText, badgeSentiment, href, target, rel, onToggle, onClickPinUnpin, toggle, active, noPinButton, type, as, disabled, noExpand, index, id, "data-testid": dataTestId, style, }: {
         children?: import("react").ReactNode;
         categoryIcon?: import("react").ReactNode;
@@ -35,13 +35,13 @@ export declare const Navigation: {
         disabled?: boolean;
         'data-testid'?: string;
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element | null>;
+    }) => import("react/jsx-runtime").JSX.Element | null>;
     PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, style, }: {
         toggle?: boolean;
         onToggle?: (toggle: boolean) => void;
         onReorder?: (pinnedItems: string[]) => void;
         itemWrapper?: (item: import("react").ReactElement, itemId: string) => import("react").ReactElement;
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
-    Separator: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+    Separator: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/Navigation/Navigation.js

@@ -1,14 +1,11 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Group } from "./components/Group.js";
 import { Item } from "./components/Item.js";
 import { PinnedItems } from "./components/PinnedItems.js";
 import { Separator } from "./components/Separator.js";
 import { NavigationContent } from "./NavigationContent.js";
-const Navigation = ({
-  children,
-  ...props
-}) => /* @__PURE__ */ jsx(NavigationContent, { ...props, children });
+const Navigation = ({ children, ...props }) => /* @__PURE__ */ jsx(NavigationContent, { ...props, children });
 Navigation.Group = Group;
 Navigation.Item = Item;
 Navigation.PinnedItems = PinnedItems;

package/dist/components/Navigation/NavigationContent.d.ts

@@ -1,2 +1,2 @@
 import type { NavigationProps } from './types';
-export declare const NavigationContent: ({ children, logo, onWidthResize, className, "data-testid": dataTestId, id, onToggleExpand, }: NavigationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NavigationContent: ({ children, logo, onWidthResize, className, "data-testid": dataTestId, id, onToggleExpand, }: NavigationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Navigation/NavigationContent.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Stack } from "@ultraviolet/ui";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useRef, useEffect } from "react";
@@ -20,7 +20,9 @@ const NavigationContent = ({
 }) => {
   const context = useNavigation();
   if (!context) {
-    throw new Error("Navigation should be inside NavigationProvider to use it properly.");
+    throw new Error(
+      "Navigation should be inside NavigationProvider to use it properly."
+    );
   }
   const {
     setWidth,
@@ -90,22 +92,58 @@ const NavigationContent = ({
     return () => {
       sliderRefCurrent?.removeEventListener("mousedown", mousedown);
     };
-  }, [expanded, navigationRef, onToggleExpand, onWidthResize, setWidth, toggleExpand]);
-  return /* @__PURE__ */ jsxs("nav", { className: `${className ? `${className} ` : ""}${navigation}`, "data-testid": dataTestId, id, children: [
-    /* @__PURE__ */ jsxs("div", { className: navigationContainer({
-      animation: shouldAnimate ? animation : void 0,
-      expanded
-    }), ref: navigationRef, style: assignInlineVars({
-      [widthNavigationContainer]: `${width}px`
-    }), children: [
-      logo ? /* @__PURE__ */ jsx(Header, { logo }) : null,
-      /* @__PURE__ */ jsxs("div", { className: `${navigationContentContainer}${expanded ? "" : ` ${navigationContentContainerCollapsed}`}`, children: [
-        /* @__PURE__ */ jsx(Stack, { className: navigationContent, gap: 0.25, ref: contentRef, children }),
-        allowNavigationResize ? /* @__PURE__ */ jsx(Footer, { contentRef, onToggleExpand }) : null
-      ] })
-    ] }),
-    allowNavigationResize ? /* @__PURE__ */ jsx("div", { className: navigationSlider, "data-testid": "slider", ref: sliderRef }) : null
-  ] });
+  }, [
+    expanded,
+    navigationRef,
+    onToggleExpand,
+    onWidthResize,
+    setWidth,
+    toggleExpand
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: `${className ? `${className} ` : ""}${navigation}`,
+      "data-testid": dataTestId,
+      id,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: navigationContainer({
+              animation: shouldAnimate ? animation : void 0,
+              expanded
+            }),
+            ref: navigationRef,
+            style: assignInlineVars({
+              [widthNavigationContainer]: `${width}px`
+            }),
+            children: [
+              logo ? /* @__PURE__ */ jsx(Header, { logo }) : null,
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${navigationContentContainer}${expanded ? "" : ` ${navigationContentContainerCollapsed}`}`,
+                  children: [
+                    /* @__PURE__ */ jsx(Stack, { className: navigationContent, gap: 0.25, ref: contentRef, children }),
+                    allowNavigationResize ? /* @__PURE__ */ jsx(Footer, { contentRef, onToggleExpand }) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        allowNavigationResize ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: navigationSlider,
+            "data-testid": "slider",
+            ref: sliderRef
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
   NavigationContent

package/dist/components/Navigation/NavigationProvider.d.ts

@@ -87,5 +87,5 @@ type NavigationProviderProps = {
      */
     animationType?: AnimationType;
 };
-export declare const NavigationProvider: ({ children, pinnedFeature, initialPinned, initialExpanded, locales, pinLimit, onExpandChange, initialWidth, initialAllowNavigationResize, animation: shouldAnimate, animationType, }: NavigationProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NavigationProvider: ({ children, pinnedFeature, initialPinned, initialExpanded, locales, pinLimit, onExpandChange, initialWidth, initialAllowNavigationResize, animation: shouldAnimate, animationType, }: NavigationProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};