@caseparts-org/caseblocks 0.0.205 → 0.0.207

package/dist/Cart.module-CqE2A_OG.js

@@ -0,0 +1,25 @@
+import './assets/Cart.css';const t = "_cartIconButton_16z8i_2", o = "_count_16z8i_15", e = "_cartContainer_16z8i_30", n = "_headerWrapper_16z8i_41", _ = "_header_16z8i_41", i = "_cartItems_16z8i_59", a = "_cartItem_16z8i_59", c = "_topRow_16z8i_85", r = "_itemInfo_16z8i_92", s = "_editUnit_16z8i_97", m = "_purchaseInformation_16z8i_113", I = "_availabilitySlot_16z8i_119", u = "_priceSlot_16z8i_122", z = "_itemManagement_16z8i_125", l = "_quantitySlot_16z8i_131", p = "_itemImage_16z8i_141", h = "_removeItem_16z8i_144", d = "_noItems_16z8i_154", S = "_subtotal_16z8i_161", y = "_checkoutButton_16z8i_168", b = {
+  cartIconButton: t,
+  count: o,
+  cartContainer: e,
+  headerWrapper: n,
+  header: _,
+  cartItems: i,
+  cartItem: a,
+  topRow: c,
+  itemInfo: r,
+  editUnit: s,
+  purchaseInformation: m,
+  availabilitySlot: I,
+  priceSlot: u,
+  itemManagement: z,
+  quantitySlot: l,
+  itemImage: p,
+  removeItem: h,
+  noItems: d,
+  subtotal: S,
+  checkoutButton: y
+};
+export {
+  b as s
+};

package/dist/assets/Availability.css

@@ -1 +1 @@
-._availability_jaqg4_1{font-style:italic}._availabilityLink_jaqg4_4{font-style:italic;font-size:var(--font-size-xs)}._available_jaqg4_8{color:var(--color-alerts-success)}._limited_jaqg4_11{color:var(--color-alerts-warning)}._unavailable_jaqg4_14{color:var(--color-alerts-error-warning)}
+._availability_9rzvh_1{font-style:italic}._tooltipContent_9rzvh_5{max-width:370px}._tooltipContent_9rzvh_5>ul{padding:0;margin:var(--spacing-spacing-2xs) 0}._tooltipContent_9rzvh_5 li{list-style:none}._available_9rzvh_18,._in-stock_9rzvh_18{color:var(--color-alerts-success)}._limited_9rzvh_21{color:var(--color-alerts-warning)}._discontinued_9rzvh_24{color:var(--color-alerts-error-warning)}

package/dist/assets/Cart.css

@@ -1 +1 @@
-._cartIconButton_m34kh_2{position:relative;border:none;padding:0;margin:0;background-color:transparent;cursor:pointer;color:#000;transition:color .3s ease,transform .3s ease}._cartIconButton_m34kh_2:hover{color:var(--color-brand-primary-primary-teal-blue);transform:scale(1.04)}._count_m34kh_16{position:absolute;top:0;left:14px;border-radius:50%;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:var(--color-brand-primary-primary-tangerine);color:var(--color-neutrals-neutral-1);font-weight:var(--font-weight-semibold)}._cartContainer_m34kh_31{height:100vh;width:100%;min-width:320px;max-width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:var(--spacing-1);padding:var(--spacing-1)}._headerWrapper_m34kh_42{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._headerWrapper_m34kh_42>button{padding:0;margin:0;background-color:transparent;border:none}._header_m34kh_42{display:flex;flex-direction:column;align-items:flex-start;width:100%}._cartItems_m34kh_60{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_m34kh_60 ul{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-spacing-1xs)}._cartItem_m34kh_60{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--spacing-0-5);align-items:start;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border:1px solid var(--color-neutrals-neutral-2);border-radius:var(--border-radius-md)}._topRow_m34kh_86{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--spacing-spacing-4xs)}._itemInfo_m34kh_93{display:flex;flex-direction:column;align-items:flex-start}._editUnit_m34kh_98{display:flex;align-items:center;text-align:start;gap:var(--spacing-spacing-3xs);border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;color:var(--text-text-links);word-wrap:break-word;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}._purchaseInformation_m34kh_114{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:flex-start;width:100%}._availabilitySlot_m34kh_120{min-width:0}._priceSlot_m34kh_123{justify-self:end}._itemManagement_m34kh_126{display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-spacing-3xs)}._quantitySlot_m34kh_132{align-self:flex-end}._cartItem_m34kh_60 p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._itemImage_m34kh_142{object-fit:contain}._removeItem_m34kh_145{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;width:min-content;height:min-content}._noItems_m34kh_155{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_m34kh_162{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}._checkoutButton_m34kh_169{width:100%;height:fit-content}
+._cartIconButton_16z8i_2{position:relative;border:none;padding:0;margin:0;background-color:transparent;cursor:pointer;color:#000;transition:color .3s ease,transform .3s ease}._cartIconButton_16z8i_2:hover{color:var(--color-brand-primary-primary-teal-blue)}._count_16z8i_15{position:absolute;top:0;left:14px;border-radius:50%;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:var(--color-brand-primary-primary-tangerine);color:var(--color-neutrals-neutral-1);font-weight:var(--font-weight-semibold)}._cartContainer_16z8i_30{height:100vh;width:100%;min-width:320px;max-width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:var(--spacing-1);padding:var(--spacing-1)}._headerWrapper_16z8i_41{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._headerWrapper_16z8i_41>button{padding:0;margin:0;background-color:transparent;border:none}._header_16z8i_41{display:flex;flex-direction:column;align-items:flex-start;width:100%}._cartItems_16z8i_59{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_16z8i_59 ul{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-spacing-1xs)}._cartItem_16z8i_59{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--spacing-0-5);align-items:start;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border:1px solid var(--color-neutrals-neutral-2);border-radius:var(--border-radius-md)}._topRow_16z8i_85{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--spacing-spacing-4xs)}._itemInfo_16z8i_92{display:flex;flex-direction:column;align-items:flex-start}._editUnit_16z8i_97{display:flex;align-items:center;text-align:start;gap:var(--spacing-spacing-3xs);border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;color:var(--text-text-links);word-wrap:break-word;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}._purchaseInformation_16z8i_113{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:flex-start;width:100%}._availabilitySlot_16z8i_119{min-width:0}._priceSlot_16z8i_122{justify-self:end}._itemManagement_16z8i_125{display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-spacing-3xs)}._quantitySlot_16z8i_131{align-self:flex-end}._cartItem_16z8i_59 p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._itemImage_16z8i_141{object-fit:contain}._removeItem_16z8i_144{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;width:min-content;height:min-content}._noItems_16z8i_154{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_16z8i_161{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}._checkoutButton_16z8i_168{width:100%;height:fit-content}

package/dist/assets/DropdownButton.css

@@ -0,0 +1 @@
+._root_1q683_1{display:inline-flex;align-items:stretch}._segment_1q683_6{height:100%}._segment-sm_1q683_10{min-height:22px}._segment-md_1q683_14{min-height:32px}._segment-lg_1q683_18{min-height:40px}._actionSegment_1q683_22{border-top-right-radius:0;border-bottom-right-radius:0}._actionSegment-sm_1q683_27{min-width:70px}._actionSegment-md_1q683_31{min-width:90px}._actionSegment-lg_1q683_35{min-width:112px}._toggleSegment_1q683_39{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid white;padding-inline:var(--spacing-spacing-2xs)}._toggleSegment-sm_1q683_46{min-width:26px}._toggleSegment-md_1q683_50{min-width:32px}._toggleSegment-lg_1q683_54{min-width:40px}._menu_1q683_58{padding:var(--spacing-spacing-2xs);min-width:0;box-sizing:border-box}._menuList_1q683_65{display:flex;flex-direction:column;width:100%}._menuItem_1q683_71{background:transparent;border:none;border-radius:var(--border-radius-xs);color:inherit;cursor:pointer;padding:var(--spacing-spacing-3xs);text-align:left;width:100%;box-sizing:border-box}._menuItem_1q683_71:hover{background:var(--surface-surface-secondary)}._menuItem_1q683_71:disabled{color:var(--surface-surface-disabled-btn);cursor:default}._menuItem_1q683_71:disabled:hover{background:transparent}

package/dist/atoms/DropdownButton/DropdownButton.d.ts

@@ -0,0 +1,26 @@
+import { ButtonProps } from '../Button/Button';
+import * as React from "react";
+type DropdownButtonSize = "sm" | "md" | "lg";
+export interface DropdownButtonOption {
+    key: React.Key;
+    label: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export interface DropdownButtonStyles {
+    root?: string;
+    action?: string;
+    toggle?: string;
+    menu?: string;
+    menuItem?: string;
+}
+export interface DropdownButtonProps extends Omit<ButtonProps, "children" | "size"> {
+    children: React.ReactNode;
+    size: DropdownButtonSize;
+    options: DropdownButtonOption[];
+    menuLabel?: string;
+    toggleLabel?: string;
+    styles?: DropdownButtonStyles;
+}
+export declare function DropdownButton({ children, options, menuLabel, toggleLabel, styles: styleOverrides, size, variant, hideAt, className, disabled, type, ...otherProps }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/atoms/DropdownButton/DropdownButton.js

@@ -0,0 +1,126 @@
+import { jsxs as L, jsx as o } from "react/jsx-runtime";
+import * as u from "react";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as R } from "../HideAt.js";
+import { Icon as $ } from "../Icon/Icon.js";
+import { Popover as k } from "../Popover/Popover.js";
+import { buttonClassNames as b } from "../Button/buttonClassName.js";
+import { Text as W } from "../Text/Text.js";
+import '../../assets/DropdownButton.css';const j = "_root_1q683_1", B = "_segment_1q683_6", D = "_actionSegment_1q683_22", M = "_toggleSegment_1q683_39", T = "_menu_1q683_58", A = "_menuList_1q683_65", E = "_menuItem_1q683_71", n = {
+  root: j,
+  segment: B,
+  "segment-sm": "_segment-sm_1q683_10",
+  "segment-md": "_segment-md_1q683_14",
+  "segment-lg": "_segment-lg_1q683_18",
+  actionSegment: D,
+  "actionSegment-sm": "_actionSegment-sm_1q683_27",
+  "actionSegment-md": "_actionSegment-md_1q683_31",
+  "actionSegment-lg": "_actionSegment-lg_1q683_35",
+  toggleSegment: M,
+  "toggleSegment-sm": "_toggleSegment-sm_1q683_46",
+  "toggleSegment-md": "_toggleSegment-md_1q683_50",
+  "toggleSegment-lg": "_toggleSegment-lg_1q683_54",
+  menu: T,
+  menuList: A,
+  menuItem: E
+};
+function U({
+  children: f,
+  options: s,
+  menuLabel: p = "More actions",
+  toggleLabel: q = "Open actions menu",
+  styles: t,
+  size: e,
+  variant: l,
+  hideAt: h,
+  className: d,
+  disabled: a,
+  type: N = "button",
+  ...x
+}) {
+  const r = s.length > 0, _ = a || !r, I = e === "sm" ? "xs" : e === "md" ? "sm" : "md", i = u.useRef(null), [w, C] = u.useState();
+  return u.useLayoutEffect(() => {
+    const g = i.current;
+    if (!g) return;
+    const m = () => {
+      C(g.getBoundingClientRect().width + 2);
+    };
+    m();
+    const S = new ResizeObserver(m);
+    return S.observe(g), () => {
+      S.disconnect();
+    };
+  }, []), /* @__PURE__ */ L(
+    "div",
+    {
+      ref: i,
+      className: c(n.root, R(h), d, t == null ? void 0 : t.root),
+      role: "group",
+      children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            className: c(
+              b({ size: e, variant: l, disabled: a, className: t == null ? void 0 : t.action }),
+              n.segment,
+              n[`segment-${e}`],
+              n[`actionSegment-${e}`],
+              n.actionSegment
+            ),
+            disabled: a,
+            type: N,
+            ...x,
+            children: f
+          }
+        ),
+        /* @__PURE__ */ o(
+          k,
+          {
+            disabled: _,
+            position: "bottom right",
+            contentClassName: c(n.menu, t == null ? void 0 : t.menu),
+            contentStyle: { width: w },
+            trigger: /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                className: c(
+                  b({
+                    size: e,
+                    variant: l,
+                    disabled: _,
+                    className: t == null ? void 0 : t.toggle
+                  }),
+                  n.segment,
+                  n[`segment-${e}`],
+                  n[`toggleSegment-${e}`],
+                  n.toggleSegment
+                ),
+                "aria-label": q,
+                disabled: _,
+                children: /* @__PURE__ */ o($, { iconKey: "fa-solid fa-chevron-down", size: "3xs" })
+              }
+            ),
+            children: ({ close: g }) => /* @__PURE__ */ o("div", { className: n.menuList, role: "menu", "aria-label": p, children: s.map((m) => /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: c(n.menuItem, t == null ? void 0 : t.menuItem),
+                disabled: m.disabled,
+                onClick: () => {
+                  m.onClick(), g();
+                },
+                children: /* @__PURE__ */ o(W, { size: I, children: m.label })
+              },
+              m.key
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  U as DropdownButton
+};

package/dist/atoms/DropdownButton/DropdownButton.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+import { DropdownButton } from './DropdownButton';
+declare const meta: {
+    title: string;
+    component: typeof DropdownButton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AllProps: Story;

package/dist/atoms/DropdownButton/DropdownButton.stories.js

@@ -0,0 +1,33 @@
+import { DropdownButton as o } from "./DropdownButton.js";
+const e = {
+  title: "Case Parts/Atoms/DropdownButton",
+  component: o,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+}, a = {
+  args: {
+    children: "Save",
+    size: "md",
+    variant: "primary",
+    options: [
+      {
+        key: "submit",
+        label: "Claim and Submit",
+        onClick: () => {
+        }
+      },
+      {
+        key: "review",
+        label: "Save for review",
+        onClick: () => {
+        }
+      }
+    ]
+  }
+};
+export {
+  a as AllProps,
+  e as default
+};

package/dist/atoms/Popover/Popover.d.ts

@@ -12,6 +12,7 @@ export type PopoverProps = {
     position?: Position;
     popoverClassName?: string;
     contentClassName?: string;
+    contentStyle?: React.CSSProperties;
     disabled?: boolean;
     closeOnOutsideClick?: boolean;
     /** If true, clicking any element with `data-popover-close` inside content will close */

package/dist/atoms/Popover/Popover.js

@@ -1,50 +1,51 @@
-import { jsxs as F, Fragment as H, jsx as k } from "react/jsx-runtime";
+import { jsxs as H, Fragment as N, jsx as z } from "react/jsx-runtime";
 import * as f from "react";
-import { r as N } from "../../index-BkF-BQ3Q.js";
-import { c as z } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Popover.css';const W = "_popover_vlr81_1", q = "_content_vlr81_7", P = {
-  popover: W,
-  content: q
+import { r as W } from "../../index-BkF-BQ3Q.js";
+import { c as P } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Popover.css';const q = "_popover_vlr81_1", D = "_content_vlr81_7", M = {
+  popover: q,
+  content: D
 };
-function D(r) {
+function T(r) {
   return r ? r.includes(" ") ? r : `${r} center` : "top center";
 }
-function T(r) {
-  const d = D(r).toLowerCase(), [s, c] = d.split(" ");
+function U(r) {
+  const d = T(r).toLowerCase(), [s, c] = d.split(" ");
   return { side: ["top", "right", "bottom", "left"].includes(s) ? s : "top", align: c === "left" || c === "top" ? "start" : c === "right" || c === "bottom" ? "end" : "center" };
 }
-function U(r, d, s, c, p = 8) {
-  const n = r.getBoundingClientRect(), l = d.getBoundingClientRect();
-  let a = 0, u = 0;
-  s === "top" ? a = n.top - l.height - p : s === "bottom" ? a = n.bottom + p : s === "left" ? u = n.left - l.width - p : s === "right" && (u = n.right + p), s === "top" || s === "bottom" ? c === "start" ? u = n.left : c === "end" ? u = n.right - l.width : u = n.left + n.width / 2 - l.width / 2 : c === "start" ? a = n.top : c === "end" ? a = n.bottom - l.height : a = n.top + n.height / 2 - l.height / 2;
-  const w = window.innerWidth, h = window.innerHeight;
-  return a = Math.max(4, Math.min(h - l.height - 4, a)), u = Math.max(4, Math.min(w - l.width - 4, u)), { top: a, left: u };
+function $(r, d, s, c, p = 8) {
+  const n = r.getBoundingClientRect(), u = d.getBoundingClientRect();
+  let l = 0, a = 0;
+  s === "top" ? l = n.top - u.height - p : s === "bottom" ? l = n.bottom + p : s === "left" ? a = n.left - u.width - p : s === "right" && (a = n.right + p), s === "top" || s === "bottom" ? c === "start" ? a = n.left : c === "end" ? a = n.right - u.width : a = n.left + n.width / 2 - u.width / 2 : c === "start" ? l = n.top : c === "end" ? l = n.bottom - u.height : l = n.top + n.height / 2 - u.height / 2;
+  const g = window.innerWidth, w = window.innerHeight;
+  return l = Math.max(4, Math.min(w - u.height - 4, l)), a = Math.max(4, Math.min(g - u.width - 4, a)), { top: l, left: a };
 }
-const J = ({
+const K = ({
   trigger: r,
   children: d,
   position: s,
   popoverClassName: c,
   contentClassName: p,
-  disabled: n,
+  contentStyle: n,
+  disabled: u,
   closeOnOutsideClick: l = !0,
   closeOnInsideClickAttr: a = !0,
-  open: u,
+  open: g,
   onOpenChange: w
 }) => {
-  const { side: h, align: y } = T(s), [M, S] = f.useState(!1), x = typeof u == "boolean", o = x ? u : M, [m, R] = f.useState(null), b = f.useRef(null), v = f.useRef(null), L = (t) => {
+  const { side: y, align: b } = U(s), [S, j] = f.useState(!1), R = typeof g == "boolean", o = R ? g : S, [m, _] = f.useState(null), L = f.useRef(null), v = f.useRef(null), x = (t) => {
     const e = typeof t == "function" ? t(o) : t;
-    x ? w == null || w(e) : S(e);
-  }, _ = () => {
-    n || L((t) => !t);
-  }, E = () => L(!1), j = () => L(!0), B = f.cloneElement(r, {
+    R ? w == null || w(e) : j(e);
+  }, k = () => {
+    u || x((t) => !t);
+  }, E = () => x(!1), B = () => x(!0), F = f.cloneElement(r, {
     ref: (t) => {
       const { ref: e } = r;
-      typeof e == "function" ? e(t) : e && (e.current = t), b.current = t;
+      typeof e == "function" ? e(t) : e && (e.current = t), L.current = t;
     },
     onClick: (t) => {
       var e, i;
-      (i = (e = r.props).onClick) == null || i.call(e, t), _();
+      (i = (e = r.props).onClick) == null || i.call(e, t), k();
     },
     "aria-haspopup": "dialog",
     "aria-expanded": o || void 0,
@@ -53,22 +54,22 @@ const J = ({
   });
   return f.useLayoutEffect(() => {
     if (!o) {
-      R(null);
+      _(null);
       return;
     }
-    const t = b.current, e = v.current;
+    const t = L.current, e = v.current;
     if (!t || !e) return;
     const i = () => {
-      R(U(t, e, h, y, 8));
+      _($(t, e, y, b, 8));
     };
     return i(), window.addEventListener("resize", i), window.addEventListener("scroll", i, !0), () => {
       window.removeEventListener("resize", i), window.removeEventListener("scroll", i, !0);
     };
-  }, [o, h, y, d]), f.useEffect(() => {
+  }, [o, y, b, d]), f.useEffect(() => {
     if (!o || !l) return;
     const t = (e) => {
-      const i = v.current, g = b.current;
-      !i || !g || i.contains(e.target) || g.contains(e.target) || E();
+      const i = v.current, h = L.current;
+      !i || !h || i.contains(e.target) || h.contains(e.target) || E();
     };
     return window.addEventListener("mousedown", t), () => window.removeEventListener("mousedown", t);
   }, [o, l]), f.useEffect(() => {
@@ -76,9 +77,9 @@ const J = ({
     const t = v.current;
     if (!t) return;
     const e = (i) => {
-      const g = i.target;
-      if (!g) return;
-      g.closest('[data-popover-close="true"]') && setTimeout(() => E(), 0);
+      const h = i.target;
+      if (!h) return;
+      h.closest('[data-popover-close="true"]') && setTimeout(() => E(), 0);
     };
     return t.addEventListener("click", e), () => t.removeEventListener("click", e);
   }, [o, a]), f.useEffect(() => {
@@ -94,19 +95,19 @@ const J = ({
       );
       t == null || t.focus();
     }
-  }, [o]), /* @__PURE__ */ F(H, { children: [
-    B,
-    o && typeof document < "u" && N.createPortal(
-      /* @__PURE__ */ k(
+  }, [o]), /* @__PURE__ */ H(N, { children: [
+    F,
+    o && typeof document < "u" && W.createPortal(
+      /* @__PURE__ */ z(
         "div",
         {
           id: "popover-panel",
           ref: v,
           role: "dialog",
           "aria-modal": "false",
-          className: z(P.popover, c),
-          "data-side": h,
-          "data-align": y,
+          className: P(M.popover, c),
+          "data-side": y,
+          "data-align": b,
           style: {
             position: "absolute",
             top: (m == null ? void 0 : m.top) ?? 0,
@@ -114,7 +115,7 @@ const J = ({
             visibility: m ? "visible" : "hidden",
             zIndex: 20
           },
-          children: /* @__PURE__ */ k("div", { className: z(P.content, p), children: typeof d == "function" ? d({ close: E, open: j, toggle: _ }) : d })
+          children: /* @__PURE__ */ z("div", { className: P(M.content, p), style: n, children: typeof d == "function" ? d({ close: E, open: B, toggle: k }) : d })
         }
       ),
       document.body
@@ -122,5 +123,5 @@ const J = ({
   ] });
 };
 export {
-  J as Popover
+  K as Popover
 };

package/dist/main-client.d.ts

@@ -3,6 +3,8 @@ export { HorizontalScroll } from './atoms/HorizontalScroll/HorizontalScroll';
 export type { HorizontalScrollProps } from './atoms/HorizontalScroll/HorizontalScroll';
 export { SlideInPanel } from './atoms/SlideInPanel/SlideInPanel';
 export type { SlideInPanelProps } from './atoms/SlideInPanel/SlideInPanel';
+export { DropdownButton } from './atoms/DropdownButton/DropdownButton';
+export type { DropdownButtonProps, DropdownButtonOption, DropdownButtonStyles } from './atoms/DropdownButton/DropdownButton';
 export { Tooltip } from './atoms/Tooltip/Tooltip';
 export { Popover } from './atoms/Popover/Popover';
 export type { PopoverProps } from './atoms/Popover/Popover';

package/dist/main-client.js

@@ -8,13 +8,13 @@ import { Separator as C } from "./atoms/Separator/Separator.js";
 import { Text as S } from "./atoms/Text/Text.js";
 import { Input as A } from "./atoms/Input/Input.js";
 import { ToggleSwitch as k } from "./atoms/ToggleSwitch/ToggleSwitch.js";
-import { Link as P } from "./atoms/Link/Link.js";
+import { Link as I } from "./atoms/Link/Link.js";
 import { linkClassName as h } from "./atoms/Link/linkClassName.js";
-import { configureLink as L, routerOverride as w } from "./atoms/Link/configureLink.js";
+import { configureLink as w, routerOverride as L } from "./atoms/Link/configureLink.js";
 import { LinkButton as y } from "./atoms/LinkButton/LinkButton.js";
 import { configureImage as H } from "./atoms/Image/configureImage.js";
 import { getHideAtStyles as N } from "./atoms/HideAt.js";
-import { Logo as z } from "./molecules/Logo/Logo.js";
+import { Logo as D } from "./molecules/Logo/Logo.js";
 import { SearchBox as E } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as O } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as R } from "./molecules/Pricing/Pricing.js";
@@ -28,79 +28,81 @@ import { Admonition as eo } from "./molecules/Admonition/Admonition.js";
 import { NotFound as mo } from "./organisms/NotFound/NotFound.js";
 import { HorizontalScroll as fo } from "./atoms/HorizontalScroll/HorizontalScroll.js";
 import { SlideInPanel as ao } from "./atoms/SlideInPanel/SlideInPanel.js";
-import { Tooltip as no } from "./atoms/Tooltip/Tooltip.js";
-import { Popover as uo } from "./atoms/Popover/Popover.js";
-import { Account as Co } from "./molecules/Account/Account.js";
-import { Chip as So } from "./molecules/Chip/Chip.js";
-import { ToggleView as Ao } from "./molecules/ToggleView/ToggleView.js";
-import { CartPart as ko } from "./molecules/Cart/CartPart.js";
-import { AddToCartPart as Po } from "./molecules/AddToCartPart/AddToCartPart.js";
-import { CartSlideInPanel as ho } from "./molecules/Cart/CartSlideInPanel.js";
-import { StatefulButton as Lo } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as bo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as Fo } from "./molecules/AddToCart/AddToCart.js";
-import { Modal as Mo } from "./molecules/Modal/Modal.js";
-import { ImageViewer as Vo } from "./molecules/ImageViewer/ImageViewer.js";
-import { T as Do } from "./Table-BX4PtCNE.js";
-import { Error as Go } from "./molecules/Error/Error.js";
-import { MainNav as Qo } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as Zo } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as qo } from "./organisms/Product/Product.js";
-import { Carousel as Ko } from "./organisms/Carousel/Carousel.js";
-import { Footer as Wo } from "./organisms/Footer/Footer.js";
-import { default as Yo } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
+import { DropdownButton as no } from "./atoms/DropdownButton/DropdownButton.js";
+import { Tooltip as uo } from "./atoms/Tooltip/Tooltip.js";
+import { Popover as Co } from "./atoms/Popover/Popover.js";
+import { Account as So } from "./molecules/Account/Account.js";
+import { Chip as Ao } from "./molecules/Chip/Chip.js";
+import { ToggleView as ko } from "./molecules/ToggleView/ToggleView.js";
+import { CartPart as Io } from "./molecules/Cart/CartPart.js";
+import { AddToCartPart as ho } from "./molecules/AddToCartPart/AddToCartPart.js";
+import { CartSlideInPanel as wo } from "./molecules/Cart/CartSlideInPanel.js";
+import { StatefulButton as bo } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as Fo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as Mo } from "./molecules/AddToCart/AddToCart.js";
+import { Modal as Vo } from "./molecules/Modal/Modal.js";
+import { ImageViewer as zo } from "./molecules/ImageViewer/ImageViewer.js";
+import { T as Go } from "./Table-BX4PtCNE.js";
+import { Error as Qo } from "./molecules/Error/Error.js";
+import { MainNav as Zo } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as qo } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Ko } from "./organisms/Product/Product.js";
+import { Carousel as Wo } from "./organisms/Carousel/Carousel.js";
+import { Footer as Yo } from "./organisms/Footer/Footer.js";
+import { default as $o } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
 export {
-  Co as Account,
-  Fo as AddToCart,
-  Po as AddToCartPart,
+  So as Account,
+  Mo as AddToCart,
+  ho as AddToCartPart,
   eo as Admonition,
-  bo as AnimatedCheckMark,
+  Fo as AnimatedCheckMark,
   j as Availability,
   J as Avatar,
   U as BannerCard,
   _ as Breadcrumbs,
   e as Button,
   X as CardLink,
-  Ko as Carousel,
-  ko as CartPart,
-  ho as CartSlideInPanel,
-  So as Chip,
-  Zo as ChipSelector,
+  Wo as Carousel,
+  Io as CartPart,
+  wo as CartSlideInPanel,
+  Ao as Chip,
+  qo as ChipSelector,
   f as Column,
   oo as Disclaimer,
-  Go as Error,
+  no as DropdownButton,
+  Qo as Error,
   m as Flex,
-  Wo as Footer,
+  Yo as Footer,
   x as Grid,
   i as Head,
   fo as HorizontalScroll,
   l as Icon,
-  Vo as ImageViewer,
+  zo as ImageViewer,
   A as Input,
-  P as Link,
+  I as Link,
   y as LinkButton,
-  z as Logo,
-  Qo as MainNav,
-  Mo as Modal,
+  D as Logo,
+  Zo as MainNav,
+  Vo as Modal,
   mo as NotFound,
-  uo as Popover,
+  Co as Popover,
   R as Pricing,
-  qo as Product,
+  Ko as Product,
   O as QuantityInput,
   u as Root,
   E as SearchBox,
   C as Separator,
   ao as SlideInPanel,
-  Yo as SpinZoomViewer,
-  Lo as StatefulButton,
-  Do as Table,
+  $o as SpinZoomViewer,
+  bo as StatefulButton,
+  Go as Table,
   S as Text,
   k as ToggleSwitch,
-  Ao as ToggleView,
-  no as Tooltip,
+  ko as ToggleView,
+  uo as Tooltip,
   H as configureImage,
-  L as configureLink,
+  w as configureLink,
   N as getHideAtStyles,
   h as linkClassName,
-  w as routerOverride
+  L as routerOverride
 };

package/dist/main-server.d.ts

@@ -35,7 +35,7 @@ export { QuantityInput } from './molecules/QuantityInput/QuantityInput';
 export { Pricing } from './molecules/Pricing/Pricing';
 export type { PricingProps } from './molecules/Pricing/Pricing';
 export { Availability } from './molecules/Availability/Availability';
-export type { AvailabilityProps, ContactUsLinkBehavior } from './molecules/Availability/Availability';
+export type { AvailabilityProps } from './molecules/Availability/Availability';
 export { Avatar } from './molecules/Avatar/Avatar';
 export type { AvatarProps } from './molecules/Avatar/Avatar';
 export { BannerCard } from './molecules/BannerCard/BannerCard';

package/dist/molecules/Availability/Availability.d.ts

@@ -1,9 +1,18 @@
-export type ContactUsLinkBehavior = "same-tab" | "new-tab";
 export interface AvailabilityProps {
-    availId: string;
+    availId: AvailabilityId;
     availDescription: string;
-    contactHref: string;
-    contactLinkBehavior: ContactUsLinkBehavior;
     availClassName?: string;
+    enableTooltip?: boolean;
+    inventory?: Inventory;
 }
-export declare function Availability({ availId: id, availDescription: description, contactHref, contactLinkBehavior, availClassName: className }: AvailabilityProps): import("react/jsx-runtime").JSX.Element;
+export interface WarehouseInventory {
+    Unreserved: number;
+    Available: number;
+}
+export interface Inventory {
+    MPK?: WarehouseInventory;
+    SEA?: WarehouseInventory;
+    STL?: WarehouseInventory;
+}
+export type AvailabilityId = "in-stock" | "limited" | "discontinued" | "available" | "not-found";
+export declare function Availability({ availId: id, availDescription: description, availClassName: className, enableTooltip, inventory }: AvailabilityProps): import("react/jsx-runtime").JSX.Element;