@ultraviolet/plus 3.0.0-beta.13 → 3.0.0-beta.15

package/dist/components/EstimateCost/Components/Unit.js

@@ -9,7 +9,8 @@ const Unit = ({
   amount,
   itemCallback,
   getAmountValue,
-  unit
+  unit,
+  style
 }) => {
   const {
     isOverlay
@@ -20,8 +21,9 @@ const Unit = ({
     itemCallback?.(amount, true);
     getAmountValue?.(amount);
   }, [getAmountValue, itemCallback, capacity, amount]);
-  return isOverlay ? /* @__PURE__ */ jsx("div", { className: estimateCostItemResourceName(), children: /* @__PURE__ */ jsx(Regular, { children: capacity }) }) : /* @__PURE__ */ jsx("div", { style: {
-    width: "150px"
+  return isOverlay ? /* @__PURE__ */ jsx("div", { className: estimateCostItemResourceName(), style, children: /* @__PURE__ */ jsx(Regular, { children: capacity }) }) : /* @__PURE__ */ jsx("div", { style: {
+    width: "150px",
+    ...style
   }, children: /* @__PURE__ */ jsx(NumberInput, { className: estimateCostNumberInput, controls: false, name: "capacity", onChange: (capacityText) => {
     const newCapacity = Number(capacityText) < 0 ? 0 : Number(capacityText);
     setCapacity(newCapacity);

package/dist/components/EstimateCost/Components/Zone.cjs

@@ -19,12 +19,13 @@ const Zone = react.memo(({
   iteration,
   discount,
   noBorder,
-  noPrice
+  noPrice,
+  style
 }) => {
   const {
     locales
   } = EstimateCostProvider.useEstimateCost();
-  return /* @__PURE__ */ jsxRuntime.jsx(Item.Item, { animated, discount, isFirstElement, isLastElement, iteration, label: locales["estimate.cost.az.label"], noBorder, noPrice, priceText, productsCallback, shouldBeHidden, children: /* @__PURE__ */ jsxRuntime.jsxs(Strong.Strong, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Item.Item, { animated, discount, isFirstElement, isLastElement, iteration, label: locales["estimate.cost.az.label"], noBorder, noPrice, priceText, productsCallback, shouldBeHidden, style, children: /* @__PURE__ */ jsxRuntime.jsxs(Strong.Strong, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("img", { alt: label, className: styles_css.estimateCostImage, src: image }),
     label
   ] }) });

package/dist/components/EstimateCost/Components/Zone.d.ts

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 import type { BareEstimateProduct, EstimateProduct, Iteration } from '../types';
 type RegionProps = {
     shouldBeHidden?: boolean;
@@ -15,6 +16,7 @@ type RegionProps = {
     image: string;
     noBorder?: boolean;
     noPrice?: boolean;
+    style?: CSSProperties;
 };
-export declare const Zone: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, }: RegionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Zone: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, style, }: RegionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/EstimateCost/Components/Zone.js

@@ -17,12 +17,13 @@ const Zone = memo(({
   iteration,
   discount,
   noBorder,
-  noPrice
+  noPrice,
+  style
 }) => {
   const {
     locales
   } = useEstimateCost();
-  return /* @__PURE__ */ jsx(Item, { animated, discount, isFirstElement, isLastElement, iteration, label: locales["estimate.cost.az.label"], noBorder, noPrice, priceText, productsCallback, shouldBeHidden, children: /* @__PURE__ */ jsxs(Strong, { children: [
+  return /* @__PURE__ */ jsx(Item, { animated, discount, isFirstElement, isLastElement, iteration, label: locales["estimate.cost.az.label"], noBorder, noPrice, priceText, productsCallback, shouldBeHidden, style, children: /* @__PURE__ */ jsxs(Strong, { children: [
     /* @__PURE__ */ jsx("img", { alt: label, className: estimateCostImage, src: image }),
     label
   ] }) });

package/dist/components/EstimateCost/EstimateCost.cjs

@@ -55,8 +55,9 @@ const EstimateCost = ({
   locales = en,
   numberLocales = "en-EN",
   currency = "EUR",
+  style,
   onTotalPriceChange
-}) => /* @__PURE__ */ jsxRuntime.jsx(EstimateCostProvider.EstimateCostProvider, { currency, locales, numberLocales, children: /* @__PURE__ */ jsxRuntime.jsx(EstimateCostContent.EstimateCostContent, { alert, alertTitle, alertVariant, commitmentFees, commitmentFeesContent, defaultTimeUnit, description, disableOverlayLeft, disableOverlayRight, discount, hideOverlay, hideTimeUnit, hideTotal, isBeta, locales, monthlyFees, monthlyFeesContent, monthlyFeesLabel, OverlayLeft, OverlayRight, onTotalPriceChange, overlayMargin, overlayUnit, timeUnits, children }) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(EstimateCostProvider.EstimateCostProvider, { currency, locales, numberLocales, children: /* @__PURE__ */ jsxRuntime.jsx(EstimateCostContent.EstimateCostContent, { alert, alertTitle, alertVariant, commitmentFees, commitmentFeesContent, defaultTimeUnit, description, disableOverlayLeft, disableOverlayRight, discount, hideOverlay, hideTimeUnit, hideTotal, isBeta, locales, monthlyFees, monthlyFeesContent, monthlyFeesLabel, OverlayLeft, OverlayRight, onTotalPriceChange, overlayMargin, overlayUnit, style, timeUnits, children }) });
 EstimateCost.LineThrough = LineThrough.LineThrough;
 EstimateCost.Item = Item.Item;
 EstimateCost.NumberInput = NumberInput.NumberInput;

package/dist/components/EstimateCost/EstimateCost.d.ts

@@ -2,11 +2,11 @@ import { Text } from '@ultraviolet/ui';
 import type { ComponentProps, ReactNode } from 'react';
 import type { EstimateCostProps } from './types';
 declare const EstimateCost: {
-    ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, overlayMargin, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, onTotalPriceChange, }: EstimateCostProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, overlayMargin, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, style, onTotalPriceChange, }: EstimateCostProps): import("@emotion/react/jsx-runtime").JSX.Element;
     LineThrough: ({ isActive, className, ...props }: import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
         isActive?: boolean;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Item: import("react").MemoExoticComponent<({ discount, priceText, discountText, label, tooltipInfo, subLabel, price: basePrice, monthlyPrice, unit: baseUnit, amount: currentAmount, onAmountChange, amountFree, maxAmount, longFractionDigits, noIteration, noIterationText, noBorder, noPrice, isDefined, children, isFirstElement, isLastElement, isPrimaryBackground, productsCallback, iteration: receivedIteration, shouldBeHidden, hideFromOverlay, textNotDefined, animated, tabulation, labelTextVariant, labelTextProminence, notice, strikeThrough, }: {
+    Item: import("react").MemoExoticComponent<({ discount, priceText, discountText, label, tooltipInfo, subLabel, price: basePrice, monthlyPrice, unit: baseUnit, amount: currentAmount, onAmountChange, amountFree, maxAmount, longFractionDigits, noIteration, noIterationText, noBorder, noPrice, isDefined, children, isFirstElement, isLastElement, isPrimaryBackground, productsCallback, iteration: receivedIteration, shouldBeHidden, hideFromOverlay, textNotDefined, animated, tabulation, labelTextVariant, labelTextProminence, notice, strikeThrough, style, }: {
         amount?: number;
         amountFree?: number;
         animated?: boolean;
@@ -44,6 +44,7 @@ declare const EstimateCost: {
         tooltipInfo?: string;
         unit?: "mb" | "gb" | "tb" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | (string & NonNullable<unknown>);
         strikeThrough?: boolean;
+        style?: import("react").CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element>;
     NumberInput: ({ amount, minValue, maxValue, getAmountValue, itemCallback, controls, }: {
         amount?: number;
@@ -53,25 +54,28 @@ declare const EstimateCost: {
         maxValue?: number;
         controls?: boolean;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Unit: ({ amount, itemCallback, getAmountValue, unit, }: {
+    Unit: ({ amount, itemCallback, getAmountValue, unit, style, }: {
         amount?: number;
         itemCallback?: (amount?: number, isVariant?: boolean) => void;
         getAmountValue?: (amount?: number) => void;
         unit?: string;
+        style?: import("react").CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Strong: import("react").MemoExoticComponent<({ variant, children }: {
+    Strong: import("react").MemoExoticComponent<({ variant, children, style }: {
         variant?: "normal" | "small" | "big" | "capitalized";
         children?: ReactNode;
         isDisabledOnOverlay?: boolean;
+        style?: import("react").CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element>;
-    Regular: import("react").MemoExoticComponent<({ variant, isDisabledOnOverlay, children, className, }: {
+    Regular: import("react").MemoExoticComponent<({ variant, isDisabledOnOverlay, children, className, style, }: {
         variant?: "normal" | "small" | "big" | "capitalized";
         isDisabledOnOverlay?: boolean;
         children?: ReactNode;
+        style?: import("react").CSSProperties;
         className?: string;
     }) => import("@emotion/react/jsx-runtime").JSX.Element | null>;
     Image: (props: ComponentProps<"img">) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Region: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, }: {
+    Region: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, style, }: {
         shouldBeHidden?: boolean;
         priceText?: ReactNode;
         animated?: boolean;
@@ -125,8 +129,9 @@ declare const EstimateCost: {
         tooltipInfo?: string;
         unit?: "mb" | "gb" | "tb" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | (string & NonNullable<unknown>);
         strikeThrough?: boolean;
-    }, "hideFromOverlay">) => import("@emotion/react/jsx-runtime").JSX.Element>;
-    Zone: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, }: {
+        style?: import("react").CSSProperties;
+    }, "style" | "hideFromOverlay">) => import("@emotion/react/jsx-runtime").JSX.Element>;
+    Zone: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, style, }: {
         shouldBeHidden?: boolean;
         priceText?: string;
         animated?: boolean;
@@ -142,6 +147,7 @@ declare const EstimateCost: {
         image: string;
         noBorder?: boolean;
         noPrice?: boolean;
+        style?: import("react").CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element>;
     Ellipsis: ({ children, maxWidth, "data-testid": dataTestId, }: {
         children: ReactNode;

package/dist/components/EstimateCost/EstimateCost.js

@@ -53,8 +53,9 @@ const EstimateCost = ({
   locales = EstimateCostLocales,
   numberLocales = "en-EN",
   currency = "EUR",
+  style,
   onTotalPriceChange
-}) => /* @__PURE__ */ jsx(EstimateCostProvider, { currency, locales, numberLocales, children: /* @__PURE__ */ jsx(EstimateCostContent, { alert, alertTitle, alertVariant, commitmentFees, commitmentFeesContent, defaultTimeUnit, description, disableOverlayLeft, disableOverlayRight, discount, hideOverlay, hideTimeUnit, hideTotal, isBeta, locales, monthlyFees, monthlyFeesContent, monthlyFeesLabel, OverlayLeft, OverlayRight, onTotalPriceChange, overlayMargin, overlayUnit, timeUnits, children }) });
+}) => /* @__PURE__ */ jsx(EstimateCostProvider, { currency, locales, numberLocales, children: /* @__PURE__ */ jsx(EstimateCostContent, { alert, alertTitle, alertVariant, commitmentFees, commitmentFeesContent, defaultTimeUnit, description, disableOverlayLeft, disableOverlayRight, discount, hideOverlay, hideTimeUnit, hideTotal, isBeta, locales, monthlyFees, monthlyFeesContent, monthlyFeesLabel, OverlayLeft, OverlayRight, onTotalPriceChange, overlayMargin, overlayUnit, style, timeUnits, children }) });
 EstimateCost.LineThrough = LineThrough;
 EstimateCost.Item = Item;
 EstimateCost.NumberInput = NumberInput;

package/dist/components/EstimateCost/EstimateCostContent.cjs

@@ -54,7 +54,8 @@ const EstimateCostContent = ({
   children = null,
   locales = en,
   overlayMargin,
-  onTotalPriceChange
+  onTotalPriceChange,
+  style
 }) => {
   const {
     formatNumber
@@ -137,7 +138,7 @@ const EstimateCostContent = ({
       });
     }
   }, [hideTimeUnit, iteration, defaultTimeUnit]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: 2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: 2, style, children: [
     !hideOverlay ? /* @__PURE__ */ jsxRuntime.jsx(OverlayComponent.OverlayComponent, { disableOverlayLeft, disableOverlayRight, discount, inView, isBeta, OverlayLeft, OverlayRight, overlayMargin, totalPrice, unit: overlayUnit ?? "hours", children }) : null,
     description === false ? null : /* @__PURE__ */ jsxRuntime.jsx(DescriptionComponent, { description, locales }),
     alert ? /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { sentiment: alertVariant, title: alertTitle, children: alert }) : null,

package/dist/components/EstimateCost/EstimateCostContent.d.ts

@@ -1,2 +1,2 @@
 import type { EstimateCostProps } from './types';
-export declare const EstimateCostContent: ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, hideHourlyPriceOnTotal, discount, OverlayRight, OverlayLeft, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, overlayMargin, onTotalPriceChange, }: EstimateCostProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const EstimateCostContent: ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, hideHourlyPriceOnTotal, discount, OverlayRight, OverlayLeft, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, overlayMargin, onTotalPriceChange, style, }: EstimateCostProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/EstimateCost/EstimateCostContent.js

@@ -52,7 +52,8 @@ const EstimateCostContent = ({
   children = null,
   locales = EstimateCostLocales,
   overlayMargin,
-  onTotalPriceChange
+  onTotalPriceChange,
+  style
 }) => {
   const {
     formatNumber
@@ -135,7 +136,7 @@ const EstimateCostContent = ({
       });
     }
   }, [hideTimeUnit, iteration, defaultTimeUnit]);
-  return /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+  return /* @__PURE__ */ jsxs(Stack, { gap: 2, style, children: [
     !hideOverlay ? /* @__PURE__ */ jsx(OverlayComponent, { disableOverlayLeft, disableOverlayRight, discount, inView, isBeta, OverlayLeft, OverlayRight, overlayMargin, totalPrice, unit: overlayUnit ?? "hours", children }) : null,
     description === false ? null : /* @__PURE__ */ jsx(DescriptionComponent, { description, locales }),
     alert ? /* @__PURE__ */ jsx(Alert, { sentiment: alertVariant, title: alertTitle, children: alert }) : null,

package/dist/components/EstimateCost/types.d.ts

@@ -1,5 +1,5 @@
 import type { Alert } from '@ultraviolet/ui';
-import type { ComponentProps, JSX, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, JSX, ReactNode } from 'react';
 import type EstimateCostLocales from './locales/en';
 export type EstimateCostProps = {
     /**
@@ -105,6 +105,7 @@ export type EstimateCostProps = {
      * To find out all currencies checkout https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes section "Code" of the table.
      */
     currency?: string;
+    style?: CSSProperties;
     /**
      * Defines the way we display numbers depending on locale (ex: 1,000.00 or 1 000,00).
      * To understand better please read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales

package/dist/components/FAQ/index.cjs

@@ -28,10 +28,11 @@ const FAQ = ({
   illustrationText,
   title,
   description,
-  notes
+  notes,
+  style
 }) => {
   const ProductIconUsed = productIconName ? ProductIcon__namespace[`${productIconName.charAt(0).toUpperCase() + productIconName.slice(1)}ProductIcon`] : null;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { className: styles_css.faq, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { direction: "row", gap: 2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { className: styles_css.faq, style, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { direction: "row", gap: 2, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       !productIconName && illustrationText ? /* @__PURE__ */ jsxRuntime.jsx(ui.Bullet, { sentiment: "primary", children: illustrationText.toString() }) : null,
       ProductIconUsed ? /* @__PURE__ */ jsxRuntime.jsx(ProductIconUsed, { size: "xlarge" }) : null

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

@@ -1,4 +1,5 @@
 import * as ProductIcon from '@ultraviolet/icons/product';
+import type { CSSProperties } from 'react';
 import type { PascalToCamelCaseWithoutSuffix } from '../../types';
 type FAQProps = {
     description: string;
@@ -6,6 +7,7 @@ type FAQProps = {
     illustrationText?: number | string;
     notes?: string;
     title: string;
+    style?: CSSProperties;
 };
-export declare const FAQ: ({ productIconName, illustrationText, title, description, notes, }: FAQProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FAQ: ({ productIconName, illustrationText, title, description, notes, style, }: FAQProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FAQ/index.js

@@ -8,10 +8,11 @@ const FAQ = ({
   illustrationText,
   title,
   description,
-  notes
+  notes,
+  style
 }) => {
   const ProductIconUsed = productIconName ? ProductIcon[`${productIconName.charAt(0).toUpperCase() + productIconName.slice(1)}ProductIcon`] : null;
-  return /* @__PURE__ */ jsx(Card, { className: faq, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, children: [
+  return /* @__PURE__ */ jsx(Card, { className: faq, style, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, children: [
     /* @__PURE__ */ jsxs("div", { children: [
       !productIconName && illustrationText ? /* @__PURE__ */ jsx(Bullet, { sentiment: "primary", children: illustrationText.toString() }) : null,
       ProductIconUsed ? /* @__PURE__ */ jsx(ProductIconUsed, { size: "xlarge" }) : null

package/dist/components/InfoTable/InfoTable.cjs

@@ -10,10 +10,11 @@ const InfoTable = ({
   children,
   width,
   className,
+  style,
   "data-testid": dataTestId
 }) => /* @__PURE__ */ jsxRuntime.jsx(context.InfoTableContext.Provider, { value: {
   width
-}, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: `${className ? `${className} ` : ""}${styles_css.dl}`, "data-testid": dataTestId, children }) });
+}, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: `${className ? `${className} ` : ""}${styles_css.dl}`, "data-testid": dataTestId, style, children }) });
 InfoTable.Row = Row.InfoTableRow;
 InfoTable.Cell = Cell.InfoTableCell;
 exports.InfoTable = InfoTable;

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

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

package/dist/components/InfoTable/InfoTable.js

@@ -8,10 +8,11 @@ const InfoTable = ({
   children,
   width,
   className,
+  style,
   "data-testid": dataTestId
 }) => /* @__PURE__ */ jsx(InfoTableContext.Provider, { value: {
   width
-}, children: /* @__PURE__ */ jsx("dl", { className: `${className ? `${className} ` : ""}${dl}`, "data-testid": dataTestId, children }) });
+}, 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.cjs

@@ -7,8 +7,9 @@ const styles_css = require("../styles.css.cjs");
 const InfoTableCell = ({
   children,
   title,
-  multiline = false
-}) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: "0.5", minWidth: "0", width: "100%", children: [
+  multiline = false,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: "0.5", minWidth: "0", style, width: "100%", children: [
   /* @__PURE__ */ jsxRuntime.jsx("dt", { className: styles_css.term, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", prominence: "weak", sentiment: "neutral", variant: "bodySmallStrong", children: title }) }),
   /* @__PURE__ */ jsxRuntime.jsx("dd", { className: styles_css.desc, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", className: styles_css.cellText, oneLine: !multiline, prominence: "default", sentiment: "neutral", variant: "body", children }) })
 ] });

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

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

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

@@ -5,8 +5,9 @@ import { term, desc, cellText } from "../styles.css.js";
 const InfoTableCell = ({
   children,
   title,
-  multiline = false
-}) => /* @__PURE__ */ jsxs(Stack, { gap: "0.5", minWidth: "0", width: "100%", children: [
+  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, oneLine: !multiline, prominence: "default", sentiment: "neutral", variant: "body", children }) })
 ] });

package/dist/components/InfoTable/components/Row.cjs

@@ -9,13 +9,17 @@ const context = require("../context.cjs");
 const styles_css = require("../styles.css.cjs");
 const InfoTableRow = ({
   children,
-  templateColumns
+  templateColumns,
+  style
 }) => {
   const {
     width
   } = react.useContext(context.InfoTableContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Row, { className: styles_css.infoTableRow, style: dynamic.assignInlineVars({
-    [styles_css.rowWidth]: width ?? "100%"
-  }), templateColumns, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Row, { className: styles_css.infoTableRow, style: {
+    ...dynamic.assignInlineVars({
+      [styles_css.rowWidth]: width ?? "100%"
+    }),
+    ...style
+  }, templateColumns, children });
 };
 exports.InfoTableRow = InfoTableRow;

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

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

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

@@ -7,14 +7,18 @@ import { InfoTableContext } from "../context.js";
 import { infoTableRow, rowWidth } from "../styles.css.js";
 const InfoTableRow = ({
   children,
-  templateColumns
+  templateColumns,
+  style
 }) => {
   const {
     width
   } = useContext(InfoTableContext);
-  return /* @__PURE__ */ jsx(Row, { className: infoTableRow, style: assignInlineVars({
-    [rowWidth]: width ?? "100%"
-  }), templateColumns, children });
+  return /* @__PURE__ */ jsx(Row, { className: infoTableRow, style: {
+    ...assignInlineVars({
+      [rowWidth]: width ?? "100%"
+    }),
+    ...style
+  }, templateColumns, children });
 };
 export {
   InfoTableRow

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

@@ -6,11 +6,12 @@ import type { NavigationProps } from './types';
  */
 export declare const Navigation: {
     ({ children, ...props }: NavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Group: ({ children, label }: {
+    Group: ({ children, label, style }: {
         children: import("react").ReactNode;
         label: string;
+        style?: import("react").CSSProperties;
     }) => import("@emotion/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, }: {
+    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;
         label: string;
@@ -33,12 +34,14 @@ export declare const Navigation: {
         noExpand?: boolean;
         disabled?: boolean;
         'data-testid'?: string;
+        style?: import("react").CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element | null>;
-    PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, }: {
+    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;
 };

package/dist/components/Navigation/components/Group.cjs

@@ -8,7 +8,8 @@ const NavigationProvider = require("../NavigationProvider.cjs");
 const styles_css = require("./styles.css.cjs");
 const Group = ({
   children,
-  label
+  label,
+  style
 }) => {
   const context = NavigationProvider.useNavigation();
   if (!context) {
@@ -22,7 +23,8 @@ const Group = ({
   const isDiplay = !animation && expanded;
   if (react.Children.count(children) > 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      width: animation ? "100%" : void 0
+      width: animation ? "100%" : void 0,
+      ...style
     }, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { className: styles_css.navigationGroupStack, direction: "column", children: [
       isDiplay ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", className: styles_css.navigationGroupText({
         animation: animationType === "complex" ? animation : false

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

@@ -1,7 +1,8 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type GroupProps = {
     children: ReactNode;
     label: string;
+    style?: CSSProperties;
 };
-export declare const Group: ({ children, label }: GroupProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const Group: ({ children, label, style }: GroupProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Navigation/components/Group.js

@@ -6,7 +6,8 @@ import { useNavigation } from "../NavigationProvider.js";
 import { navigationGroupStack, navigationGroupText } from "./styles.css.js";
 const Group = ({
   children,
-  label
+  label,
+  style
 }) => {
   const context = useNavigation();
   if (!context) {
@@ -20,7 +21,8 @@ const Group = ({
   const isDiplay = !animation && expanded;
   if (Children.count(children) > 0) {
     return /* @__PURE__ */ jsx("div", { style: {
-      width: animation ? "100%" : void 0
+      width: animation ? "100%" : void 0,
+      ...style
     }, children: /* @__PURE__ */ jsxs(Stack, { className: navigationGroupStack, direction: "column", children: [
       isDiplay ? /* @__PURE__ */ jsx(Text, { as: "span", className: navigationGroupText({
         animation: animationType === "complex" ? animation : false

package/dist/components/Navigation/components/Item.cjs

@@ -34,7 +34,8 @@ const Item = react.memo(({
   noExpand = false,
   index,
   id,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const context = NavigationProvider.useNavigation();
   if (!context) {
@@ -156,7 +157,7 @@ const Item = react.memo(({
         isActive: !!active,
         noExpand,
         subLabel: !!subLabel
-      })} ${shouldAnimate && animationType === "complex" ? items_css.navigationItemContainerAnimated[animation === "collapse" ? "collapse" : "expand"] : ""} ${showDraggableIcon ? items_css.navigationItemShowDraggable : ""} ${showPinIcon ? items_css.navigationItemShowPinButton : ""} ${shouldHaveWeakText ? items_css.navigationItemWeakText : ""}`, "data-testid": dataTestId, direction: "row", disabled: containerTag === "button" ? disabled : void 0, draggable: type === "pinned" && expanded, gap: 1, href, id, justifyContent: "space-between", onClick: triggerToggle, onDragEnd, onDragStart, rel, target, children: [
+      })} ${shouldAnimate && animationType === "complex" ? items_css.navigationItemContainerAnimated[animation === "collapse" ? "collapse" : "expand"] : ""} ${showDraggableIcon ? items_css.navigationItemShowDraggable : ""} ${showPinIcon ? items_css.navigationItemShowPinButton : ""} ${shouldHaveWeakText ? items_css.navigationItemWeakText : ""}`, "data-testid": dataTestId, direction: "row", disabled: containerTag === "button" ? disabled : void 0, draggable: type === "pinned" && expanded, gap: 1, href, id, justifyContent: "space-between", onClick: triggerToggle, onDragEnd, onDragStart, rel, style, target, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { alignItems: categoryIcon ? "flex-start" : "center", direction: "row", gap: 1, justifyContent: "center", children: [
           categoryIcon ? /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { alignItems: "center", className: items_css.navigationItemCategoryIcon, justifyContent: "center", children: categoryIcon }) : null,
           type === "pinned" && expanded ? /* @__PURE__ */ jsxRuntime.jsx(icons.DragIcon, { className: items_css.navigationItemDragIcon, disabled, prominence: "weak", sentiment: "neutral", size: "small" }) : null,
@@ -208,7 +209,7 @@ const Item = react.memo(({
     ] });
   }
   if (categoryIcon || react.Children.count(children) > 0 && !hasParents) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { alignItems: "start", className: items_css.navigationItemMenuStack, gap: 1, justifyContent: "start", children: react.Children.count(children) > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { alignItems: "start", className: items_css.navigationItemMenuStack, gap: 1, justifyContent: "start", style, children: react.Children.count(children) > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       ui.Menu,
       {
         className: items_css.navigationItemMenuContainer,
@@ -232,6 +233,7 @@ const Item = react.memo(({
         onClick: () => onToggle?.(!!active),
         rel,
         sentiment: active ? "primary" : "neutral",
+        style,
         target,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { alignItems: "center", direction: "row", flex: 1, gap: 1, justifyContent: "space-between", width: "100%", children: [
           !animation ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", className: items_css.navigationItemWrapText({

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

@@ -1,5 +1,5 @@
 import { Badge } from '@ultraviolet/ui';
-import type { ComponentProps, ElementType, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
 import type { PinUnPinType } from '../types';
 type ItemType = 'default' | 'pinned' | 'pinnedGroup';
 type ItemProps = {
@@ -78,6 +78,7 @@ type ItemProps = {
     noExpand?: boolean;
     disabled?: boolean;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
-export declare const 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, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element | null>;
+export declare const 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, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element | null>;
 export {};

package/dist/components/Navigation/components/Item.js

@@ -32,7 +32,8 @@ const Item = memo(({
   noExpand = false,
   index,
   id,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const context = useNavigation();
   if (!context) {
@@ -154,7 +155,7 @@ const Item = memo(({
         isActive: !!active,
         noExpand,
         subLabel: !!subLabel
-      })} ${shouldAnimate && animationType === "complex" ? navigationItemContainerAnimated[animation === "collapse" ? "collapse" : "expand"] : ""} ${showDraggableIcon ? navigationItemShowDraggable : ""} ${showPinIcon ? navigationItemShowPinButton : ""} ${shouldHaveWeakText ? navigationItemWeakText : ""}`, "data-testid": dataTestId, direction: "row", disabled: containerTag === "button" ? disabled : void 0, draggable: type === "pinned" && expanded, gap: 1, href, id, justifyContent: "space-between", onClick: triggerToggle, onDragEnd, onDragStart, rel, target, children: [
+      })} ${shouldAnimate && animationType === "complex" ? navigationItemContainerAnimated[animation === "collapse" ? "collapse" : "expand"] : ""} ${showDraggableIcon ? navigationItemShowDraggable : ""} ${showPinIcon ? navigationItemShowPinButton : ""} ${shouldHaveWeakText ? navigationItemWeakText : ""}`, "data-testid": dataTestId, direction: "row", disabled: containerTag === "button" ? disabled : void 0, draggable: type === "pinned" && expanded, gap: 1, href, id, justifyContent: "space-between", onClick: triggerToggle, onDragEnd, onDragStart, rel, style, target, children: [
         /* @__PURE__ */ jsxs(Stack, { alignItems: categoryIcon ? "flex-start" : "center", direction: "row", gap: 1, justifyContent: "center", children: [
           categoryIcon ? /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: navigationItemCategoryIcon, justifyContent: "center", children: categoryIcon }) : null,
           type === "pinned" && expanded ? /* @__PURE__ */ jsx(DragIcon, { className: navigationItemDragIcon, disabled, prominence: "weak", sentiment: "neutral", size: "small" }) : null,
@@ -206,7 +207,7 @@ const Item = memo(({
     ] });
   }
   if (categoryIcon || Children.count(children) > 0 && !hasParents) {
-    return /* @__PURE__ */ jsx(Stack, { alignItems: "start", className: navigationItemMenuStack, gap: 1, justifyContent: "start", children: Children.count(children) > 0 ? /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Stack, { alignItems: "start", className: navigationItemMenuStack, gap: 1, justifyContent: "start", style, children: Children.count(children) > 0 ? /* @__PURE__ */ jsx(
       Menu,
       {
         className: navigationItemMenuContainer,
@@ -230,6 +231,7 @@ const Item = memo(({
         onClick: () => onToggle?.(!!active),
         rel,
         sentiment: active ? "primary" : "neutral",
+        style,
         target,
         children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", flex: 1, gap: 1, justifyContent: "space-between", width: "100%", children: [
           !animation ? /* @__PURE__ */ jsx(Text, { as: "span", className: navigationItemWrapText({