@pantheon-systems/pds-toolkit-react 1.0.0-dev.255 → 1.0.0-dev.256

package/_dist/components/icons/Icon/Icon.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Display } from '@libs/types/custom-types';
 /**
  * PDS Icon type.
  */
@@ -7,6 +8,10 @@ export type PDSIcon = keyof typeof svgData;
  * Icon component prop types
  */
 export interface IconProps {
+    /**
+     * Display value
+     */
+    display?: Display;
     /**
      * Which icon to render
      */
@@ -15,6 +20,11 @@ export interface IconProps {
      * Which size of icon to render
      */
     iconSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    /**
+     * Vertical align value
+     */
+    verticalAlign?: string;
+    /**
     /**
      * Additional class names
      */
@@ -23,7 +33,7 @@ export interface IconProps {
 /**
  * A component used to display an icon
  */
-export declare const Icon: ({ iconName, iconSize, className, ...props }: IconProps) => React.JSX.Element;
+export declare const Icon: ({ display, iconName, iconSize, verticalAlign, className, ...props }: IconProps) => React.JSX.Element;
 declare const svgData: {
     readonly angleDown: {
         readonly path: "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z";

package/_dist/index.js

@@ -61,17 +61,21 @@ const c2 = () => Math.random().toString(32).substring(2, 13), xt = (t, n) => {
       a && (n[a] ? n[a].push(s) : n[a] = [s]);
     }
   }), n;
-}, z = (t) => t.join(" ").trim().replace(/\s+/g, " "), g1 = (t) => t ? t.startsWith("data:") ? /^data:image\/(png|jpeg|jpg|gif|bmp|webp);base64,[A-Za-z0-9+/]+=*$/.test(t) : !0 : !1, j = (r) => {
-  var d = r, {
-    iconName: t,
-    iconSize: n = "md",
-    className: s
-  } = d, a = F(d, [
+}, z = (t) => t.join(" ").trim().replace(/\s+/g, " "), g1 = (t) => t ? t.startsWith("data:") ? /^data:image\/(png|jpeg|jpg|gif|bmp|webp);base64,[A-Za-z0-9+/]+=*$/.test(t) : !0 : !1, j = (c) => {
+  var l = c, {
+    display: t = "inline-block",
+    iconName: n,
+    iconSize: s = "md",
+    verticalAlign: a = "middle",
+    className: r
+  } = l, d = F(l, [
+    "display",
     "iconName",
     "iconSize",
+    "verticalAlign",
     "className"
   ]);
-  const c = `pds-icon pds-icon--${n} pds-icon--${t}`, l = `0 0 ${j2[t].width} 512`, o = {
+  const o = `pds-icon pds-icon--${s} pds-icon--${n}`, p = `0 0 ${j2[n].width} 512`, g = {
     sm: "0.8rem",
     md: "1rem",
     lg: "1.2rem",
@@ -85,16 +89,21 @@ const c2 = () => Math.random().toString(32).substring(2, 13), xt = (t, n) => {
     y({
       xmlns: "http://www.w3.org/2000/svg",
       role: "img",
-      viewBox: l,
-      height: o[n],
+      viewBox: p,
+      height: g[s],
       fill: "none",
       "aria-hidden": "true",
       preserveAspectRatio: "xMidYMid meet",
       focusable: "false",
-      className: [c, s != null ? s : ""].join(" ").trim().replace(/\s+/g, " "),
-      style: { flexShrink: 0, overflow: "visible" }
-    }, a),
-    /* @__PURE__ */ e.createElement("path", { d: j2[t].path, fill: "currentColor" })
+      className: z([o, r]),
+      style: {
+        display: t,
+        flexShrink: 0,
+        overflow: "visible",
+        verticalAlign: a
+      }
+    }, d),
+    /* @__PURE__ */ e.createElement("path", { d: j2[n].path, fill: "currentColor" })
   );
 }, j2 = {
   angleDown: {