ss6-futuristic-component 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file.
 
+## 1.1.0 (2026-10-11)
+
+### Features
+
+- **Header:** new HUD title bar with a glowing title panel, interlocking shortcut tabs split around the title, `left` / `right` slots for your own components, and a CSS-only drop-down page list (yellow arrow) with tiles that light up on hover. `activeUrl` marks the current tab and page; `CustomComponent` accepts e.g. Next.js `Link`. Server component, no client JS.
+- **Footer:** matching bottom bar with a flipped center panel, accent corner lines, yellow slashes and centered `text`.
+- **Theme:** new `--yellow` / `--yellow-hi` tokens (secondary accent) for both light and dark.
+
+## 1.0.1 (2026-10-08)
+
+### Features
+
+- **ProgressBar:** new component with `value`/`max`, `label`, `showValue` and `primary` | `info` | `success` | `warning` | `danger` colors; chamfered glass track with glowing fill.
+- **Badge:** futuristic status chip (chamfered glass, status tint, pulsing glowing dot).
+- **Confirmation:** dialog rebuilt from `Card` and `Button`, bundled status icons, frosted glass backdrop.
+- **ThemeToggle:** checking it switches the page to dark (pure CSS, works in server components); an explicit `data-theme` on an ancestor still wins.
+- **Button:** white text on filled buttons in light mode.
+
+### ⚠ Behavior changes
+
+- **Light is now the default theme** (was dark). Set `data-theme="dark"` on `<html>`, or start a `ThemeToggle` with `defaultChecked`, to keep dark.
+- `Confirmation` markup changed: the old `confirmation__card` / `baloon__*` classes are gone.
+
 ## 1.0.0 (2026-10-08)
 
 First release of `ss6-futuristic-component`, forked from `@safestrong/ppa-component-library` 1.11.1 and redesigned with a futuristic HUD look (glass panels, chamfered corners, glowing accents, navy/cyan palette with light theme via `data-theme`).

package/dist/index.d.mts

@@ -132,11 +132,11 @@ declare function ThemeToggle(attr: Readonly<React.InputHTMLAttributes<HTMLInputE
 
 declare function Dashboard(): React.JSX.Element;
 
-declare function Badge({ text, type, className, }: {
+declare function Badge({ text, type, className, }: Readonly<{
     text: string;
     type: "success" | "danger" | "warning" | "info";
     className?: string;
-}): React.JSX.Element;
+}>): React.JSX.Element;
 
 declare function Skeleton({ className }: {
     className?: string;
@@ -155,6 +155,7 @@ declare namespace Navigation {
     }) => React.JSX.Element;
 }
 
+type ConfirmationType = "info" | "warning" | "danger" | "success";
 declare function Confirmation({ type, text, title, secondaryAction, secondaryLabel, mainAction, mainLabel, }: {
     mainAction: () => void;
     secondaryAction?: () => void;
@@ -162,7 +163,49 @@ declare function Confirmation({ type, text, title, secondaryAction, secondaryLab
     secondaryLabel?: string;
     title: string;
     text: string;
-    type?: "info" | "warning" | "danger" | "success";
+    type?: ConfirmationType;
 }): React.JSX.Element;
 
-export { Badge, Button, Card, Confirmation, Dashboard, Expandable, MultiSelect, NavTabClient, Navigation, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };
+type ProgressBar = {
+    value: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    color?: "primary" | "info" | "success" | "warning" | "danger";
+    className?: string;
+};
+declare function ProgressBar({ value, max, label, showValue, color, className, }: Readonly<ProgressBar>): React.JSX.Element;
+
+type HeaderLink = {
+    label: string;
+    href: string;
+};
+type HeaderPage = HeaderLink & {
+    description?: string;
+    icon?: IconProp;
+};
+type Header = {
+    title: string;
+    /** shortcut tabs; first half sits left of the title, the rest on the right */
+    tabs?: HeaderLink[];
+    /** pages for the drop-down list (the yellow arrow appears only when given) */
+    pages?: HeaderPage[];
+    activeUrl?: string;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    drawerTitle?: string;
+    /** link component, e.g. Next.js Link; defaults to <a> */
+    CustomComponent?: React.ElementType;
+    /** id of the hidden toggle; change it if a page renders more than one Header */
+    menuId?: string;
+    className?: string;
+};
+declare function Header({ title, tabs, pages, activeUrl, left, right, drawerTitle, CustomComponent, menuId, className, }: Readonly<Header>): React.JSX.Element;
+
+type Footer = {
+    text: React.ReactNode;
+    className?: string;
+};
+declare function Footer({ text, className }: Readonly<Footer>): React.JSX.Element;
+
+export { Badge, Button, Card, Confirmation, Dashboard, Expandable, Footer, Header, MultiSelect, NavTabClient, Navigation, ProgressBar, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };

package/dist/index.d.ts

@@ -132,11 +132,11 @@ declare function ThemeToggle(attr: Readonly<React.InputHTMLAttributes<HTMLInputE
 
 declare function Dashboard(): React.JSX.Element;
 
-declare function Badge({ text, type, className, }: {
+declare function Badge({ text, type, className, }: Readonly<{
     text: string;
     type: "success" | "danger" | "warning" | "info";
     className?: string;
-}): React.JSX.Element;
+}>): React.JSX.Element;
 
 declare function Skeleton({ className }: {
     className?: string;
@@ -155,6 +155,7 @@ declare namespace Navigation {
     }) => React.JSX.Element;
 }
 
+type ConfirmationType = "info" | "warning" | "danger" | "success";
 declare function Confirmation({ type, text, title, secondaryAction, secondaryLabel, mainAction, mainLabel, }: {
     mainAction: () => void;
     secondaryAction?: () => void;
@@ -162,7 +163,49 @@ declare function Confirmation({ type, text, title, secondaryAction, secondaryLab
     secondaryLabel?: string;
     title: string;
     text: string;
-    type?: "info" | "warning" | "danger" | "success";
+    type?: ConfirmationType;
 }): React.JSX.Element;
 
-export { Badge, Button, Card, Confirmation, Dashboard, Expandable, MultiSelect, NavTabClient, Navigation, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };
+type ProgressBar = {
+    value: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    color?: "primary" | "info" | "success" | "warning" | "danger";
+    className?: string;
+};
+declare function ProgressBar({ value, max, label, showValue, color, className, }: Readonly<ProgressBar>): React.JSX.Element;
+
+type HeaderLink = {
+    label: string;
+    href: string;
+};
+type HeaderPage = HeaderLink & {
+    description?: string;
+    icon?: IconProp;
+};
+type Header = {
+    title: string;
+    /** shortcut tabs; first half sits left of the title, the rest on the right */
+    tabs?: HeaderLink[];
+    /** pages for the drop-down list (the yellow arrow appears only when given) */
+    pages?: HeaderPage[];
+    activeUrl?: string;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    drawerTitle?: string;
+    /** link component, e.g. Next.js Link; defaults to <a> */
+    CustomComponent?: React.ElementType;
+    /** id of the hidden toggle; change it if a page renders more than one Header */
+    menuId?: string;
+    className?: string;
+};
+declare function Header({ title, tabs, pages, activeUrl, left, right, drawerTitle, CustomComponent, menuId, className, }: Readonly<Header>): React.JSX.Element;
+
+type Footer = {
+    text: React.ReactNode;
+    className?: string;
+};
+declare function Footer({ text, className }: Readonly<Footer>): React.JSX.Element;
+
+export { Badge, Button, Card, Confirmation, Dashboard, Expandable, Footer, Header, MultiSelect, NavTabClient, Navigation, ProgressBar, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };

package/dist/index.js

@@ -65,9 +65,12 @@ __export(index_exports, {
   Confirmation: () => Confirmation,
   Dashboard: () => Dashboard,
   Expandable: () => Expandable,
+  Footer: () => Footer2,
+  Header: () => Header,
   MultiSelect: () => MultiSelect,
   NavTabClient: () => NavTabClient,
   Navigation: () => Navigation,
+  ProgressBar: () => ProgressBar,
   SingleSelect: () => SingleSelect,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
@@ -431,7 +434,7 @@ var icon_success_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/200
 
 // src/components/Toast.tsx
 var import_react_fontawesome6 = require("@fortawesome/react-fontawesome");
-var icons = {
+var statusIcons = {
   info: icon_info_default,
   warning: icon_warning_default,
   success: icon_success_default,
@@ -443,7 +446,7 @@ function Toast({
   type = "info",
   className
 }) {
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: `toast__wrapper ft ft--${type} ${className != null ? className : ""}` }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "ft__corner ft__corner--tl", "aria-hidden": "true" }), /* @__PURE__ */ import_react8.default.createElement("span", { className: "ft__corner ft__corner--tr", "aria-hidden": "true" }), /* @__PURE__ */ import_react8.default.createElement("div", { className: "ft__body" }, /* @__PURE__ */ import_react8.default.createElement("img", { src: icons[type], alt: "", className: "ft__icon" }), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "ft__title" }, title), /* @__PURE__ */ import_react8.default.createElement("p", { className: "ft__desc" }, description))), /* @__PURE__ */ import_react8.default.createElement("p", { className: "ft__bar toast-bar-animate" }));
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: `toast__wrapper ft ft--${type} ${className != null ? className : ""}` }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "ft__corner ft__corner--tl", "aria-hidden": "true" }), /* @__PURE__ */ import_react8.default.createElement("span", { className: "ft__corner ft__corner--tr", "aria-hidden": "true" }), /* @__PURE__ */ import_react8.default.createElement("div", { className: "ft__body" }, /* @__PURE__ */ import_react8.default.createElement("img", { src: statusIcons[type], alt: "", className: "ft__icon" }), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "ft__title" }, title), /* @__PURE__ */ import_react8.default.createElement("p", { className: "ft__desc" }, description))), /* @__PURE__ */ import_react8.default.createElement("p", { className: "ft__bar toast-bar-animate" }));
 }
 var Inline = ({
   className,
@@ -451,7 +454,7 @@ var Inline = ({
   type,
   icon = void 0
 }) => {
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: `ft-inline ft--${type} ${className != null ? className : ""}` }, icon ? /* @__PURE__ */ import_react8.default.createElement(import_react_fontawesome6.FontAwesomeIcon, { icon, className: "ft-inline__fa" }) : /* @__PURE__ */ import_react8.default.createElement("img", { src: icons[type], alt: "", className: "ft-inline__icon" }), /* @__PURE__ */ import_react8.default.createElement("p", null, text));
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: `ft-inline ft--${type} ${className != null ? className : ""}` }, icon ? /* @__PURE__ */ import_react8.default.createElement(import_react_fontawesome6.FontAwesomeIcon, { icon, className: "ft-inline__fa" }) : /* @__PURE__ */ import_react8.default.createElement("img", { src: statusIcons[type], alt: "", className: "ft-inline__icon" }), /* @__PURE__ */ import_react8.default.createElement("p", null, text));
 };
 Toast.Inline = Inline;
 
@@ -593,16 +596,7 @@ function Badge({
   type,
   className
 }) {
-  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "badge__wrapper" }, /* @__PURE__ */ import_react13.default.createElement(
-    "span",
-    {
-      style: {
-        background: `var(--ss6f-color-${type})`
-      },
-      className: `badge ${className}`
-    },
-    text
-  ));
+  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "badge__wrapper" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: `fb ft--${type} ${className != null ? className : ""}` }, text));
 }
 
 // src/components/Skeleton.tsx
@@ -637,6 +631,12 @@ Navigation.URL = URLNavigation;
 
 // src/components/Confirmation.tsx
 var import_react16 = __toESM(require("react"));
+var buttonColor = {
+  info: "info",
+  warning: "warn",
+  danger: "danger",
+  success: "success"
+};
 function Confirmation({
   type = "warning",
   text,
@@ -646,30 +646,207 @@ function Confirmation({
   mainAction,
   mainLabel = "Ya"
 }) {
-  return /* @__PURE__ */ import_react16.default.createElement("div", { className: "confirmation__outer" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "confirmation__card" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: wrapper }, /* @__PURE__ */ import_react16.default.createElement("div", { className: `baloon__${type} baloon` }), /* @__PURE__ */ import_react16.default.createElement("div", null, /* @__PURE__ */ import_react16.default.createElement("h3", { className: "font-semibold" }, title), /* @__PURE__ */ import_react16.default.createElement("p", { className: confirmation__text }, text))), /* @__PURE__ */ import_react16.default.createElement("div", { className: "confirmation__footer" }, secondaryAction && /* @__PURE__ */ import_react16.default.createElement(
-    "button",
+  return /* @__PURE__ */ import_react16.default.createElement("div", { className: "confirmation__outer" }, /* @__PURE__ */ import_react16.default.createElement(
+    Card,
     {
-      onClick: secondaryAction,
-      type: "button",
-      className: "cursor-pointer",
-      style: { color: `var(--ss6f-color-${type})` }
+      title,
+      cardClass: "fc",
+      footer: /* @__PURE__ */ import_react16.default.createElement("div", { className: "fc__actions" }, secondaryAction && /* @__PURE__ */ import_react16.default.createElement(
+        Button,
+        {
+          type: "button",
+          btnType: "outline",
+          color: buttonColor[type],
+          label: secondaryLabel,
+          onClick: secondaryAction
+        }
+      ), /* @__PURE__ */ import_react16.default.createElement(
+        Button,
+        {
+          type: "button",
+          btnType: "primary",
+          color: buttonColor[type],
+          label: mainLabel,
+          onClick: mainAction
+        }
+      ))
     },
-    secondaryLabel
-  ), /* @__PURE__ */ import_react16.default.createElement(
-    "button",
+    /* @__PURE__ */ import_react16.default.createElement("div", { className: "fc__content" }, /* @__PURE__ */ import_react16.default.createElement("img", { src: statusIcons[type], alt: "", className: "fc__icon" }), /* @__PURE__ */ import_react16.default.createElement("p", null, text))
+  ));
+}
+
+// src/components/ProgressBar.tsx
+var import_react17 = __toESM(require("react"));
+function ProgressBar({
+  value,
+  max = 100,
+  label,
+  showValue = true,
+  color = "primary",
+  className = ""
+}) {
+  const percent = Math.min(100, Math.max(0, Math.round(value / max * 100)));
+  const colorClass = color === "primary" ? "" : `ft--${color}`;
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: `fp ${colorClass} ${className}` }, (label || showValue) && /* @__PURE__ */ import_react17.default.createElement("div", { className: "fp__head" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "fp__label" }, label), showValue && /* @__PURE__ */ import_react17.default.createElement("span", { className: "fp__value" }, percent, "%")), /* @__PURE__ */ import_react17.default.createElement(
+    "div",
     {
-      onClick: mainAction,
-      className: "cursor-pointer btn__primary min-w-[8rem]",
-      style: {
-        background: `var(--ss6f-color-${type})`,
-        border: `1px solid var(--ss6f-color-${type})`
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: "fp__track",
+      "aria-valuenow": percent
+    },
+    /* @__PURE__ */ import_react17.default.createElement("div", { className: "fp__fill", style: { width: `${percent}%` } })
+  ));
+}
+
+// src/components/Header.tsx
+var import_react18 = __toESM(require("react"));
+var import_react_fontawesome10 = require("@fortawesome/react-fontawesome");
+function Header({
+  title,
+  tabs = [],
+  pages = [],
+  activeUrl,
+  left: left2,
+  right: right2,
+  drawerTitle = "All Pages",
+  CustomComponent,
+  menuId = "ph-menu",
+  className = ""
+}) {
+  const Link = CustomComponent || "a";
+  const current = (href) => href === activeUrl ? "page" : void 0;
+  const half = Math.ceil(tabs.length / 2);
+  const renderTabs = (list2, side) => /* @__PURE__ */ import_react18.default.createElement("nav", { className: `ph__tabs ph__tabs--${side}`, "aria-label": "Shortcuts" }, list2.map(({ label, href }) => /* @__PURE__ */ import_react18.default.createElement(
+    Link,
+    {
+      key: href,
+      href,
+      "aria-current": current(href),
+      className: `ph-tab ${side === "r" ? "ph-tab--r" : ""}`
+    },
+    label
+  )));
+  return /* @__PURE__ */ import_react18.default.createElement("header", { className: `ph ${className}` }, /* @__PURE__ */ import_react18.default.createElement(
+    "svg",
+    {
+      className: "ph__deco",
+      width: "840",
+      height: "64",
+      viewBox: "300 0 840 64",
+      fill: "none",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ import_react18.default.createElement("defs", null, /* @__PURE__ */ import_react18.default.createElement("linearGradient", { id: "ph-title", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "0", className: "ph__stop-panel-top" }), /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "1", className: "ph__stop-panel-bottom" })), /* @__PURE__ */ import_react18.default.createElement("linearGradient", { id: "ph-inner", x1: "0", y1: "1", x2: "0", y2: "0" }, /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "0", className: "ph__stop-accent", stopOpacity: ".32" }), /* @__PURE__ */ import_react18.default.createElement("stop", { offset: ".6", className: "ph__stop-accent", stopOpacity: "0" })), /* @__PURE__ */ import_react18.default.createElement("linearGradient", { id: "ph-fadeL", x1: "0", y1: "0", x2: "1", y2: "0" }, /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" })), /* @__PURE__ */ import_react18.default.createElement("linearGradient", { id: "ph-fadeR", x1: "1", y1: "0", x2: "0", y2: "0" }, /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" }))),
+    /* @__PURE__ */ import_react18.default.createElement("path", { d: "M540 0H900L866 56H574Z", fill: "url(#ph-title)" }),
+    /* @__PURE__ */ import_react18.default.createElement("path", { d: "M540 0H900L866 56H574Z", fill: "url(#ph-inner)" }),
+    /* @__PURE__ */ import_react18.default.createElement(
+      "path",
+      {
+        className: "ph__deco-corners",
+        d: "M562 35L574.5 55H612 M878 35L865.5 55H828",
+        strokeWidth: "2.5",
+        strokeLinejoin: "round",
+        strokeLinecap: "round"
       }
+    ),
+    /* @__PURE__ */ import_react18.default.createElement(
+      "path",
+      {
+        d: "M312 40l8-14 M322 40l8-14 M332 40l8-14 M342 40l8-14 M352 40l8-14",
+        stroke: "url(#ph-fadeL)",
+        strokeWidth: "3"
+      }
+    ),
+    /* @__PURE__ */ import_react18.default.createElement(
+      "path",
+      {
+        d: "M1128 40l-8-14 M1118 40l-8-14 M1108 40l-8-14 M1098 40l-8-14 M1088 40l-8-14",
+        stroke: "url(#ph-fadeR)",
+        strokeWidth: "3"
+      }
+    )
+  ), /* @__PURE__ */ import_react18.default.createElement("h1", { className: "ph__title" }, title), tabs.length > 0 && renderTabs(tabs.slice(0, half), "l"), tabs.length > 1 && renderTabs(tabs.slice(half), "r"), left2 && /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__slot ph__slot--left" }, left2), right2 && /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__slot ph__slot--right" }, right2), pages.length > 0 && /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(
+    "input",
+    {
+      id: menuId,
+      type: "checkbox",
+      className: "ph__toggle",
+      "aria-label": "Show all pages"
+    }
+  ), /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph__arrow-glow" }, /* @__PURE__ */ import_react18.default.createElement(
+    "label",
+    {
+      htmlFor: menuId,
+      className: "ph__arrow",
+      "aria-hidden": "true"
+    }
+  )), /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__drawer" }, /* @__PURE__ */ import_react18.default.createElement(
+    "label",
+    {
+      htmlFor: menuId,
+      className: "ph__backdrop",
+      "aria-hidden": "true"
+    }
+  ), /* @__PURE__ */ import_react18.default.createElement("section", { className: "ph__panel", "aria-label": drawerTitle }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__panel-head" }, /* @__PURE__ */ import_react18.default.createElement("div", null, /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph__kicker" }, "// NAVIGATE"), /* @__PURE__ */ import_react18.default.createElement("h2", { className: "ph__panel-title" }, drawerTitle)), /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph__count" }, String(pages.length).padStart(2, "0"), " PAGES")), /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__grid" }, pages.map(({ label, href, description, icon }) => /* @__PURE__ */ import_react18.default.createElement(
+    Link,
+    {
+      key: href,
+      href,
+      "aria-current": current(href),
+      className: "ph-page"
     },
-    mainLabel
-  ))));
+    icon && /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__icon" }, /* @__PURE__ */ import_react18.default.createElement(import_react_fontawesome10.FontAwesomeIcon, { icon })),
+    /* @__PURE__ */ import_react18.default.createElement("span", null, /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__name" }, label), description && /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__desc" }, description))
+  )))))));
+}
+
+// src/components/Footer.tsx
+var import_react19 = __toESM(require("react"));
+function Footer2({ text, className = "" }) {
+  return /* @__PURE__ */ import_react19.default.createElement("footer", { className: `pf ${className}` }, /* @__PURE__ */ import_react19.default.createElement(
+    "svg",
+    {
+      className: "pf__deco",
+      width: "480",
+      height: "40",
+      viewBox: "480 0 480 40",
+      fill: "none",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ import_react19.default.createElement("defs", null, /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "pf-panel", x1: "0", y1: "1", x2: "0", y2: "0" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-panel-top" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "1", className: "ph__stop-panel-bottom" })), /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "pf-inner", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-accent", stopOpacity: ".28" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: ".6", className: "ph__stop-accent", stopOpacity: "0" })), /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "pf-fadeL", x1: "0", y1: "0", x2: "1", y2: "0" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" })), /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "pf-fadeR", x1: "1", y1: "0", x2: "0", y2: "0" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" }))),
+    /* @__PURE__ */ import_react19.default.createElement("path", { d: "M560 40H880L860 8H580Z", fill: "url(#pf-panel)" }),
+    /* @__PURE__ */ import_react19.default.createElement("path", { d: "M560 40H880L860 8H580Z", fill: "url(#pf-inner)" }),
+    /* @__PURE__ */ import_react19.default.createElement(
+      "path",
+      {
+        className: "ph__deco-corners",
+        d: "M572 21L580.5 8.5H612 M868 21L859.5 8.5H828",
+        strokeWidth: "2.5",
+        strokeLinejoin: "round",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ import_react19.default.createElement(
+      "path",
+      {
+        d: "M492 13l8 14 M502 13l8 14 M512 13l8 14 M522 13l8 14 M532 13l8 14",
+        stroke: "url(#pf-fadeL)",
+        strokeWidth: "3"
+      }
+    ),
+    /* @__PURE__ */ import_react19.default.createElement(
+      "path",
+      {
+        d: "M948 13l-8 14 M938 13l-8 14 M928 13l-8 14 M918 13l-8 14 M908 13l-8 14",
+        stroke: "url(#pf-fadeR)",
+        strokeWidth: "3"
+      }
+    )
+  ), /* @__PURE__ */ import_react19.default.createElement("p", { className: "pf__text" }, text));
 }
-var wrapper = "pt-[0.5rem] pb-[1rem] px-[1.8rem] grid items-center gap-[1.5rem]";
-var confirmation__text = "mt-[0.7rem] w-[90%] text-[var(--ss6f-color-text-secondary)]";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -678,9 +855,12 @@ var confirmation__text = "mt-[0.7rem] w-[90%] text-[var(--ss6f-color-text-second
   Confirmation,
   Dashboard,
   Expandable,
+  Footer,
+  Header,
   MultiSelect,
   NavTabClient,
   Navigation,
+  ProgressBar,
   SingleSelect,
   Skeleton,
   Slider,