@pantheon-systems/pds-toolkit-react 2.0.0-alpha.13 → 2.0.0-alpha.14

package/dist/index.d.ts

@@ -29,6 +29,8 @@ export * from './components/inputs/Select/Select';
 export * from './components/inputs/Textarea/Textarea';
 export * from './components/inputs/TextInput/TextInput';
 export * from './components/loading-indicators/Spinner/Spinner';
+export * from './components/media/Picture/Picture';
+export * from './components/media/VideoEmbed/VideoEmbed';
 export * from './components/Modal/Modal';
 export * from './components/navigation/Breadcrumb/Breadcrumb';
 export * from './components/navigation/ButtonNav/ButtonNav';
@@ -49,7 +51,6 @@ export * from './components/panels/ExpansionPanelGroup/ExpansionPanelGroup';
 export * from './components/panels/Panel/Panel';
 export * from './components/panels/PanelList/PanelRow';
 export * from './components/PantheonLogo/PantheonLogo';
-export * from './components/Picture/Picture';
 export * from './components/Popover/Popover';
 export * from './components/progress-indicators/ProgressBar/ProgressBar';
 export * from './components/progress-indicators/ProgressRing/ProgressRing';
@@ -58,15 +59,14 @@ export * from './components/StatusIndicator/StatusIndicator';
 export * from './components/Table/Table';
 export * from './components/ThemeSwitcher/ThemeSwitcher';
 export * from './components/Tooltip/Tooltip';
-export * from './components/VideoEmbed/VideoEmbed';
 export * from './libs/components/SiteOptionDisplay/SiteOptionDisplay';
 export * from './layouts/AppLayout/AppLayout';
-export * from './layouts/Container/Container';
 export * from './layouts/DocsLayout/DocsLayout';
-export * from './layouts/FlexContainer/FlexContainer';
 export * from './layouts/GlobalWrapper/GlobalWrapper';
 export * from './layouts/ThreeItemLayout/ThreeItemLayout';
 export * from './layouts/TwoItemLayout/TwoItemLayout';
+export * from './utilities/Container/Container';
+export * from './utilities/FlexContainer/FlexContainer';
 export * from './libs/types/custom-types';
 export * from './libs/types/input-types';
 export * from './libs/types/layout-types';

package/dist/index.js

@@ -6155,6 +6155,71 @@ const F4 = T1(
     );
   }
 ), kt = ({
+  alt: t = "",
+  className: a,
+  height: s,
+  srcFallback: n,
+  srcWebp: c,
+  width: l,
+  ...r
+}) => {
+  const o = "pds-picture";
+  return /* @__PURE__ */ e.createElement("picture", { className: z([o, a ?? ""]) }, /* @__PURE__ */ e.createElement("source", { srcSet: c, type: "image/webp" }), /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      alt: t,
+      className: `${o}__img`,
+      height: s,
+      src: n,
+      width: l,
+      ...r
+    }
+  ));
+}, xt = ({
+  className: t,
+  platform: a,
+  videoId: s,
+  videoTitle: n,
+  ...c
+}) => {
+  const l = "pds-video-embed", r = /* @__PURE__ */ e.createElement(
+    "iframe",
+    {
+      allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
+      src: `https://fast.wistia.net/embed/iframe/${s}`,
+      title: `Wistia video player${n ? `: ${n}` : ""}`
+    }
+  ), o = /* @__PURE__ */ e.createElement(
+    "iframe",
+    {
+      allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
+      src: `https://player.vimeo.com/video/${s}`,
+      title: `Vimeo video player${n ? `: ${n}` : ""}`
+    }
+  ), i = /* @__PURE__ */ e.createElement(
+    "iframe",
+    {
+      allowFullScreen: !0,
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+      referrerPolicy: "strict-origin-when-cross-origin",
+      src: `https://www.youtube.com/embed/${s}`,
+      title: `YouTube video player${n ? `: ${n}` : ""}`
+    }
+  );
+  let d;
+  switch (a) {
+    case "vimeo":
+      d = o;
+      break;
+    case "wistia":
+      d = r;
+      break;
+    default:
+      d = i;
+      break;
+  }
+  return /* @__PURE__ */ e.createElement("div", { className: z([l, t ?? ""]), ...c }, d);
+}, Dt = ({
   ariaLabel: t,
   children: a,
   className: s,
@@ -6246,7 +6311,7 @@ const F4 = T1(
       u && /* @__PURE__ */ e.createElement("div", { className: `${v}__footer` }, u)
     ))
   ));
-}, xt = ({
+}, Pt = ({
   ariaLabel: t = "Breadcrumb",
   className: a,
   crumbs: s,
@@ -6336,7 +6401,7 @@ const F4 = T1(
       ]
     })
   ) : c = a), c;
-}, Dt = ({
+}, St = ({
   ariaLabel: t,
   className: a,
   menuItems: s,
@@ -6983,7 +7048,7 @@ const F4 = T1(
       }
     ) : d)
   );
-}, Pt = ({
+}, It = ({
   ariaLabel: t,
   className: a,
   hasLogo: s,
@@ -7103,7 +7168,7 @@ const F4 = T1(
       !g.isSeparator && g.linkContent
     ))
   )) : null;
-}, St = ({
+}, Ht = ({
   ariaLabel: t = "Main Navigation",
   className: a,
   colorType: s = "default",
@@ -7211,7 +7276,7 @@ const F4 = T1(
     },
     /* @__PURE__ */ e.createElement("ul", { className: `${h}__menu` }, E)
   );
-}, It = ({
+}, Vt = ({
   ariaLabel: t = "User menu",
   className: a,
   menuItems: s,
@@ -7367,7 +7432,7 @@ const F4 = T1(
   standard: { label: "Standard", color: "gaia" },
   premium: { label: "Premium", color: "gaia" },
   priority: { label: "Priority", color: "gaia" }
-}, Ht = ({
+}, Ft = ({
   ariaLabel: t = "Workspace selector menu",
   className: a,
   createWorkspaceLink: s,
@@ -7584,7 +7649,7 @@ const F4 = T1(
   warning: "triangleExclamation",
   critical: "diamondExclamation",
   discovery: "bullhorn"
-}, y2 = 200, U4 = 50, Vt = ({
+}, y2 = 200, U4 = 50, Tt = ({
   banners: t,
   className: a,
   dataContext: s = "product",
@@ -7705,7 +7770,7 @@ const F4 = T1(
   warning: "triangleExclamation",
   success: "circleCheck",
   critical: "diamondExclamation"
-}, Ft = ({
+}, Ot = ({
   className: t,
   message: a,
   title: s,
@@ -7746,7 +7811,7 @@ const F4 = T1(
   success: "circleCheck",
   critical: "diamondExclamation",
   discovery: "squareQuestion"
-}, Tt = ({
+}, Rt = ({
   className: t,
   ctaButton: a,
   dataContext: s = "product",
@@ -7837,7 +7902,7 @@ const F4 = T1(
     size: "l",
     tabIndex: 0
   }
-), Ot = ({
+), At = ({
   className: t,
   labelStrings: a = De,
   limit: s = 5,
@@ -7919,7 +7984,7 @@ const F4 = T1(
   );
 };
 var tt = /* @__PURE__ */ ((t) => (t.Critical = "critical", t.Info = "info", t.Success = "success", t.Warning = "warning", t.Working = "working", t))(tt || {});
-const Rt = () => {
+const Bt = () => {
   const t = (s, n, c = {}) => {
     const l = c.toastId ?? A1(), r = typeof c.autoClose == "number" ? Math.max(Y4, c.autoClose) : !1, o = /* @__PURE__ */ e.createElement(
       et,
@@ -7950,7 +8015,7 @@ const Rt = () => {
     exit: "pds-toast--slideOut"
   });
   return [t, k2, a];
-}, At = ({
+}, jt = ({
   children: t,
   className: a,
   id: s,
@@ -7983,7 +8048,7 @@ const Rt = () => {
       }
     )), /* @__PURE__ */ e.createElement("div", { className: `${b}__content` }, t))
   );
-}, Bt = ({
+}, Zt = ({
   children: t,
   className: a,
   displayType: s = "standard",
@@ -7998,7 +8063,7 @@ const Rt = () => {
     },
     t
   );
-}, jt = ({
+}, Wt = ({
   children: t,
   className: a,
   padding: s = "standard",
@@ -8014,7 +8079,7 @@ const Rt = () => {
     },
     /* @__PURE__ */ e.createElement("div", { className: z([o, i]) }, t)
   );
-}, Zt = ({
+}, qt = ({
   children: t,
   className: a,
   expandButtonAriaLabel: s,
@@ -8079,28 +8144,7 @@ const Rt = () => {
       /* @__PURE__ */ e.createElement("div", { className: `${l}__items-inside` }, f)
     )
   );
-}, Wt = ({
-  alt: t = "",
-  className: a,
-  height: s,
-  srcFallback: n,
-  srcWebp: c,
-  width: l,
-  ...r
-}) => {
-  const o = "pds-picture";
-  return /* @__PURE__ */ e.createElement("picture", { className: z([o, a ?? ""]) }, /* @__PURE__ */ e.createElement("source", { srcSet: c, type: "image/webp" }), /* @__PURE__ */ e.createElement(
-    "img",
-    {
-      alt: t,
-      className: `${o}__img`,
-      height: s,
-      src: n,
-      width: l,
-      ...r
-    }
-  ));
-}, F1 = 8, K2 = 14, st = 6, qt = ({
+}, F1 = 8, K2 = 14, st = 6, Gt = ({
   className: t,
   classNameContainer: a,
   closeButtonLabel: s = "Close",
@@ -8227,7 +8271,7 @@ const Rt = () => {
   success: "--pds-color-status-success-foreground",
   warning: "--pds-color-status-warning-foreground",
   critical: "--pds-color-status-critical-foreground"
-}, Gt = ({
+}, Kt = ({
   className: t,
   colorBreakpoints: a = [
     { colorType: "info", percentage: 0 },
@@ -8292,7 +8336,7 @@ const Rt = () => {
     )),
     w && p
   );
-}, Kt = ({
+}, Ut = ({
   className: t,
   id: a,
   innerLabel: s,
@@ -8377,7 +8421,7 @@ const Rt = () => {
       )
     )
   );
-}, Ut = ({
+}, Yt = ({
   className: t,
   destination: a = "main",
   text: s = "Skip to main content",
@@ -8390,7 +8434,7 @@ const Rt = () => {
     ...n
   },
   s
-), Yt = ({
+), Xt = ({
   className: t,
   label: a = null,
   size: s = "s",
@@ -8419,7 +8463,7 @@ const Rt = () => {
     ) : /* @__PURE__ */ e.createElement("span", { "aria-hidden": "true", className: `${l}__icon`, role: "img" }),
     a && /* @__PURE__ */ e.createElement("span", { className: "pds-status-indicator__label" }, a)
   );
-}, Xt = ({
+}, Qt = ({
   className: t,
   defaultSortKey: a,
   defaultSortOrder: s = "asc",
@@ -8492,7 +8536,7 @@ const Rt = () => {
   light: "sunBright",
   dark: "moon",
   system: "desktop"
-}, Qt = ({
+}, Jt = ({
   className: t,
   id: a = "theme-switcher-menu",
   labelStrings: s = { light: "Light", dark: "Dark", system: "System" },
@@ -8526,50 +8570,6 @@ const Rt = () => {
       preferredPlacement: "top"
     }
   ));
-}, Jt = ({
-  className: t,
-  platform: a,
-  videoId: s,
-  videoTitle: n,
-  ...c
-}) => {
-  const l = "pds-video-embed", r = /* @__PURE__ */ e.createElement(
-    "iframe",
-    {
-      allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
-      src: `https://fast.wistia.net/embed/iframe/${s}`,
-      title: `Wistia video player${n ? `: ${n}` : ""}`
-    }
-  ), o = /* @__PURE__ */ e.createElement(
-    "iframe",
-    {
-      allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
-      src: `https://player.vimeo.com/video/${s}`,
-      title: `Vimeo video player${n ? `: ${n}` : ""}`
-    }
-  ), i = /* @__PURE__ */ e.createElement(
-    "iframe",
-    {
-      allowFullScreen: !0,
-      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
-      referrerPolicy: "strict-origin-when-cross-origin",
-      src: `https://www.youtube.com/embed/${s}`,
-      title: `YouTube video player${n ? `: ${n}` : ""}`
-    }
-  );
-  let d;
-  switch (a) {
-    case "vimeo":
-      d = o;
-      break;
-    case "wistia":
-      d = r;
-      break;
-    default:
-      d = i;
-      break;
-  }
-  return /* @__PURE__ */ e.createElement("div", { className: z([l, t ?? ""]), ...c }, d);
 }, e0 = ({
   className: t,
   option: a,
@@ -8712,21 +8712,6 @@ const Rt = () => {
     g ? I : H
   );
 }, s0 = ({
-  children: t,
-  className: a,
-  width: s = "standard",
-  ...n
-}) => {
-  const c = "pds-container", l = s !== "standard" ? `${c}--${s}` : null;
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: z([c, l, a ?? ""]),
-      ...n
-    },
-    t
-  );
-}, a0 = ({
   children: t,
   className: a,
   sidebarMinWidth: s = 14.5,
@@ -8753,60 +8738,10 @@ const Rt = () => {
     },
     l ? f : u
   );
-}, l0 = ({
-  alignContent: t = "flex-start",
-  alignItems: a = "stretch",
-  children: s,
-  className: n,
-  flexDirection: c = "row",
-  flexWrap: l = "nowrap",
-  gap: r = "standard",
-  justifyContent: o = "flex-start",
-  mobileAlignContent: i,
-  mobileAlignItems: d,
-  mobileFlexDirection: m = "column",
-  mobileFlexWrap: b,
-  mobileGap: _,
-  mobileJustifyContent: f,
-  ...u
-}) => {
-  let g = ve() <= 640;
-  const p = D1(V1);
-  p && (g = p.isMobile);
-  const h = "pds-flex", w = `${h}-container`, C = g ? `${w}--mobile` : null;
-  let x = null;
-  g ? x = `${h}-direction--${m}` : c !== "row" && (x = `${h}-direction--${c}`);
-  let k = null;
-  g ? b ? b !== "nowrap" && (k = `${h}-wrap--${b}`) : l !== "nowrap" && (k = `${h}-wrap--${l}`) : l !== "nowrap" && (k = `${h}-wrap--${l}`);
-  let M = null;
-  g ? f ? f !== "flex-start" && (M = `${h}-justify--${f}`) : o !== "flex-start" && (M = `${h}-justify--${o}`) : o !== "flex-start" && (M = `${h}-justify--${o}`);
-  let E = null;
-  g ? d ? d !== "stretch" && (E = `${h}-align-items--${d}`) : a !== "stretch" && (E = `${h}-align-items--${a}`) : a !== "stretch" && (E = `${h}-align-items--${a}`);
-  let L = null;
-  g ? i ? i !== "flex-start" && (L = `${h}-align-content--${i}`) : t !== "flex-start" && (L = `${h}-align-content--${t}`) : t !== "flex-start" && (L = `${h}-align-content--${t}`);
-  let $ = null;
-  return g ? _ ? _ !== "none" && ($ = `${h}-gap--${_}`) : r !== "none" && ($ = `${h}-gap--${r}`) : r !== "none" && ($ = `${h}-gap--${r}`), /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: z([
-        w,
-        C,
-        x,
-        k,
-        M,
-        E,
-        L,
-        $,
-        n ?? ""
-      ]),
-      ...u
-    },
-    s
-  );
-}, c0 = ({
+}, a0 = ({
   children: t,
   mobileMenuMaxWidth: a = 640
-}) => /* @__PURE__ */ e.createElement(L4, { mobileMenuMaxWidth: a }, /* @__PURE__ */ e.createElement(h4, null, t)), n0 = ({
+}) => /* @__PURE__ */ e.createElement(L4, { mobileMenuMaxWidth: a }, /* @__PURE__ */ e.createElement(h4, null, t)), l0 = ({
   children: t,
   className: a,
   gridGap: s = "standard",
@@ -8838,7 +8773,7 @@ const Rt = () => {
       m
     ))
   );
-}, r0 = ({
+}, c0 = ({
   children: t,
   className: a,
   gridGap: s = "standard",
@@ -8873,6 +8808,71 @@ const Rt = () => {
     /* @__PURE__ */ e.createElement("div", { className: f.join(" ").trim() }, g),
     /* @__PURE__ */ e.createElement("div", { className: u.join(" ").trim() }, p)
   );
+}, n0 = ({
+  children: t,
+  className: a,
+  width: s = "standard",
+  ...n
+}) => {
+  const c = "pds-container", l = s !== "standard" ? `${c}--${s}` : null;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: z([c, l, a ?? ""]),
+      ...n
+    },
+    t
+  );
+}, r0 = ({
+  alignContent: t = "flex-start",
+  alignItems: a = "stretch",
+  children: s,
+  className: n,
+  flexDirection: c = "row",
+  flexWrap: l = "nowrap",
+  gap: r = "standard",
+  justifyContent: o = "flex-start",
+  mobileAlignContent: i,
+  mobileAlignItems: d,
+  mobileFlexDirection: m = "column",
+  mobileFlexWrap: b,
+  mobileGap: _,
+  mobileJustifyContent: f,
+  ...u
+}) => {
+  let g = ve() <= 640;
+  const p = D1(V1);
+  p && (g = p.isMobile);
+  const h = "pds-flex", w = `${h}-container`, C = g ? `${w}--mobile` : null;
+  let x = null;
+  g ? x = `${h}-direction--${m}` : c !== "row" && (x = `${h}-direction--${c}`);
+  let k = null;
+  g ? b ? b !== "nowrap" && (k = `${h}-wrap--${b}`) : l !== "nowrap" && (k = `${h}-wrap--${l}`) : l !== "nowrap" && (k = `${h}-wrap--${l}`);
+  let M = null;
+  g ? f ? f !== "flex-start" && (M = `${h}-justify--${f}`) : o !== "flex-start" && (M = `${h}-justify--${o}`) : o !== "flex-start" && (M = `${h}-justify--${o}`);
+  let E = null;
+  g ? d ? d !== "stretch" && (E = `${h}-align-items--${d}`) : a !== "stretch" && (E = `${h}-align-items--${a}`) : a !== "stretch" && (E = `${h}-align-items--${a}`);
+  let L = null;
+  g ? i ? i !== "flex-start" && (L = `${h}-align-content--${i}`) : t !== "flex-start" && (L = `${h}-align-content--${t}`) : t !== "flex-start" && (L = `${h}-align-content--${t}`);
+  let $ = null;
+  return g ? _ ? _ !== "none" && ($ = `${h}-gap--${_}`) : r !== "none" && ($ = `${h}-gap--${r}`) : r !== "none" && ($ = `${h}-gap--${r}`), /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: z([
+        w,
+        C,
+        x,
+        k,
+        M,
+        E,
+        L,
+        $,
+        n ?? ""
+      ]),
+      ...u
+    },
+    s
+  );
 }, o0 = () => {
   const t = typeof window < "u", a = (c) => c >= r4 ? "xl" : c >= n4 ? "lg" : c >= c4 ? "md" : "sm", [s, n] = j(
     t ? a(window.innerWidth) : "lg"
@@ -8900,12 +8900,12 @@ export {
   t0 as AppLayout,
   x2 as Avatar,
   s4 as Badge,
-  Vt as Banner,
+  Tt as Banner,
   _t as BarChart,
-  xt as Breadcrumb,
+  Pt as Breadcrumb,
   C2 as Button,
   w4 as ButtonLink,
-  Dt as ButtonNav,
+  St as ButtonNav,
   Ct as Card,
   F4 as Checkbox,
   zt as CheckboxFieldset,
@@ -8914,66 +8914,66 @@ export {
   r2 as CloseButton,
   Mt as Combobox,
   yt as ComboboxMultiselect,
-  s0 as Container,
-  a0 as DocsLayout,
+  n0 as Container,
+  s0 as DocsLayout,
   Et as Drawer,
   Q1 as Dropdown,
   B4 as DropdownMenu,
-  At as ExpansionPanel,
-  Bt as ExpansionPanelGroup,
-  l0 as FlexContainer,
-  c0 as GlobalWrapper,
+  jt as ExpansionPanel,
+  Zt as ExpansionPanelGroup,
+  r0 as FlexContainer,
+  a0 as GlobalWrapper,
   R as Icon,
   u2 as IconButton,
-  Ft as InlineMessage,
+  Ot as InlineMessage,
   wt as LineChart,
   Y4 as MIN_AUTO_CLOSE_DURATION,
   be as MenuButton,
-  kt as Modal,
-  jt as Panel,
-  Zt as PanelRow,
+  Dt as Modal,
+  Wt as Panel,
+  qt as PanelRow,
   W4 as PantheonLogo,
-  Wt as Picture,
-  qt as Popover,
-  Gt as ProgressBar,
-  Kt as ProgressRing,
+  kt as Picture,
+  Gt as Popover,
+  Kt as ProgressBar,
+  Ut as ProgressRing,
   $t as RadioGroup,
   V1 as ResponsiveContext,
   L4 as ResponsiveContextProvider,
   vt as SSOButton,
-  Tt as SectionMessage,
+  Rt as SectionMessage,
   ft as SegmentedButton,
   we as Select,
   N4 as SelectOptionGroup,
-  Pt as SideNavGlobal,
+  It as SideNavGlobal,
   q4 as SideNavGlobalItem,
-  St as SiteMenu,
+  Ht as SiteMenu,
   e0 as SiteOptionDisplay,
   ht as SitePlanLevelLabel,
   z4 as SiteTypeIcon,
   gt as SiteTypeLabel,
-  Ut as Skiplink,
+  Yt as Skiplink,
   j1 as Spinner,
   y4 as SplitButton,
   a4 as StatusBadge,
-  Yt as StatusIndicator,
+  Xt as StatusIndicator,
   H2 as StatusTypeLabels,
-  Xt as Table,
+  Qt as Table,
   re as Tally,
   R4 as TextInput,
   Nt as Textarea,
-  Qt as ThemeSwitcher,
-  n0 as ThreeItemLayout,
+  Jt as ThemeSwitcher,
+  l0 as ThreeItemLayout,
   et as Toast,
   tt as ToastType,
-  Ot as Toaster,
+  At as Toaster,
   Pe as ToasterContext,
   U1 as Tooltip,
-  r0 as TwoItemLayout,
-  It as UserMenu,
+  c0 as TwoItemLayout,
+  Vt as UserMenu,
   bt as UtilityButton,
-  Jt as VideoEmbed,
-  Ht as WorkspaceSelector,
+  xt as VideoEmbed,
+  Ft as WorkspaceSelector,
   ut as iconList,
   a2 as isHeadingItemType,
   l2 as isLinkItemType,
@@ -8984,7 +8984,7 @@ export {
   X1 as useDropdown,
   g4 as useKeyPress,
   i0 as useMediaQuery,
-  Rt as useToast,
+  Bt as useToast,
   ve as useWindowWidth
 };
 //# sourceMappingURL=index.js.map