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

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

@@ -3,5 +3,5 @@ export declare const ItemContext: import("react").Context<boolean>;
 type ItemProviderProps = {
     children: ReactNode;
 };
-export declare const ItemProvider: ({ children }: ItemProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ItemProvider: ({ children }: ItemProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Navigation/components/ItemProvider.js

@@ -1,10 +1,8 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useMemo } from "react";
 const ItemContext = createContext(false);
-const ItemProvider = ({
-  children
-}) => {
+const ItemProvider = ({ children }) => {
   const value = useMemo(() => true, []);
   return /* @__PURE__ */ jsx(ItemContext.Provider, { value, children });
 };

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

@@ -19,5 +19,5 @@ type PinnedItemsProps = {
     itemWrapper?: (item: ReactElement, itemId: string) => ReactElement;
     style?: CSSProperties;
 };
-export declare const PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, style, }: PinnedItemsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, style, }: PinnedItemsProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Navigation/components/PinnedItems.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { PinCategoryIcon } from "@ultraviolet/icons/category";
 import { useTheme } from "@ultraviolet/themes";
 import { Text } from "@ultraviolet/ui";
@@ -16,7 +16,9 @@ const PinnedItems = ({
 }) => {
   const context = useNavigation();
   if (!context) {
-    throw new Error("Navigation.PinnedItems can only be used inside a NavigationProvider.");
+    throw new Error(
+      "Navigation.PinnedItems can only be used inside a NavigationProvider."
+    );
   }
   const {
     locales,
@@ -28,24 +30,32 @@ const PinnedItems = ({
     animation
   } = context;
   const theme = useTheme();
-  const onDrop = useCallback((event, index) => {
-    event.preventDefault();
-    if (event?.dataTransfer) {
-      event.currentTarget.style.borderColor = "transparent";
-      const data = JSON.parse(event.dataTransfer.getData("text"));
-      if (data.index === index - 1 || index > data.index) {
-        const newItems2 = reorderItems(data.index, index - 1);
-        onReorder?.(newItems2);
-        return;
+  const onDrop = useCallback(
+    (event, index) => {
+      event.preventDefault();
+      if (event?.dataTransfer) {
+        event.currentTarget.style.borderColor = "transparent";
+        const data = JSON.parse(
+          event.dataTransfer.getData("text")
+        );
+        if (data.index === index - 1 || index > data.index) {
+          const newItems2 = reorderItems(data.index, index - 1);
+          onReorder?.(newItems2);
+          return;
+        }
+        const newItems = reorderItems(data.index, index);
+        onReorder?.(newItems);
       }
-      const newItems = reorderItems(data.index, index);
-      onReorder?.(newItems);
-    }
-  }, [onReorder, reorderItems]);
-  const onDragOver = useCallback((event) => {
-    event.preventDefault();
-    event.currentTarget.style.borderColor = theme.colors.primary.border;
-  }, [theme.colors.primary.border]);
+    },
+    [onReorder, reorderItems]
+  );
+  const onDragOver = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.currentTarget.style.borderColor = theme.colors.primary.border;
+    },
+    [theme.colors.primary.border]
+  );
   const onDragLeave = useCallback((event) => {
     event.preventDefault();
     event.currentTarget.style.borderColor = "transparent";
@@ -54,24 +64,68 @@ const PinnedItems = ({
     return null;
   }
   if (pinnedFeature) {
-    return /* @__PURE__ */ jsx("div", { style: {
-      width: animation ? "100%" : void 0,
-      ...style
-    }, children: /* @__PURE__ */ jsxs(Item, { categoryIcon: /* @__PURE__ */ jsx(PinCategoryIcon, { variant: "neutral" }), "data-testid": "pinned-group", id: "pinned-group", label: locales["navigation.pinned.item.group.label"], onToggle, toggle, type: "pinnedGroup", children: [
-      pinnedItems.length > 0 ? pinnedItems.map((itemId, index) => {
-        if (items[itemId]?.label) {
-          const itemElement = /* @__PURE__ */ jsx(Item, { active: items[itemId]?.active ?? false, id: itemId, index, label: items[itemId].label, onClickPinUnpin: items[itemId]?.onClickPinUnpin ?? void 0, onToggle: items[itemId]?.onToggle, toggle, type: "pinned" });
-          return /* @__PURE__ */ jsxs("div", { className: navigationPinnedItemRelativeDiv, children: [
-            /* @__PURE__ */ jsx("div", { className: navigationPinnedItemDropableArea, onDragLeave, onDragOver, onDrop: (event) => onDrop(event, index) }),
-            itemWrapper ? itemWrapper(itemElement, itemId) : itemElement
-          ] }, itemId);
-        }
-        return null;
-      }) : /* @__PURE__ */ jsx("div", { className: navigationPinnedItemContainer({
-        expanded
-      }), children: /* @__PURE__ */ jsx(Text, { as: "p", prominence: "weak", sentiment: "neutral", variant: "caption", children: locales["navigation.pinned.item.group.empty"] }) }),
-      /* @__PURE__ */ jsx("div", { className: navigationPinnedItemRelativeDiv, children: /* @__PURE__ */ jsx("div", { className: navigationPinnedItemDropableArea, onDragLeave, onDragOver, onDrop: (event) => onDrop(event, pinnedItems.length) }) })
-    ] }) });
+    return /* @__PURE__ */ jsx("div", { style: { width: animation ? "100%" : void 0, ...style }, children: /* @__PURE__ */ jsxs(
+      Item,
+      {
+        categoryIcon: /* @__PURE__ */ jsx(PinCategoryIcon, { variant: "neutral" }),
+        "data-testid": "pinned-group",
+        id: "pinned-group",
+        label: locales["navigation.pinned.item.group.label"],
+        onToggle,
+        toggle,
+        type: "pinnedGroup",
+        children: [
+          pinnedItems.length > 0 ? pinnedItems.map((itemId, index) => {
+            if (items[itemId]?.label) {
+              const itemElement = /* @__PURE__ */ jsx(
+                Item,
+                {
+                  active: items[itemId]?.active ?? false,
+                  id: itemId,
+                  index,
+                  label: items[itemId].label,
+                  onClickPinUnpin: items[itemId]?.onClickPinUnpin ?? void 0,
+                  onToggle: items[itemId]?.onToggle,
+                  toggle,
+                  type: "pinned"
+                }
+              );
+              return /* @__PURE__ */ jsxs("div", { className: navigationPinnedItemRelativeDiv, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: navigationPinnedItemDropableArea,
+                    onDragLeave,
+                    onDragOver,
+                    onDrop: (event) => onDrop(event, index)
+                  }
+                ),
+                itemWrapper ? itemWrapper(itemElement, itemId) : itemElement
+              ] }, itemId);
+            }
+            return null;
+          }) : /* @__PURE__ */ jsx("div", { className: navigationPinnedItemContainer({ expanded }), children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              prominence: "weak",
+              sentiment: "neutral",
+              variant: "caption",
+              children: locales["navigation.pinned.item.group.empty"]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: navigationPinnedItemRelativeDiv, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: navigationPinnedItemDropableArea,
+              onDragLeave,
+              onDragOver,
+              onDrop: (event) => onDrop(event, pinnedItems.length)
+            }
+          ) })
+        ]
+      }
+    ) });
   }
   return null;
 };

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

@@ -1 +1 @@
-export declare const Separator: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Separator: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Navigation/components/Separator.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Separator as Separator$1 } from "@ultraviolet/ui";
 import { navigationSeparator } from "./styles.css.js";
 const Separator = () => /* @__PURE__ */ jsx(Separator$1, { className: navigationSeparator });

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

@@ -1,4 +1,3 @@
-/* empty css                             */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var navigationStickyFooter = createRuntimeFn({ defaultClassName: "uv_plus_19x50fv0", variantClassNames: { overflow: { false: "uv_plus_19x50fv1" } }, defaultVariants: { overflow: false }, compoundVariants: [] });

package/dist/components/Navigation/variables.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 var widthNavigationContainer = "var(--uv_plus_1rde5pt0)";
 export {
   widthNavigationContainer

package/dist/components/OfferList/OfferList.d.ts

@@ -15,7 +15,7 @@ type OfferListProps = Omit<ComponentProps<typeof List>, 'selectable' | 'onSelect
     style?: CSSProperties;
 };
 export declare const OfferList: {
-    ({ expandable, type, columns, children, loading, autoCollapse, selected, onChangeSelect, className, style, "data-testid": dataTestId, }: OfferListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ expandable, type, columns, children, loading, autoCollapse, selected, onChangeSelect, className, style, "data-testid": dataTestId, }: OfferListProps): import("react/jsx-runtime").JSX.Element;
     Row: ({ children, disabled, id, banner, expandablePadding, offerName, expandable: expandableContent, selectDisabled, highlightAnimation, expanded, className, "data-dragging": dataDragging, "data-testid": dataTestId, style, badge, }: {
         children: import("react").ReactNode;
         id: string;
@@ -44,7 +44,7 @@ export declare const OfferList: {
             prominence?: ComponentProps<typeof import("@ultraviolet/ui").Badge>["prominence"];
         };
         style?: CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Cell: ({ children, className, "data-testid": dataTestId, colSpan, style, }: ComponentProps<typeof List.Cell>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Cell: ({ children, className, "data-testid": dataTestId, colSpan, style, }: ComponentProps<typeof List.Cell>) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/OfferList/OfferList.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { List } from "@ultraviolet/ui";
 import { useState, useEffect } from "react";
 import { Cell } from "./components/Cell.js";
@@ -19,13 +19,19 @@ const OfferList = ({
   style,
   "data-testid": dataTestId
 }) => {
-  const [radioSelectedRow, setRadioSelectedRow] = useState(typeof selected === "string" ? selected : void 0);
-  const [checkboxSelectedRows, setCheckboxSelectedRows] = useState(Array.isArray(selected) ? selected : []);
-  const computedColumns = [{
-    label: ""
-  }, expandable ? {
-    label: ""
-  } : null, ...columns].filter((element) => !!element);
+  const [radioSelectedRow, setRadioSelectedRow] = useState(
+    typeof selected === "string" ? selected : void 0
+  );
+  const [checkboxSelectedRows, setCheckboxSelectedRows] = useState(
+    Array.isArray(selected) ? selected : []
+  );
+  const computedColumns = [
+    {
+      label: ""
+    },
+    expandable ? { label: "" } : null,
+    ...columns
+  ].filter((element) => !!element);
   useEffect(() => {
     if (selected) {
       if (typeof selected === "string" && type === "radio") {
@@ -36,7 +42,33 @@ const OfferList = ({
       }
     }
   }, [type, selected]);
-  return /* @__PURE__ */ jsx(OfferListProvider, { autoCollapse, checkboxSelectedRows, expandable, loading, onChangeSelect, radioSelectedRow, selectable: type, setCheckboxSelectedRows, setRadioSelectedRow, children: /* @__PURE__ */ jsx(List, { autoCollapse, className: `${className ? `${className} ` : ""}${offerList}`, columns: computedColumns, "data-testid": dataTestId, expandable: false, selectable: false, style, children }) });
+  return /* @__PURE__ */ jsx(
+    OfferListProvider,
+    {
+      autoCollapse,
+      checkboxSelectedRows,
+      expandable,
+      loading,
+      onChangeSelect,
+      radioSelectedRow,
+      selectable: type,
+      setCheckboxSelectedRows,
+      setRadioSelectedRow,
+      children: /* @__PURE__ */ jsx(
+        List,
+        {
+          autoCollapse,
+          className: `${className ? `${className} ` : ""}${offerList}`,
+          columns: computedColumns,
+          "data-testid": dataTestId,
+          expandable: false,
+          selectable: false,
+          style,
+          children
+        }
+      )
+    }
+  );
 };
 OfferList.Row = Row;
 OfferList.Cell = Cell;

package/dist/components/OfferList/OfferListProvider.d.ts

@@ -24,6 +24,6 @@ type OfferListProviderProps = {
     checkboxSelectedRows: string[];
     setCheckboxSelectedRows: Dispatch<SetStateAction<string[]>>;
 };
-export declare const OfferListProvider: ({ selectable, children, expandable, disabled, loading, onChangeSelect, autoCollapse, radioSelectedRow, setRadioSelectedRow, checkboxSelectedRows, setCheckboxSelectedRows, }: OfferListProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OfferListProvider: ({ selectable, children, expandable, disabled, loading, onChangeSelect, autoCollapse, radioSelectedRow, setRadioSelectedRow, checkboxSelectedRows, setCheckboxSelectedRows, }: OfferListProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useOfferListContext: () => OfferListContextValue;
 export {};

package/dist/components/OfferList/OfferListProvider.js

@@ -1,6 +1,8 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-const OfferListContext = createContext(void 0);
+const OfferListContext = createContext(
+  void 0
+);
 const OfferListProvider = ({
   selectable,
   children,
@@ -13,22 +15,30 @@ const OfferListProvider = ({
   setRadioSelectedRow,
   checkboxSelectedRows,
   setCheckboxSelectedRows
-}) => /* @__PURE__ */ jsx(OfferListContext.Provider, { value: {
-  autoCollapse,
-  checkboxSelectedRows,
-  disabled,
-  expandable,
-  loading,
-  onChangeSelect,
-  radioSelectedRow,
-  selectable,
-  setCheckboxSelectedRows,
-  setRadioSelectedRow
-}, children });
+}) => /* @__PURE__ */ jsx(
+  OfferListContext.Provider,
+  {
+    value: {
+      autoCollapse,
+      checkboxSelectedRows,
+      disabled,
+      expandable,
+      loading,
+      onChangeSelect,
+      radioSelectedRow,
+      selectable,
+      setCheckboxSelectedRows,
+      setRadioSelectedRow
+    },
+    children
+  }
+);
 const useOfferListContext = () => {
   const context = useContext(OfferListContext);
   if (!context) {
-    throw new Error("useOfferListContext should be used inside a OfferList component");
+    throw new Error(
+      "useOfferListContext should be used inside a OfferList component"
+    );
   }
   return context;
 };

package/dist/components/OfferList/components/Banner.d.ts

@@ -8,5 +8,5 @@ type BannerProps = {
     type?: 'cell' | 'div';
     shouldHavePrimaryBorder?: boolean;
 };
-export declare const Banner: ({ children, sentiment, disabled, colSpan, type, shouldHavePrimaryBorder, }: BannerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Banner: ({ children, sentiment, disabled, colSpan, type, shouldHavePrimaryBorder, }: BannerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/OfferList/components/Banner.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Stack, Text, List } from "@ultraviolet/ui";
 import { offerListBannerStack, offerListBanner, offerListBannerCell, offerListBannerText } from "../styles.css.js";
 const Banner = ({
@@ -9,13 +9,35 @@ const Banner = ({
   colSpan = 1e3,
   type = "div",
   shouldHavePrimaryBorder
-}) => type === "div" ? /* @__PURE__ */ jsx(Stack, { "aria-disabled": disabled, className: offerListBannerStack({
-  sentiment
-}), children: /* @__PURE__ */ jsx(Text, { as: "p", disabled, sentiment, variant: "caption", children }) }) : /* @__PURE__ */ jsx("tr", { className: offerListBanner, children: /* @__PURE__ */ jsx(List.Cell, { "aria-disabled": disabled, className: offerListBannerCell, colSpan, children: /* @__PURE__ */ jsx(Text, { as: "p", className: offerListBannerText({
-  disabled,
-  primaryBorder: shouldHavePrimaryBorder,
-  sentiment
-}), disabled, variant: "caption", children }) }) });
+}) => type === "div" ? /* @__PURE__ */ jsx(
+  Stack,
+  {
+    "aria-disabled": disabled,
+    className: offerListBannerStack({ sentiment }),
+    children: /* @__PURE__ */ jsx(Text, { as: "p", disabled, sentiment, variant: "caption", children })
+  }
+) : /* @__PURE__ */ jsx("tr", { className: offerListBanner, children: /* @__PURE__ */ jsx(
+  List.Cell,
+  {
+    "aria-disabled": disabled,
+    className: offerListBannerCell,
+    colSpan,
+    children: /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "p",
+        className: offerListBannerText({
+          disabled,
+          primaryBorder: shouldHavePrimaryBorder,
+          sentiment
+        }),
+        disabled,
+        variant: "caption",
+        children
+      }
+    )
+  }
+) });
 export {
   Banner
 };

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

@@ -1,3 +1,3 @@
 import { List } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
-export declare const Cell: ({ children, className, "data-testid": dataTestId, colSpan, style, }: ComponentProps<typeof List.Cell>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Cell: ({ children, className, "data-testid": dataTestId, colSpan, style, }: ComponentProps<typeof List.Cell>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/OfferList/components/Cell.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { List, Skeleton } from "@ultraviolet/ui";
 import { useOfferListContext } from "../OfferListProvider.js";
 import { offerListLoadingCell, offerListCell } from "../styles.css.js";
@@ -10,10 +10,17 @@ const Cell = ({
   colSpan,
   style
 }) => {
-  const {
-    loading
-  } = useOfferListContext();
-  return loading ? /* @__PURE__ */ jsx(List.Cell, { className: offerListLoadingCell, style, children: /* @__PURE__ */ jsx(Skeleton, { "data-state": loading, variant: "line" }) }) : /* @__PURE__ */ jsx(List.Cell, { className: `${className ? `${className} ` : ""}${offerListCell}`, colSpan, "data-testid": dataTestId, style, children });
+  const { loading } = useOfferListContext();
+  return loading ? /* @__PURE__ */ jsx(List.Cell, { className: offerListLoadingCell, style, children: /* @__PURE__ */ jsx(Skeleton, { "data-state": loading, variant: "line" }) }) : /* @__PURE__ */ jsx(
+    List.Cell,
+    {
+      className: `${className ? `${className} ` : ""}${offerListCell}`,
+      colSpan,
+      "data-testid": dataTestId,
+      style,
+      children
+    }
+  );
 };
 export {
   Cell

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

@@ -13,5 +13,5 @@ type RowProps = ComponentProps<typeof List.Row> & {
     };
     style?: CSSProperties;
 };
-export declare const Row: ({ children, disabled, id, banner, expandablePadding, offerName, expandable: expandableContent, selectDisabled, highlightAnimation, expanded, className, "data-dragging": dataDragging, "data-testid": dataTestId, style, badge, }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Row: ({ children, disabled, id, banner, expandablePadding, offerName, expandable: expandableContent, selectDisabled, highlightAnimation, expanded, className, "data-dragging": dataDragging, "data-testid": dataTestId, style, badge, }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};