@caseparts-org/caseblocks 0.0.212 → 0.0.214

package/dist/assets/Input.css

@@ -1 +1 @@
-._input-container_8oisf_1{display:flex;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box}._input-container_8oisf_1>label{font-family:var(--font-family-label);font-size:var(--font-size-xs)}._input_8oisf_1{height:32px;border-radius:var(--radius-radius-minimal, 2px);border:1px solid var(--border-border-primary, #dfdfdf);background:var(--surface-surface-primary);padding:0px var(--spacing-spacing-1xs, 12px);outline:none;font-size:var(--font-size-sm);width:100%}@media (max-width:768px){._input_8oisf_1{font-size:var(--font-size-md)}}._input_8oisf_1:focus{border:1px solid var(--border-border-primary-btn, #1380b1);box-shadow:0 0 2px 1px var(--border-border-primary-btn)}
+._input-container_11f48_1{display:flex;position:relative;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box}._input_11f48_1{height:32px;border-radius:var(--radius-radius-minimal, 2px);border:1px solid var(--border-border-primary, #dfdfdf);background:var(--surface-surface-primary);padding:0px var(--spacing-spacing-1xs, 12px);outline:none;font-size:var(--font-size-sm);width:100%}@media (max-width:767px){._input_11f48_1{font-size:var(--font-size-md)}}._input_11f48_1:focus{border:1px solid var(--border-border-primary-btn, #1380b1);box-shadow:0 0 2px 1px var(--border-border-primary-btn)}._label_11f48_29{position:absolute;align-self:flex-start;left:8px;top:-8px;padding:0 8px;cursor:text;transition:all .2s ease-in;font-family:var(--font-family-label);font-size:var(--font-size-xxs);color:var(--text-text-quaternary);background-color:var(--surface-surface-primary)}._labelPlaceholder_11f48_43{position:absolute;align-self:flex-start;font-style:italic;font-family:var(--font-family-label);font-size:var(--font-size-sm);background-color:transparent;color:var(--text-text-quaternary);left:12px;top:8px;padding:0 2px;cursor:text;transition:all .2s ease-in}input:hover{border:1px solid var(--border-border-primary-btn, #1380b1);transition:all .2s ease}

package/dist/assets/ProgressBar.css

@@ -0,0 +1 @@
+._progressBar-section_w0n30_1{width:500px;display:grid;gap:var(--spacing-spacing-2xs)}._progressBar-cell_w0n30_11{width:90px;display:flex;align-items:center;gap:var(--spacing-spacing-2xs)}._progressBar-cell_w0n30_11>._track_w0n30_25{height:8px}._progressBar-section_w0n30_1>._track_w0n30_25{height:24px}._track_w0n30_25{border:1px solid var(--border-border-primary);border-radius:28px;width:100%;display:flex;flex-direction:row;overflow:hidden;background-color:var(--color-neutrals-neutral-1)}._completed_w0n30_59{background-color:var(--color-alerts-success);height:100%}._inProgress_w0n30_69{background-color:var(--color-alerts-caution-tips);height:100%}._completed_w0n30_59,._completedFull_w0n30_81,._inProgress_w0n30_69{transition:width .8s ease}._labels_w0n30_91{display:flex;flex-direction:row;justify-content:flex-start;gap:var(--spacing-spacing-default)}._labelContainer_w0n30_105{display:flex;flex-direction:row;gap:4px}

package/dist/atoms/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { HideAtProps } from '../HideAt';
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HideAtProps {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "placeholder">, HideAtProps {
     label: string | null;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/atoms/Input/Input.js

@@ -1,26 +1,34 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import r from "react";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import { getHideAtStyles as c } from "../HideAt.js";
-import '../../assets/Input.css';const u = "_input_8oisf_1", e = {
-  "input-container": "_input-container_8oisf_1",
-  input: u
-}, l = r.forwardRef(
-  ({ label: n, hideAt: s, className: a, ...t }, o) => /* @__PURE__ */ p("div", { className: e["input-container"], children: [
-    n && /* @__PURE__ */ i("label", { htmlFor: t.name, children: n }),
-    /* @__PURE__ */ i(
-      "input",
-      {
-        ref: o,
-        id: t.name,
-        type: "text",
-        className: m(e.input, c(s), a),
-        ...t
-      }
-    )
-  ] })
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import m, { useState as p } from "react";
+import { c as s } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as _ } from "../HideAt.js";
+import '../../assets/Input.css';const f = "_input_11f48_1", b = "_label_11f48_29", F = "_labelPlaceholder_11f48_43", e = {
+  "input-container": "_input-container_11f48_1",
+  input: f,
+  label: b,
+  labelPlaceholder: F
+}, h = m.forwardRef(
+  ({ label: o, value: t, hideAt: c, className: i, ...l }, r) => {
+    const [u, a] = p(!1);
+    return /* @__PURE__ */ d("div", { className: s(e["input-container"], _(c)), children: [
+      /* @__PURE__ */ n("label", { htmlFor: l.name, className: u || t ? e.label : e.labelPlaceholder, children: o }),
+      /* @__PURE__ */ n(
+        "input",
+        {
+          value: t,
+          ref: r,
+          id: l.name,
+          type: "text",
+          onFocus: () => a(!0),
+          onBlur: () => a(!1),
+          className: s(e.input, i),
+          ...l
+        }
+      )
+    ] });
+  }
 );
-l.displayName = "Input";
+h.displayName = "Input";
 export {
-  l as Input
+  h as Input
 };

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

@@ -11,3 +11,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithHideAt: Story;
+export declare const ContactAutocompleteForm: Story;

package/dist/atoms/Input/Input.stories.js

@@ -1,27 +1,164 @@
-import { Input as e } from "./Input.js";
-const a = {
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { useState as u, useEffect as i } from "react";
+import { Input as l } from "./Input.js";
+const h = {
   title: "Case Parts/Atoms/Input",
-  component: e,
+  component: l,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered"
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, l = {
+}, d = ({ value: e, onChange: o, ...t }) => {
+  const [m, s] = u(e ?? "");
+  i(() => {
+    s(e ?? "");
+  }, [e]);
+  function r(n) {
+    s(n.target.value), o == null || o(n);
+  }
+  return /* @__PURE__ */ a(l, { ...t, value: m, onChange: r });
+}, C = () => {
+  const [e, o] = u({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    address1: "",
+    city: "",
+    state: "",
+    postalCode: ""
+  });
+  function t(m) {
+    const { name: s, value: r } = m.target;
+    o((n) => ({
+      ...n,
+      [s]: r
+    }));
+  }
+  return /* @__PURE__ */ p(
+    "form",
+    {
+      style: {
+        display: "grid",
+        gap: "1rem",
+        width: "min(40rem, 100%)",
+        gridTemplateColumns: "repeat(2, minmax(0, 1fr))"
+      },
+      children: [
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "First name",
+            name: "firstName",
+            autoComplete: "given-name",
+            value: e.firstName,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Last name",
+            name: "lastName",
+            autoComplete: "family-name",
+            value: e.lastName,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Email",
+            name: "email",
+            type: "email",
+            autoComplete: "email",
+            value: e.email,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Phone",
+            name: "phone",
+            type: "tel",
+            autoComplete: "tel",
+            value: e.phone,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Address",
+            name: "address1",
+            autoComplete: "street-address",
+            value: e.address1,
+            onChange: t,
+            style: { gridColumn: "1 / -1" }
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "City",
+            name: "city",
+            autoComplete: "address-level2",
+            value: e.city,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "State",
+            name: "state",
+            autoComplete: "address-level1",
+            value: e.state,
+            onChange: t
+          }
+        ),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Postal code",
+            name: "postalCode",
+            autoComplete: "postal-code",
+            value: e.postalCode,
+            onChange: t
+          }
+        )
+      ]
+    }
+  );
+}, f = {
   args: {
     label: "Label",
-    placeholder: "Type here..."
-  }
-}, o = {
+    value: ""
+  },
+  render: (e) => /* @__PURE__ */ a(d, { ...e })
+}, b = {
   args: {
     label: "Label",
-    placeholder: "Hidden at md",
-    hideAt: "md"
-  }
+    hideAt: ["md", "lg"],
+    value: ""
+  },
+  render: (e) => /* @__PURE__ */ a(d, { ...e })
+}, y = {
+  args: {
+    label: "Label",
+    value: ""
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: () => /* @__PURE__ */ a(C, {})
 };
 export {
-  l as Default,
-  o as WithHideAt,
-  a as default
+  y as ContactAutocompleteForm,
+  f as Default,
+  b as WithHideAt,
+  h as default
 };

package/dist/atoms/Pill/Pill.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 import { TextColorToken } from '../Text/Text';
-export interface PillProps {
+export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
     colorToken?: "neutral" | "secondary" | "caution-tips" | "warning" | "success" | "error-warning";
     customColor?: string;
@@ -8,4 +8,4 @@ export interface PillProps {
     size: "xs" | "sm" | "md";
     className?: string;
 }
-export declare function Pill({ children, colorToken, textColorToken, customColor, size, className }: PillProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pill({ colorToken, textColorToken, customColor, size, className, children, ...otherProps }: PillProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Pill/Pill.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
-import { Text as s } from "../Text/Text.js";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Pill.css';const d = "_pill_1dm0w_1", l = {
-  pill: d,
+import { Text as m } from "../Text/Text.js";
+import { c as d } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Pill.css';const t = "_pill_1dm0w_1", l = {
+  pill: t,
   "pill-xs": "_pill-xs_1dm0w_17",
   "pill-sm": "_pill-sm_1dm0w_25",
   "pill-md": "_pill-md_1dm0w_33",
@@ -13,21 +13,30 @@ import '../../assets/Pill.css';const d = "_pill_1dm0w_1", l = {
   "pill-color-success": "_pill-color-success_1dm0w_73",
   "pill-color-error-warning": "_pill-color-error-warning_1dm0w_81"
 };
-function w({ children: p, colorToken: _ = "neutral", textColorToken: c, customColor: o, size: r, className: n }) {
+function u({
+  colorToken: p = "neutral",
+  textColorToken: _,
+  customColor: o,
+  size: r,
+  className: c,
+  children: n,
+  ...s
+}) {
   return /* @__PURE__ */ i(
     "span",
     {
-      className: m(
+      className: d(
         l.pill,
-        l[`pill-color-${_}`],
+        l[`pill-color-${p}`],
         l[`pill-${r}`],
-        n
+        c
       ),
       style: o ? { background: o } : void 0,
-      children: /* @__PURE__ */ i(s, { size: r, colorToken: c, children: p })
+      ...s,
+      children: /* @__PURE__ */ i(m, { size: r, colorToken: _, children: n })
     }
   );
 }
 export {
-  w as Pill
+  u as Pill
 };

package/dist/main-client.js

@@ -4,11 +4,11 @@ import { Column as f, Grid as x } from "./atoms/Grid/Grid.js";
 import { Head as i } from "./atoms/Root/Head.js";
 import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as u } from "./atoms/Root/Root.js";
-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 T } from "./atoms/ToggleSwitch/ToggleSwitch.js";
-import { Link as B } from "./atoms/Link/Link.js";
+import { Separator as g } from "./atoms/Separator/Separator.js";
+import { Text as s } from "./atoms/Text/Text.js";
+import { Input as P } from "./atoms/Input/Input.js";
+import { ToggleSwitch as B } from "./atoms/ToggleSwitch/ToggleSwitch.js";
+import { Link as k } from "./atoms/Link/Link.js";
 import { linkClassName as h } from "./atoms/Link/linkClassName.js";
 import { configureLink as w, routerOverride as L } from "./atoms/Link/configureLink.js";
 import { LinkButton as y } from "./atoms/LinkButton/LinkButton.js";
@@ -19,89 +19,91 @@ import { Logo as E } from "./molecules/Logo/Logo.js";
 import { SearchBox as O } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as R } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as j } from "./molecules/Pricing/Pricing.js";
-import { Availability as J } from "./molecules/Availability/Availability.js";
-import { Avatar as U } from "./molecules/Avatar/Avatar.js";
-import { BannerCard as X } from "./molecules/BannerCard/BannerCard.js";
-import { CardLink as _ } from "./molecules/CardLink/CardLink.js";
-import { Breadcrumbs as oo } from "./molecules/Breadcrumbs/Breadcrumbs.js";
-import { Disclaimer as eo } from "./molecules/Disclaimer/Disclaimer.js";
-import { Admonition as mo } from "./molecules/Admonition/Admonition.js";
-import { NotFound as fo } from "./organisms/NotFound/NotFound.js";
-import { HorizontalScroll as ao } from "./atoms/HorizontalScroll/HorizontalScroll.js";
-import { SlideInPanel as no } from "./atoms/SlideInPanel/SlideInPanel.js";
-import { DropdownButton as uo } from "./atoms/DropdownButton/DropdownButton.js";
-import { Tooltip as Co } from "./atoms/Tooltip/Tooltip.js";
-import { Popover as So } from "./atoms/Popover/Popover.js";
-import { Account as Ao } from "./molecules/Account/Account.js";
-import { Chip as To } from "./molecules/Chip/Chip.js";
-import { ToggleView as Bo } from "./molecules/ToggleView/ToggleView.js";
-import { CartPart as ho } from "./molecules/Cart/CartPart.js";
-import { AddToCartPart as wo } from "./molecules/AddToCartPart/AddToCartPart.js";
-import { CartSlideInPanel as bo } from "./molecules/Cart/CartSlideInPanel.js";
-import { StatefulButton as Fo } from "./molecules/StatefulButton/StatefulButton.js";
-import { AnimatedCheckMark as Mo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as Vo } from "./molecules/AddToCart/AddToCart.js";
-import { Modal as zo } from "./molecules/Modal/Modal.js";
-import { ImageViewer as Go } from "./molecules/ImageViewer/ImageViewer.js";
-import { T as Qo } from "./Table-BX4PtCNE.js";
-import { Error as Zo } from "./molecules/Error/Error.js";
-import { MainNav as qo } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as Ko } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as Wo } from "./organisms/Product/Product.js";
-import { Carousel as Yo } from "./organisms/Carousel/Carousel.js";
-import { Footer as $o } from "./organisms/Footer/Footer.js";
-import { default as rr } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
+import { ProgressBar as J } from "./molecules/ProgressBar/ProgressBar.js";
+import { Availability as U } from "./molecules/Availability/Availability.js";
+import { Avatar as X } from "./molecules/Avatar/Avatar.js";
+import { BannerCard as _ } from "./molecules/BannerCard/BannerCard.js";
+import { CardLink as oo } from "./molecules/CardLink/CardLink.js";
+import { Breadcrumbs as eo } from "./molecules/Breadcrumbs/Breadcrumbs.js";
+import { Disclaimer as mo } from "./molecules/Disclaimer/Disclaimer.js";
+import { Admonition as fo } from "./molecules/Admonition/Admonition.js";
+import { NotFound as ao } from "./organisms/NotFound/NotFound.js";
+import { HorizontalScroll as no } from "./atoms/HorizontalScroll/HorizontalScroll.js";
+import { SlideInPanel as uo } from "./atoms/SlideInPanel/SlideInPanel.js";
+import { DropdownButton as go } from "./atoms/DropdownButton/DropdownButton.js";
+import { Tooltip as so } from "./atoms/Tooltip/Tooltip.js";
+import { Popover as Po } from "./atoms/Popover/Popover.js";
+import { Account as Bo } from "./molecules/Account/Account.js";
+import { Chip as ko } from "./molecules/Chip/Chip.js";
+import { ToggleView as ho } from "./molecules/ToggleView/ToggleView.js";
+import { CartPart as wo } from "./molecules/Cart/CartPart.js";
+import { AddToCartPart as bo } from "./molecules/AddToCartPart/AddToCartPart.js";
+import { CartSlideInPanel as Fo } from "./molecules/Cart/CartSlideInPanel.js";
+import { StatefulButton as Mo } from "./molecules/StatefulButton/StatefulButton.js";
+import { AnimatedCheckMark as Vo } from "./molecules/StatefulButton/AnimatedCheckmark.js";
+import { AddToCart as zo } from "./molecules/AddToCart/AddToCart.js";
+import { Modal as Go } from "./molecules/Modal/Modal.js";
+import { ImageViewer as Qo } from "./molecules/ImageViewer/ImageViewer.js";
+import { T as Zo } from "./Table-BX4PtCNE.js";
+import { Error as qo } from "./molecules/Error/Error.js";
+import { MainNav as Ko } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as Wo } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Yo } from "./organisms/Product/Product.js";
+import { Carousel as $o } from "./organisms/Carousel/Carousel.js";
+import { Footer as rr } from "./organisms/Footer/Footer.js";
+import { default as tr } from "./organisms/SpinZoomViewer/SpinZoomViewer.js";
 export {
-  Ao as Account,
-  Vo as AddToCart,
-  wo as AddToCartPart,
-  mo as Admonition,
-  Mo as AnimatedCheckMark,
-  J as Availability,
-  U as Avatar,
-  X as BannerCard,
-  oo as Breadcrumbs,
+  Bo as Account,
+  zo as AddToCart,
+  bo as AddToCartPart,
+  fo as Admonition,
+  Vo as AnimatedCheckMark,
+  U as Availability,
+  X as Avatar,
+  _ as BannerCard,
+  eo as Breadcrumbs,
   e as Button,
-  _ as CardLink,
-  Yo as Carousel,
-  ho as CartPart,
-  bo as CartSlideInPanel,
-  To as Chip,
-  Ko as ChipSelector,
+  oo as CardLink,
+  $o as Carousel,
+  wo as CartPart,
+  Fo as CartSlideInPanel,
+  ko as Chip,
+  Wo as ChipSelector,
   f as Column,
-  eo as Disclaimer,
-  uo as DropdownButton,
-  Zo as Error,
+  mo as Disclaimer,
+  go as DropdownButton,
+  qo as Error,
   m as Flex,
-  $o as Footer,
+  rr as Footer,
   x as Grid,
   i as Head,
-  ao as HorizontalScroll,
+  no as HorizontalScroll,
   l as Icon,
-  Go as ImageViewer,
-  A as Input,
-  B as Link,
+  Qo as ImageViewer,
+  P as Input,
+  k as Link,
   y as LinkButton,
   E as Logo,
-  qo as MainNav,
-  zo as Modal,
-  fo as NotFound,
+  Ko as MainNav,
+  Go as Modal,
+  ao as NotFound,
   H as Pill,
-  So as Popover,
+  Po as Popover,
   j as Pricing,
-  Wo as Product,
+  Yo as Product,
+  J as ProgressBar,
   R as QuantityInput,
   u as Root,
   O as SearchBox,
-  C as Separator,
-  no as SlideInPanel,
-  rr as SpinZoomViewer,
-  Fo as StatefulButton,
-  Qo as Table,
-  S as Text,
-  T as ToggleSwitch,
-  Bo as ToggleView,
-  Co as Tooltip,
+  g as Separator,
+  uo as SlideInPanel,
+  tr as SpinZoomViewer,
+  Mo as StatefulButton,
+  Zo as Table,
+  s as Text,
+  B as ToggleSwitch,
+  ho as ToggleView,
+  so as Tooltip,
   N as configureImage,
   w as configureLink,
   D as getHideAtStyles,

package/dist/main-server.d.ts

@@ -36,6 +36,8 @@ export type { QuantityInputProps } from './molecules/QuantityInput/QuantityInput
 export { QuantityInput } from './molecules/QuantityInput/QuantityInput';
 export { Pricing } from './molecules/Pricing/Pricing';
 export type { PricingProps } from './molecules/Pricing/Pricing';
+export { ProgressBar } from './molecules/ProgressBar/ProgressBar';
+export type { ProgressBarProps } from './molecules/ProgressBar/ProgressBar';
 export { Availability } from './molecules/Availability/Availability';
 export type { AvailabilityProps } from './molecules/Availability/Availability';
 export { Avatar } from './molecules/Avatar/Avatar';

package/dist/main-server.js

@@ -1,17 +1,17 @@
-import { Button as t } from "./atoms/Button/Button.js";
+import { Button as e } from "./atoms/Button/Button.js";
 import { Flex as m } from "./atoms/Flex/Flex.js";
 import { Column as x, Grid as f } from "./atoms/Grid/Grid.js";
 import { Head as n } from "./atoms/Root/Head.js";
 import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as d } from "./atoms/Root/Root.js";
-import { Separator as g } from "./atoms/Separator/Separator.js";
-import { Text as s } from "./atoms/Text/Text.js";
+import { Separator as c } from "./atoms/Separator/Separator.js";
+import { Text as B } from "./atoms/Text/Text.js";
 import { Input as L } from "./atoms/Input/Input.js";
 import { ToggleSwitch as C } from "./atoms/ToggleSwitch/ToggleSwitch.js";
 import { Link as S } from "./atoms/Link/Link.js";
 import { linkClassName as y } from "./atoms/Link/linkClassName.js";
-import { configureLink as h, routerOverride as F } from "./atoms/Link/configureLink.js";
-import { LinkButton as N } from "./atoms/LinkButton/LinkButton.js";
+import { configureLink as b, routerOverride as h } from "./atoms/Link/configureLink.js";
+import { LinkButton as H } from "./atoms/LinkButton/LinkButton.js";
 import { Pill as T } from "./atoms/Pill/Pill.js";
 import { configureImage as D } from "./atoms/Image/configureImage.js";
 import { getHideAtStyles as O } from "./atoms/HideAt.js";
@@ -19,44 +19,46 @@ import { Logo as R } from "./molecules/Logo/Logo.js";
 import { SearchBox as q } from "./molecules/SearchBox/SearchBox.js";
 import { QuantityInput as E } from "./molecules/QuantityInput/QuantityInput.js";
 import { Pricing as K } from "./molecules/Pricing/Pricing.js";
-import { Availability as U } from "./molecules/Availability/Availability.js";
-import { Avatar as W } from "./molecules/Avatar/Avatar.js";
-import { BannerCard as Y } from "./molecules/BannerCard/BannerCard.js";
-import { CardLink as _ } from "./molecules/CardLink/CardLink.js";
-import { Breadcrumbs as oo } from "./molecules/Breadcrumbs/Breadcrumbs.js";
-import { Disclaimer as to } from "./molecules/Disclaimer/Disclaimer.js";
-import { Admonition as mo } from "./molecules/Admonition/Admonition.js";
-import { NotFound as xo } from "./organisms/NotFound/NotFound.js";
+import { ProgressBar as U } from "./molecules/ProgressBar/ProgressBar.js";
+import { Availability as W } from "./molecules/Availability/Availability.js";
+import { Avatar as Y } from "./molecules/Avatar/Avatar.js";
+import { BannerCard as _ } from "./molecules/BannerCard/BannerCard.js";
+import { CardLink as rr } from "./molecules/CardLink/CardLink.js";
+import { Breadcrumbs as er } from "./molecules/Breadcrumbs/Breadcrumbs.js";
+import { Disclaimer as mr } from "./molecules/Disclaimer/Disclaimer.js";
+import { Admonition as xr } from "./molecules/Admonition/Admonition.js";
+import { NotFound as ir } from "./organisms/NotFound/NotFound.js";
 export {
-  mo as Admonition,
-  U as Availability,
-  W as Avatar,
-  Y as BannerCard,
-  oo as Breadcrumbs,
-  t as Button,
-  _ as CardLink,
+  xr as Admonition,
+  W as Availability,
+  Y as Avatar,
+  _ as BannerCard,
+  er as Breadcrumbs,
+  e as Button,
+  rr as CardLink,
   x as Column,
-  to as Disclaimer,
+  mr as Disclaimer,
   m as Flex,
   f as Grid,
   n as Head,
   l as Icon,
   L as Input,
   S as Link,
-  N as LinkButton,
+  H as LinkButton,
   R as Logo,
-  xo as NotFound,
+  ir as NotFound,
   T as Pill,
   K as Pricing,
+  U as ProgressBar,
   E as QuantityInput,
   d as Root,
   q as SearchBox,
-  g as Separator,
-  s as Text,
+  c as Separator,
+  B as Text,
   C as ToggleSwitch,
   D as configureImage,
-  h as configureLink,
+  b as configureLink,
   O as getHideAtStyles,
   y as linkClassName,
-  F as routerOverride
+  h as routerOverride
 };

package/dist/molecules/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    kind?: "percent" | "raw";
+    completedValue: number;
+    inProgressValue?: number;
+    totalValue?: number;
+    totalLabel?: string;
+    completedLabel?: string;
+    inProgressLabel?: string;
+    variant: "cell" | "section";
+    className?: string;
+}
+export declare function ProgressBar({ kind, completedValue, inProgressValue, totalValue, totalLabel, completedLabel, inProgressLabel, variant, className, ...otherProps }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/ProgressBar/ProgressBar.js

@@ -0,0 +1,83 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { Text as _ } from "../../atoms/Text/Text.js";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import '../../assets/ProgressBar.css';const g = "_track_w0n30_25", v = "_completed_w0n30_59", x = "_inProgress_w0n30_69", B = "_completedFull_w0n30_81", N = "_labels_w0n30_91", k = "_labelContainer_w0n30_105", r = {
+  "progressBar-section": "_progressBar-section_w0n30_1",
+  "progressBar-cell": "_progressBar-cell_w0n30_11",
+  track: g,
+  completed: v,
+  inProgress: x,
+  completedFull: B,
+  labels: N,
+  labelContainer: k
+};
+function z({
+  kind: o = "percent",
+  completedValue: s,
+  inProgressValue: e,
+  totalValue: i,
+  totalLabel: d,
+  completedLabel: p,
+  inProgressLabel: h,
+  variant: a,
+  className: b,
+  ...w
+}) {
+  let c = 0, t = 0;
+  return o === "percent" && (c = s, t = e ?? 0), o === "raw" && i !== void 0 && (c = s / i * 100, e === void 0 && (e = 0), t = e / i * 100), c = Math.min(100, Math.max(0, c)), t = Math.min(100, Math.max(0, t)), /* @__PURE__ */ n(
+    "div",
+    {
+      className: f(
+        r.progressBar,
+        r[`progressBar-${a}`],
+        b
+      ),
+      ...w,
+      children: [
+        a === "section" && /* @__PURE__ */ n("div", { className: r.labels, children: [
+          /* @__PURE__ */ l(
+            m,
+            {
+              label: d,
+              value: i
+            }
+          ),
+          /* @__PURE__ */ l(
+            m,
+            {
+              label: p,
+              value: s
+            }
+          ),
+          /* @__PURE__ */ l(
+            m,
+            {
+              label: h,
+              value: e
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { className: r.track, children: [
+          /* @__PURE__ */ l("div", { className: r.completed, style: { width: `${c}%` } }),
+          a === "section" && e !== void 0 && e !== 0 && s < 100 && /* @__PURE__ */ l("div", { className: r.inProgress, style: { width: `${t}%` } })
+        ] }),
+        a === "cell" && /* @__PURE__ */ n(_, { weight: "semibold", size: "xs", children: [
+          s,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+function m({ isVisible: o = !0, label: s, value: e }) {
+  return !o || !s || !e ? null : /* @__PURE__ */ n("div", { className: r.labelContainer, children: [
+    /* @__PURE__ */ n(_, { size: "sm", colorToken: "quaternary", children: [
+      s,
+      ":"
+    ] }),
+    /* @__PURE__ */ l(_, { weight: "semibold", size: "sm", children: e })
+  ] });
+}
+export {
+  z as ProgressBar
+};

package/dist/molecules/ProgressBar/ProgressBar.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ProgressBar } from './ProgressBar';
+declare const meta: {
+    title: string;
+    component: typeof ProgressBar;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CellVariant: Story;
+export declare const SectionVariant: Story;
+export declare const SectionAllLabelsUsed: Story;
+export declare const CellZeroPercentProgress: Story;
+export declare const CellHundredPercentProgress: Story;
+export declare const SectionZeroPercentProgress: Story;
+export declare const SectionHundredPercentProgress: Story;

package/dist/molecules/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,69 @@
+import { ProgressBar as e } from "./ProgressBar.js";
+const r = {
+  title: "Case Parts/Molecules/ProgressBar",
+  component: e,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+}, a = {
+  args: {
+    variant: "cell",
+    kind: "percent",
+    completedValue: 75
+  }
+}, o = {
+  args: {
+    variant: "section",
+    kind: "percent",
+    completedValue: 60,
+    completedLabel: "Completed"
+  }
+}, l = {
+  args: {
+    variant: "section",
+    kind: "raw",
+    completedValue: 50,
+    inProgressValue: 30,
+    totalValue: 120,
+    totalLabel: "Total",
+    completedLabel: "Completed",
+    inProgressLabel: "In progress"
+  }
+}, n = {
+  args: {
+    variant: "cell",
+    kind: "percent",
+    completedValue: 0
+  }
+}, s = {
+  args: {
+    variant: "cell",
+    kind: "percent",
+    completedValue: 100
+  }
+}, c = {
+  args: {
+    variant: "section",
+    kind: "percent",
+    completedValue: 0,
+    completedLabel: "Completed"
+  }
+}, d = {
+  args: {
+    variant: "section",
+    kind: "percent",
+    completedValue: 100,
+    completedLabel: "Completed"
+  }
+};
+export {
+  s as CellHundredPercentProgress,
+  a as CellVariant,
+  n as CellZeroPercentProgress,
+  l as SectionAllLabelsUsed,
+  d as SectionHundredPercentProgress,
+  o as SectionVariant,
+  c as SectionZeroPercentProgress,
+  r as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.212",
+  "version": "0.0.214",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",