@pglevy/sailwind 0.3.0 → 0.5.0

package/README.md

@@ -14,6 +14,38 @@ Use the **[sailwind-starter](https://github.com/pglevy/sailwind-starter)** templ
 
 Browse the **[Component Reference](https://pglevy.github.io/sailwind/)** to see what's available.
 
+### Installation
+
+```bash
+npm install @pglevy/sailwind
+```
+
+### Setup
+
+Import the CSS in your main entry file (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import '@pglevy/sailwind/index.css'
+```
+
+### Using Images
+
+If your components need the included icons, reference them like this:
+
+```tsx
+import iconApp from '@pglevy/sailwind/images/icon-app.svg'
+import iconInterface from '@pglevy/sailwind/images/icon-interface.svg'
+
+<img src={iconApp} alt="App icon" />
+```
+
+Available images:
+- `icon-app.svg`
+- `icon-appian-header.png`
+- `icon-expression-rule.svg`
+- `icon-interface.svg`
+- `icon-record-type.svg`
+
 ## For Contributors
 
 ### Setup

package/dist/components/ApplicationHeader/ApplicationHeader.d.ts

@@ -23,6 +23,14 @@ export interface ApplicationHeaderProps {
     onBackClick?: () => void;
     /** Path to Appian logo image */
     appianLogoSrc?: string;
+    /** Additional buttons to display before the right-side controls */
+    additionalButtons?: Array<{
+        label: string;
+        style?: "SOLID" | "OUTLINE" | "GHOST" | "LINK";
+        size?: "SMALL" | "STANDARD" | "MEDIUM" | "LARGE";
+        color?: string;
+        onClick?: () => void;
+    }>;
 }
 /**
  * ApplicationHeader Component

package/dist/components/ApplicationHeader/ApplicationHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ApplicationHeader/ApplicationHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAA;AASzE,MAAM,WAAW,sBAAsB;IACrC,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,qCAAqC;IACrC,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,2BAA2B;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkN9D,CAAA"}
+{"version":3,"file":"ApplicationHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ApplicationHeader/ApplicationHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAA;AASzE,MAAM,WAAW,sBAAsB;IACrC,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,qCAAqC;IACrC,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,2BAA2B;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,KAAK,CAAC;QACxB,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;QAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;QAChD,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KACrB,CAAC,CAAA;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmO9D,CAAA"}

package/dist/components/ApplicationHeader/ApplicationHeader.js

@@ -1,37 +1,38 @@
-import { jsx as e, jsxs as a, Fragment as r } from "react/jsx-runtime";
+import { jsx as e, jsxs as a, Fragment as c } from "react/jsx-runtime";
 import "react";
 import { ButtonWidget as s } from "../Button/ButtonWidget.js";
-import { ButtonArrayLayout as m } from "../Button/ButtonArrayLayout.js";
-import { SwitchField as u } from "../Switch/SwitchField.js";
-import { ToggleField as c } from "../Toggle/ToggleField.js";
-const v = {
+import { ButtonArrayLayout as o } from "../Button/ButtonArrayLayout.js";
+import { SwitchField as T } from "../Switch/SwitchField.js";
+import { ToggleField as t } from "../Toggle/ToggleField.js";
+const y = {
   app: "images/icon-app.svg",
   interface: "images/icon-interface.svg",
   "record-type": "images/icon-record-type.svg",
   "expression-rule": "images/icon-expression-rule.svg"
-}, h = ({
-  name: d = "Application",
-  userInitials: N = "U",
+}, z = ({
+  name: p = "Application",
+  userInitials: A = "U",
   showDesignerControls: i = !1,
-  objectType: t = "app",
-  iconSrc: p,
-  previewEnabled: A = !1,
+  objectType: n = "app",
+  iconSrc: S,
+  previewEnabled: L = !1,
   showStoriesView: l = !1,
-  onPreviewToggle: S,
-  onStoryToggle: o,
-  onBackClick: n,
-  appianLogoSrc: L = "images/icon-appian-header.png"
+  onPreviewToggle: g,
+  onStoryToggle: m,
+  onBackClick: d,
+  appianLogoSrc: v = "images/icon-appian-header.png",
+  additionalButtons: N = []
 }) => {
-  const g = p || v[t];
-  return /* @__PURE__ */ e("div", { className: "application-header-gradient border-b border-gray-200", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-6 pt-4 pb-3", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-      i && n && /* @__PURE__ */ e(
+  const u = S || y[n];
+  return /* @__PURE__ */ e("div", { className: "application-header-gradient border-b border-gray-200", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-6 pt-4 pb-3 min-w-0 overflow-x-auto", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-3 shrink-0", children: [
+      i && d && /* @__PURE__ */ e(
         s,
         {
           icon: "ChevronLeft",
           style: "GHOST",
           size: "SMALL",
-          onClick: n,
+          onClick: d,
           className: "aspect-square"
         }
       ),
@@ -39,28 +40,28 @@ const v = {
         /* @__PURE__ */ e(
           "img",
           {
-            src: g,
-            alt: t,
+            src: u,
+            alt: n,
             className: "h-8 w-8 mr-2"
           }
         ),
-        /* @__PURE__ */ e("span", { className: "text-gray-800 font-bold", children: d })
+        /* @__PURE__ */ e("span", { className: "text-gray-800 font-bold", children: p })
       ] }),
-      i && /* @__PURE__ */ a(r, { children: [
+      i && /* @__PURE__ */ a(c, { children: [
         /* @__PURE__ */ a("div", { className: "flex items-center gap-0 ml-4 bg-gray-50 p-1 rounded-sm", children: [
           /* @__PURE__ */ e(
-            c,
+            t,
             {
               icon: "square-dashed-mouse-pointer",
               style: "GHOST",
               size: "SMALL",
               value: !l,
-              saveInto: l ? o : void 0,
+              saveInto: l ? m : void 0,
               marginBelow: "NONE"
             }
           ),
           /* @__PURE__ */ e(
-            c,
+            t,
             {
               icon: "code",
               style: "GHOST",
@@ -71,20 +72,20 @@ const v = {
           )
         ] }),
         /* @__PURE__ */ e("div", { className: "mt-1 [&>div>div]:flex-row-reverse [&>div>div]:gap-2 [&_label]:mb-1 scale-75", children: /* @__PURE__ */ e(
-          u,
+          T,
           {
             label: "Preview",
             labelPosition: "ADJACENT",
-            value: A,
-            saveInto: S,
+            value: L,
+            saveInto: g,
             marginBelow: "NONE"
           }
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: "flex items-center gap-0", children: i && /* @__PURE__ */ a(r, { children: [
+    /* @__PURE__ */ e("div", { className: "flex items-center gap-0 shrink-0", children: i && /* @__PURE__ */ a(c, { children: [
       /* @__PURE__ */ e("div", { className: "[&>div]:gap-1 mr-0", children: /* @__PURE__ */ e(
-        m,
+        o,
         {
           buttons: [
             {
@@ -113,20 +114,34 @@ const v = {
         }
       ) }),
       /* @__PURE__ */ e("div", { className: "[&_button]:border-0", children: /* @__PURE__ */ e(
-        c,
+        t,
         {
           icon: "book-open-text",
           style: l ? "SOLID" : "GHOST",
           size: "SMALL",
           value: l,
-          saveInto: o,
+          saveInto: m,
           marginBelow: "NONE",
           color: l ? "ACCENT" : "STANDARD"
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-0", children: [
-      i && /* @__PURE__ */ a(r, { children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-0 shrink-0", children: [
+      N.length > 0 && /* @__PURE__ */ e("div", { className: "[&>div]:gap-1 mr-3", children: /* @__PURE__ */ e(
+        o,
+        {
+          buttons: N.map((r) => ({
+            label: r.label,
+            style: r.style || "OUTLINE",
+            size: r.size || "SMALL",
+            color: r.color || "STANDARD",
+            onClick: r.onClick,
+            className: "border-1"
+          })),
+          marginBelow: "NONE"
+        }
+      ) }),
+      i && /* @__PURE__ */ a(c, { children: [
         /* @__PURE__ */ e(
           s,
           {
@@ -168,7 +183,7 @@ const v = {
           }
         ),
         /* @__PURE__ */ e("div", { className: "[&>div]:gap-1 mr-3", children: /* @__PURE__ */ e(
-          m,
+          o,
           {
             buttons: [
               {
@@ -219,11 +234,11 @@ const v = {
           className: "aspect-square mr-3"
         }
       ),
-      /* @__PURE__ */ e("div", { className: "w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center mr-3", children: /* @__PURE__ */ e("span", { className: "text-gray-700 text-sm font-medium", children: N }) }),
+      /* @__PURE__ */ e("div", { className: "w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center mr-3", children: /* @__PURE__ */ e("span", { className: "text-gray-700 text-sm font-medium", children: A }) }),
       /* @__PURE__ */ e(
         "img",
         {
-          src: L,
+          src: v,
           alt: "Appian",
           className: "h-6 w-auto"
         }
@@ -232,5 +247,5 @@ const v = {
   ] }) });
 };
 export {
-  h as ApplicationHeader
+  z as ApplicationHeader
 };

package/dist/components/ApplicationHeader/ApplicationHeader.stories.d.ts

@@ -15,4 +15,5 @@ export declare const RecordType: Story;
 export declare const ExpressionRule: Story;
 export declare const PreviewEnabled: Story;
 export declare const StoriesViewActive: Story;
+export declare const AdminConsole: Story;
 //# sourceMappingURL=ApplicationHeader.stories.d.ts.map

package/dist/components/ApplicationHeader/ApplicationHeader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ApplicationHeader/ApplicationHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;CAKgC,CAAA;AAE1C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAA"}
+{"version":3,"file":"ApplicationHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ApplicationHeader/ApplicationHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;CAKgC,CAAA;AAE1C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAsB1B,CAAA"}

package/dist/components/ReadOnlyGrid/GridColumn.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { SAILAlign, SAILGridColumnWidth } from '../../types/sail';
+/**
+ * Props for the GridColumn component.
+ * GridColumn is a configuration-only component — it renders nothing.
+ * ReadOnlyGrid reads these props from its children to define column behavior.
+ */
+export interface GridColumnProps {
+    /** Text to display as the column header */
+    label?: string;
+    /** Field name used for sorting when this column header is clicked */
+    sortField?: string;
+    /**
+     * Display value for each cell. Can be:
+     * - A string field name to look up on each row object
+     * - A function (row: any, index: number) => React.ReactNode
+     */
+    value?: string | ((row: any, index: number) => React.ReactNode);
+    /** Alignment for header and cell content */
+    align?: SAILAlign;
+    /** Column width */
+    width?: SAILGridColumnWidth;
+    /** Background color for cells — hex color or semantic name */
+    backgroundColor?: string | ((row: any) => string);
+    /** Whether this column is visible. Defaults to true. */
+    showWhen?: boolean;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+}
+/**
+ * GridColumn is a declarative, configuration-only component.
+ * It renders nothing — ReadOnlyGrid reads its props to determine column behavior.
+ */
+export declare const GridColumn: React.FC<GridColumnProps>;
+//# sourceMappingURL=GridColumn.d.ts.map

package/dist/components/ReadOnlyGrid/GridColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridColumn.d.ts","sourceRoot":"","sources":["../../../src/components/ReadOnlyGrid/GridColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAChE,4CAA4C;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mBAAmB;IACnB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;IAClD,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAc,CAAC"}

package/dist/components/ReadOnlyGrid/GridColumn.js

@@ -0,0 +1,5 @@
+import "react";
+const l = () => null;
+export {
+  l as GridColumn
+};

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { SAILLabelPosition, SAILMarginSize, SAILGridHeight, SortInfo } from '../../types/sail';
+export interface ReadOnlyGridProps {
+    /** Text to display as the grid label */
+    label?: string;
+    /** Determines where the label appears */
+    labelPosition?: SAILLabelPosition;
+    /** Supplemental text about this grid */
+    instructions?: string;
+    /** Displays a help icon with tooltip text */
+    helpTooltip?: string;
+    /** Text to display when no data is available */
+    emptyGridMessage?: string;
+    /** The data array to display */
+    data?: Record<string, any>[];
+    /** GridColumn children defining the columns */
+    children?: React.ReactNode;
+    /** Maximum rows per page. Default: 10 */
+    pageSize?: number;
+    /** Initial sort configurations */
+    initialSorts?: SortInfo[];
+    /** Whether rows are selectable */
+    selectable?: boolean;
+    /** Selection visual style */
+    selectionStyle?: "CHECKBOX" | "ROW_HIGHLIGHT";
+    /** Currently selected row identifiers */
+    selectionValue?: (string | number)[];
+    /** Callback when selection changes */
+    selectionSaveInto?: (selectedIds: (string | number)[]) => void;
+    /** Validation messages to display below the grid */
+    validations?: string[];
+    /** Whether the component is displayed */
+    showWhen?: boolean;
+    /** Cell spacing */
+    spacing?: "STANDARD" | "DENSE";
+    /** Grid height */
+    height?: SAILGridHeight;
+    /** Border style */
+    borderStyle?: "STANDARD" | "LIGHT";
+    /** Whether to shade alternate rows */
+    shadeAlternateRows?: boolean;
+    /** Index of column to use as row header for accessibility */
+    rowHeader?: number;
+    /** Additional text for screen readers */
+    accessibilityText?: string;
+    /** Space above component */
+    marginAbove?: SAILMarginSize;
+    /** Space below component */
+    marginBelow?: SAILMarginSize;
+}
+export declare const ReadOnlyGrid: React.FC<ReadOnlyGridProps>;
+//# sourceMappingURL=ReadOnlyGrid.d.ts.map

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadOnlyGrid.d.ts","sourceRoot":"","sources":["../../../src/components/ReadOnlyGrid/ReadOnlyGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IAC9C,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACrC,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC/B,kBAAkB;IAClB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACnC,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,cAAc,CAAC;CAC9B;AAuGD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2WpD,CAAC"}

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.js

@@ -0,0 +1,277 @@
+import { jsx as t, jsxs as h, Fragment as we } from "react/jsx-runtime";
+import o from "react";
+import { ChevronsLeft as Re, ChevronLeft as $e, ChevronRight as ve, ChevronsRight as Ee, MoveUp as Le, MoveDown as Se } from "lucide-react";
+import { FieldWrapper as Ae } from "../shared/FieldWrapper.js";
+import { GridColumn as Oe } from "./GridColumn.js";
+function Te(n) {
+  const i = [];
+  return o.Children.forEach(n, (l) => {
+    o.isValidElement(l) && l.type === Oe && i.push(l.props);
+  }), i;
+}
+function Me(n, i, l) {
+  if (n == null)
+    return null;
+  if (typeof n == "string")
+    return i[n] ?? null;
+  if (typeof n == "function")
+    try {
+      return n(i, l);
+    } catch (S) {
+      return console.warn("GridColumn value accessor threw an error:", S), null;
+    }
+  return null;
+}
+function He(n, i) {
+  if (!n) return {};
+  const l = typeof n == "function" ? n(i) : n;
+  return !l || l === "NONE" ? {} : I[l] !== void 0 ? I[l] ? { className: I[l] } : {} : l.startsWith("#") ? { style: { backgroundColor: l } } : {};
+}
+const Ue = {
+  SHORT: "max-h-40",
+  SHORT_PLUS: "max-h-52",
+  MEDIUM: "max-h-64",
+  MEDIUM_PLUS: "max-h-80",
+  TALL: "max-h-96",
+  TALL_PLUS: "max-h-[28rem]",
+  EXTRA_TALL: "max-h-[36rem]",
+  AUTO: ""
+}, se = {
+  AUTO: "",
+  ICON: "w-10",
+  ICON_PLUS: "w-14",
+  NARROW: "w-24",
+  NARROW_PLUS: "w-32",
+  MEDIUM: "w-40",
+  MEDIUM_PLUS: "w-48",
+  WIDE: "w-64",
+  "1X": "flex-1",
+  "2X": "flex-[2]",
+  "3X": "flex-[3]",
+  "4X": "flex-[4]",
+  "5X": "flex-[5]",
+  "6X": "flex-[6]",
+  "7X": "flex-[7]",
+  "8X": "flex-[8]",
+  "9X": "flex-[9]",
+  "10X": "flex-[10]"
+}, ne = {
+  START: "text-left",
+  CENTER: "text-center",
+  END: "text-right"
+}, I = {
+  NONE: "",
+  ACCENT: "bg-blue-50",
+  SUCCESS: "bg-green-50",
+  INFO: "bg-sky-50",
+  WARN: "bg-yellow-50",
+  ERROR: "bg-red-50"
+}, We = ({
+  label: n,
+  labelPosition: i,
+  instructions: l,
+  helpTooltip: S,
+  emptyGridMessage: le = "No items available",
+  data: X,
+  children: ae,
+  pageSize: D = 10,
+  initialSorts: x,
+  selectable: d,
+  selectionStyle: m = "CHECKBOX",
+  selectionValue: g = [],
+  selectionSaveInto: b,
+  validations: A,
+  showWhen: oe = !0,
+  borderStyle: ie = "LIGHT",
+  shadeAlternateRows: de = !1,
+  spacing: ce = "STANDARD",
+  height: k = "AUTO",
+  accessibilityText: F,
+  marginAbove: ue,
+  marginBelow: he
+}) => {
+  const ge = o.useId(), O = D > 0 ? D : 10, C = Array.isArray(X) ? X : [], [T, f] = o.useState(1), [p, W] = o.useState(null), [c, M] = o.useState(!0);
+  o.useEffect(() => {
+    x && x.length > 0 && (W(x[0].field), M(x[0].ascending));
+  }, []), o.useEffect(() => {
+    f(1);
+  }, [C.length]);
+  const pe = (e) => {
+    p === e ? M((r) => !r) : (W(e), M(!0)), f(1);
+  }, H = o.useMemo(
+    () => C.map((e, r) => ({ ...e, __originalIndex: r })),
+    [C]
+  ), y = o.useMemo(() => p ? [...H].sort((e, r) => {
+    const s = e[p], a = r[p];
+    return s == null && a == null ? 0 : s == null ? c ? -1 : 1 : a == null ? c ? 1 : -1 : typeof s == "string" && typeof a == "string" ? c ? s.localeCompare(a) : a.localeCompare(s) : s < a ? c ? -1 : 1 : s > a ? c ? 1 : -1 : 0;
+  }) : H, [H, p, c]);
+  if (!oe)
+    return null;
+  const N = Te(ae).filter((e) => e.showWhen !== !1), w = ie === "STANDARD", fe = w ? "border border-gray-300" : "", me = w ? "border-b border-gray-300" : "border-b border-gray-200", be = w ? "border-b border-gray-300" : "border-b border-gray-200", u = w ? "border-r border-gray-300" : "", R = ce === "DENSE" ? "px-2 py-1" : "px-3 py-2", G = Ue[k] || "", z = k !== "AUTO" && G !== "", U = Math.ceil(y.length / O), $ = (T - 1) * O, B = Math.min($ + O, y.length), j = T > 1, K = T < U, q = y.slice($, B), J = (e) => e.id !== void 0 ? e.id : e.__originalIndex, Q = (e) => {
+    if (!b) return;
+    const s = g.includes(e) ? g.filter((a) => a !== e) : [...g, e];
+    b(s);
+  }, v = d ? q.map((e) => J(e)) : [], Y = d && v.length > 0 && v.every((e) => g.includes(e)), xe = () => {
+    if (b)
+      if (Y)
+        b(g.filter((e) => !v.includes(e)));
+      else {
+        const e = [...g];
+        v.forEach((r) => {
+          e.includes(r) || e.push(r);
+        }), b(e);
+      }
+  }, Ce = A && A.length > 0 ? /* @__PURE__ */ t("div", { children: A.map((e, r) => /* @__PURE__ */ t("p", { className: "text-red-600 text-sm mt-1", children: e }, r)) }) : void 0, Z = (e) => e.width && se[e.width] ? se[e.width] : "", V = (e) => e.align && ne[e.align] ? ne[e.align] : "text-left", ee = () => /* @__PURE__ */ h(
+    "table",
+    {
+      className: `w-full border-collapse ${fe}`,
+      "aria-label": F,
+      children: [
+        /* @__PURE__ */ t("thead", { className: z ? "sticky top-0 bg-white z-10" : void 0, children: /* @__PURE__ */ h("tr", { className: me, children: [
+          d && m === "CHECKBOX" && /* @__PURE__ */ t("th", { className: `${R} w-10${u ? ` ${u}` : ""}`, children: /* @__PURE__ */ t(
+            "input",
+            {
+              type: "checkbox",
+              checked: Y,
+              onChange: xe,
+              "aria-label": "Select all rows"
+            }
+          ) }),
+          N.map((e, r) => {
+            const s = Z(e), a = V(e), E = !(r === N.length - 1) && u ? ` ${u}` : "";
+            return /* @__PURE__ */ t(
+              "th",
+              {
+                className: `${R} ${a} text-sm font-semibold text-base${s ? ` ${s}` : ""}${E}`,
+                "aria-sort": p === e.sortField ? c ? "ascending" : "descending" : void 0,
+                children: e.sortField ? /* @__PURE__ */ h(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => pe(e.sortField),
+                    className: "flex items-center gap-1 hover:text-gray-900 cursor-pointer",
+                    children: [
+                      e.label ?? "",
+                      p === e.sortField && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: c ? /* @__PURE__ */ t(Le, { size: 14 }) : /* @__PURE__ */ t(Se, { size: 14 }) })
+                    ]
+                  }
+                ) : e.label ?? ""
+              },
+              r
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ t("tbody", { children: q.map((e, r) => {
+          const s = J(e), a = d && g.includes(s), _ = d && m === "ROW_HIGHLIGHT" && a, E = de && r % 2 === 0 && !_ ? "bg-gray-50" : "";
+          return /* @__PURE__ */ h(
+            "tr",
+            {
+              className: `${be}${d && m === "ROW_HIGHLIGHT" ? " cursor-pointer" : ""}${_ ? " bg-blue-50" : ""}${E ? ` ${E}` : ""}`,
+              onClick: d && m === "ROW_HIGHLIGHT" ? () => Q(s) : void 0,
+              children: [
+                d && m === "CHECKBOX" && /* @__PURE__ */ t("td", { className: `${R} w-10${u ? ` ${u}` : ""}`, children: /* @__PURE__ */ t(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: a || !1,
+                    onChange: () => Q(s),
+                    "aria-label": `Select row ${r + 1}`
+                  }
+                ) }),
+                N.map((L, te) => {
+                  const re = Z(L), ye = V(L), P = He(L.backgroundColor, e), Ne = !(te === N.length - 1) && u ? ` ${u}` : "";
+                  return /* @__PURE__ */ t(
+                    "td",
+                    {
+                      className: `${R} ${ye} text-sm text-gray-900${re ? ` ${re}` : ""}${P.className ? ` ${P.className}` : ""}${Ne}`,
+                      style: P.style,
+                      children: Me(L.value, e, $ + r)
+                    },
+                    te
+                  );
+                })
+              ]
+            },
+            r
+          );
+        }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ t(
+    Ae,
+    {
+      label: n,
+      labelPosition: i,
+      instructions: l,
+      helpTooltip: S,
+      accessibilityText: F,
+      inputId: ge,
+      marginAbove: ue,
+      marginBelow: he,
+      footer: Ce,
+      children: C.length === 0 ? /* @__PURE__ */ t("div", { className: "text-gray-500 py-4 text-center", children: le }) : /* @__PURE__ */ h(we, { children: [
+        z ? /* @__PURE__ */ t("div", { className: `${G} overflow-y-auto`, children: ee() }) : ee(),
+        U > 1 && /* @__PURE__ */ h("div", { className: "flex items-center justify-end gap-2 px-3 py-2 text-sm text-gray-700", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => f(1),
+              disabled: !j,
+              "aria-label": "First page",
+              title: "First page",
+              className: "px-1 py-1 disabled:text-gray-300 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer",
+              children: /* @__PURE__ */ t(Re, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => f((e) => e - 1),
+              disabled: !j,
+              "aria-label": "Previous page",
+              title: "Previous page",
+              className: "px-1 py-1 disabled:text-gray-300 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer",
+              children: /* @__PURE__ */ t($e, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ h("span", { children: [
+            /* @__PURE__ */ h("span", { className: "font-bold", children: [
+              $ + 1,
+              " – ",
+              B
+            ] }),
+            " ",
+            "of ",
+            y.length
+          ] }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => f((e) => e + 1),
+              disabled: !K,
+              "aria-label": "Next page",
+              title: "Next page",
+              className: "px-1 py-1 disabled:text-gray-300 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer",
+              children: /* @__PURE__ */ t(ve, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => f(U),
+              disabled: !K,
+              "aria-label": "Last page",
+              title: "Last page",
+              className: "px-1 py-1 disabled:text-gray-300 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer",
+              children: /* @__PURE__ */ t(Ee, { size: 18 })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  We as ReadOnlyGrid
+};

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.stories.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: React.FC<import('./ReadOnlyGrid').ReadOnlyGridProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** 1. Default — Basic grid with employee data */
+export declare const Default: Story;
+/** 2. EmptyState — Empty data with custom message */
+export declare const EmptyState: Story;
+/** 3. WithPaging — Full dataset with pageSize=5 showing paging controls */
+export declare const WithPaging: Story;
+/** 4. WithSorting — Sortable columns with initial sort on salary descending */
+export declare const WithSorting: Story;
+/** 5. WithCheckboxSelection — Selectable grid with checkbox style */
+export declare const WithCheckboxSelection: Story;
+/** 6. WithRowHighlightSelection — ROW_HIGHLIGHT selection style */
+export declare const WithRowHighlightSelection: Story;
+/** 7. StyledGrid — borderStyle, shadeAlternateRows, dense spacing */
+export declare const StyledGrid: Story;
+/** 8. FixedHeight — MEDIUM height to show scrolling behavior */
+export declare const FixedHeight: Story;
+/** 9. WithLabelAndValidations — label, instructions, validations, helpTooltip */
+export declare const WithLabelAndValidations: Story;
+/** 10. ColumnWidthsAndAlignment — Various column widths and alignments */
+export declare const ColumnWidthsAndAlignment: Story;
+/** 11. FunctionAccessor — Using function value accessors for computed columns */
+export declare const FunctionAccessor: Story;
+//# sourceMappingURL=ReadOnlyGrid.stories.d.ts.map

package/dist/components/ReadOnlyGrid/ReadOnlyGrid.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadOnlyGrid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReadOnlyGrid/ReadOnlyGrid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAmB3D,QAAA,MAAM,IAAI;;;;;;;CAK2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,iDAAiD;AACjD,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,UAAU,EAAE,KASxB,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,WAAW,EAAE,KAazB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,qBAAqB,EAAE,KAgBnC,CAAA;AAED,mEAAmE;AACnE,eAAO,MAAM,yBAAyB,EAAE,KAiBvC,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,iFAAiF;AACjF,eAAO,MAAM,uBAAuB,EAAE,KAcrC,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,wBAAwB,EAAE,KAStC,CAAA;AAED,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,EAAE,KAwB9B,CAAA"}

package/dist/components/ReadOnlyGrid/index.d.ts

@@ -0,0 +1,5 @@
+export { ReadOnlyGrid } from './ReadOnlyGrid';
+export type { ReadOnlyGridProps } from './ReadOnlyGrid';
+export { GridColumn } from './GridColumn';
+export type { GridColumnProps } from './GridColumn';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ReadOnlyGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReadOnlyGrid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/SideNavAdmin/SideNavAdmin.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface NavItem {
+    label: string;
+    link?: () => void;
+}
+export interface NavSection {
+    heading: string;
+    items: NavItem[];
+}
+export interface SideNavAdminProps {
+    /** Navigation sections with headings and items */
+    sections?: NavSection[];
+    /** Label of the currently active/selected item */
+    activeItem?: string;
+    /** Callback when a nav item is clicked */
+    onItemClick?: (label: string) => void;
+}
+/**
+ * SideNavAdmin Component
+ * Admin console side navigation with grouped sections and active item indicator
+ */
+export declare const SideNavAdmin: React.FC<SideNavAdminProps>;
+//# sourceMappingURL=SideNavAdmin.d.ts.map

package/dist/components/SideNavAdmin/SideNavAdmin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavAdmin.d.ts","sourceRoot":"","sources":["../../../src/components/SideNavAdmin/SideNavAdmin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,OAAO,EAAE,CAAA;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAA;IACvB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC;AAyED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsEpD,CAAA"}

package/dist/components/SideNavAdmin/SideNavAdmin.js

@@ -0,0 +1,143 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import "react";
+import { RichTextDisplayField as t } from "../RichText/RichTextDisplayField.js";
+import { TextItem as i } from "../RichText/TextItem.js";
+import { Icon as c } from "../RichText/Icon.js";
+const m = [
+  {
+    heading: "SYSTEM",
+    items: [
+      { label: "Branding" },
+      { label: "Data Retention" },
+      { label: "File Upload" },
+      { label: "Internationalization" },
+      { label: "Mobile" },
+      { label: "Permissions" },
+      { label: "Plug-ins" },
+      { label: "Portals" },
+      { label: "Typefaces" },
+      { label: "User Start Pages" }
+    ]
+  },
+  {
+    heading: "AUTHENTICATION",
+    items: [
+      { label: "Appian" },
+      { label: "LDAP" },
+      { label: "Maintenance Window" },
+      { label: "Sign-In Page" },
+      { label: "Single Sign-On" },
+      { label: "Users" },
+      { label: "Web API Authentication" }
+    ]
+  },
+  {
+    heading: "DEVOPS",
+    items: [
+      { label: "Deployment" },
+      { label: "Health Check" },
+      { label: "Infrastructure" }
+    ]
+  },
+  {
+    heading: "INTEGRATION",
+    items: [
+      { label: "AI Services" },
+      { label: "Certificates" },
+      { label: "Data Sources" },
+      { label: "Email" },
+      { label: "Embedded Interfaces" },
+      { label: "HTTP Proxy" },
+      { label: "Legacy Web Services" },
+      { label: "Logging" },
+      { label: "Microsoft Office" },
+      { label: "Third-Party Credentials" },
+      { label: "WalkMe" }
+    ]
+  },
+  {
+    heading: "MONITORING",
+    items: [
+      { label: "Current User Activity" },
+      { label: "Document Reports" },
+      { label: "Import History" },
+      { label: "Rule Performance" }
+    ]
+  },
+  {
+    heading: "ENGINEERING",
+    items: [
+      { label: "Data Calls by Request" },
+      { label: "Development Configurations" },
+      { label: "Feature Toggles" }
+    ]
+  }
+], p = ({
+  sections: r = m,
+  activeItem: s = "Branding",
+  onItemClick: n
+}) => /* @__PURE__ */ e("nav", { className: "py-4 px-4 w-64", "aria-label": "Admin navigation", children: r.map((a) => /* @__PURE__ */ o("div", { className: "mb-4", children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      marginBelow: "EVEN_LESS",
+      value: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            text: a.heading,
+            size: "SMALL",
+            color: "SECONDARY"
+          },
+          "heading"
+        )
+      ]
+    }
+  ),
+  /* @__PURE__ */ e("ul", { className: "list-none p-0 m-0 pl-3", children: a.items.map((l) => {
+    const b = l.label === s;
+    return /* @__PURE__ */ e("li", { className: "mb-1", children: /* @__PURE__ */ e(
+      t,
+      {
+        marginBelow: "EVEN_LESS",
+        value: b ? [
+          /* @__PURE__ */ e(
+            i,
+            {
+              text: l.label,
+              style: "STRONG",
+              color: "STANDARD",
+              size: "SMALL"
+            },
+            "label"
+          ),
+          /* @__PURE__ */ e("span", { children: "  " }, "spacer"),
+          /* @__PURE__ */ e(
+            c,
+            {
+              icon: "chevron-right",
+              size: "SMALL",
+              color: "STANDARD"
+            },
+            "caret"
+          )
+        ] : [
+          /* @__PURE__ */ e(
+            i,
+            {
+              text: l.label,
+              color: "ACCENT",
+              size: "SMALL",
+              link: l.link || (n ? () => n(l.label) : void 0),
+              linkStyle: "STANDALONE"
+            },
+            "label"
+          )
+        ]
+      }
+    ) }, l.label);
+  }) })
+] }, a.heading)) });
+export {
+  p as SideNavAdmin
+};

package/dist/components/SideNavAdmin/SideNavAdmin.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./SideNavAdmin').SideNavAdminProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=SideNavAdmin.stories.d.ts.map

package/dist/components/SideNavAdmin/SideNavAdmin.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavAdmin.stories.d.ts","sourceRoot":"","sources":["../../../src/components/SideNavAdmin/SideNavAdmin.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;CAK2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA"}

package/dist/components/SideNavAdmin/index.d.ts

@@ -0,0 +1,3 @@
+export { SideNavAdmin } from './SideNavAdmin';
+export type { SideNavAdminProps, NavSection, NavItem } from './SideNavAdmin';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SideNavAdmin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SideNavAdmin/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/components/index.d.ts

@@ -19,4 +19,6 @@ export * from './Tabs';
 export * from './Image';
 export * from './Dialog';
 export * from './ApplicationHeader';
+export * from './SideNavAdmin';
+export * from './ReadOnlyGrid';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAA;AAGxB,cAAc,OAAO,CAAA;AAGrB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,WAAW,CAAA;AAGzB,cAAc,iBAAiB,CAAA;AAG/B,cAAc,aAAa,CAAA;AAG3B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,SAAS,CAAA;AAGvB,cAAc,aAAa,CAAA;AAG3B,cAAc,YAAY,CAAA;AAG1B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,SAAS,CAAA;AAGvB,cAAc,UAAU,CAAA;AAGxB,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAA;AAGxB,cAAc,OAAO,CAAA;AAGrB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,WAAW,CAAA;AAGzB,cAAc,iBAAiB,CAAA;AAG/B,cAAc,aAAa,CAAA;AAG3B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,SAAS,CAAA;AAGvB,cAAc,aAAa,CAAA;AAG3B,cAAc,YAAY,CAAA;AAG1B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,UAAU,CAAA;AAGxB,cAAc,QAAQ,CAAA;AAGtB,cAAc,SAAS,CAAA;AAGvB,cAAc,UAAU,CAAA;AAGxB,cAAc,qBAAqB,CAAA;AAGnC,cAAc,gBAAgB,CAAA;AAG9B,cAAc,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,58 +1,64 @@
-import { FieldLabel as r } from "./components/shared/FieldLabel.js";
+import { FieldLabel as e } from "./components/shared/FieldLabel.js";
 import { FieldWrapper as p } from "./components/shared/FieldWrapper.js";
-import { CollapsibleSection as m } from "./components/shared/CollapsibleSection.js";
+import { CollapsibleSection as i } from "./components/shared/CollapsibleSection.js";
 import { TagField as l } from "./components/Tag/TagField.js";
-import { TagItem as d } from "./components/Tag/TagItem.js";
+import { TagItem as f } from "./components/Tag/TagItem.js";
 import { ButtonWidget as F } from "./components/Button/ButtonWidget.js";
 import { ButtonArrayLayout as g } from "./components/Button/ButtonArrayLayout.js";
-import { CardLayout as T } from "./components/Card/CardLayout.js";
-import { HeadingField as u } from "./components/Heading/HeadingField.js";
-import { MessageBanner as b } from "./components/MessageBanner/MessageBanner.js";
-import { MilestoneField as D } from "./components/Milestone/MilestoneField.js";
-import { ProgressBar as S } from "./components/ProgressBar/ProgressBar.js";
-import { RichTextDisplayField as w } from "./components/RichText/RichTextDisplayField.js";
-import { TextItem as L } from "./components/RichText/TextItem.js";
-import { Icon as A } from "./components/RichText/Icon.js";
-import { StampField as R } from "./components/Stamp/StampField.js";
-import { TextField as k } from "./components/TextField/TextField.js";
-import { CheckboxField as j } from "./components/Checkbox/CheckboxField.js";
-import { RadioButtonField as v } from "./components/RadioButton/RadioButtonField.js";
-import { DropdownField as E } from "./components/Dropdown/DropdownField.js";
-import { MultipleDropdownField as J } from "./components/Dropdown/MultipleDropdownField.js";
-import { SwitchField as N } from "./components/Switch/SwitchField.js";
+import { CardLayout as u } from "./components/Card/CardLayout.js";
+import { HeadingField as c } from "./components/Heading/HeadingField.js";
+import { MessageBanner as B } from "./components/MessageBanner/MessageBanner.js";
+import { MilestoneField as b } from "./components/Milestone/MilestoneField.js";
+import { ProgressBar as D } from "./components/ProgressBar/ProgressBar.js";
+import { RichTextDisplayField as h } from "./components/RichText/RichTextDisplayField.js";
+import { TextItem as A } from "./components/RichText/TextItem.js";
+import { Icon as M } from "./components/RichText/Icon.js";
+import { StampField as G } from "./components/Stamp/StampField.js";
+import { TextField as W } from "./components/TextField/TextField.js";
+import { CheckboxField as v } from "./components/Checkbox/CheckboxField.js";
+import { RadioButtonField as O } from "./components/RadioButton/RadioButtonField.js";
+import { DropdownField as j } from "./components/Dropdown/DropdownField.js";
+import { MultipleDropdownField as z } from "./components/Dropdown/MultipleDropdownField.js";
+import { SwitchField as J } from "./components/Switch/SwitchField.js";
 import { ToggleField as Q } from "./components/Toggle/ToggleField.js";
 import { SliderField as V } from "./components/Slider/SliderField.js";
 import { TabsField as Y } from "./components/Tabs/TabsField.js";
 import { ImageField as _ } from "./components/Image/ImageField.js";
 import { DialogField as oo } from "./components/Dialog/DialogField.js";
-import { ApplicationHeader as ro } from "./components/ApplicationHeader/ApplicationHeader.js";
+import { ApplicationHeader as eo } from "./components/ApplicationHeader/ApplicationHeader.js";
+import { SideNavAdmin as po } from "./components/SideNavAdmin/SideNavAdmin.js";
+import { ReadOnlyGrid as io } from "./components/ReadOnlyGrid/ReadOnlyGrid.js";
+import { GridColumn as lo } from "./components/ReadOnlyGrid/GridColumn.js";
 export {
-  ro as ApplicationHeader,
+  eo as ApplicationHeader,
   g as ButtonArrayLayout,
   F as ButtonWidget,
-  T as CardLayout,
-  j as CheckboxField,
-  m as CollapsibleSection,
+  u as CardLayout,
+  v as CheckboxField,
+  i as CollapsibleSection,
   oo as DialogField,
-  E as DropdownField,
-  r as FieldLabel,
+  j as DropdownField,
+  e as FieldLabel,
   p as FieldWrapper,
-  u as HeadingField,
-  A as Icon,
+  lo as GridColumn,
+  c as HeadingField,
+  M as Icon,
   _ as ImageField,
-  b as MessageBanner,
-  D as MilestoneField,
-  J as MultipleDropdownField,
-  S as ProgressBar,
-  v as RadioButtonField,
-  w as RichTextDisplayField,
+  B as MessageBanner,
+  b as MilestoneField,
+  z as MultipleDropdownField,
+  D as ProgressBar,
+  O as RadioButtonField,
+  io as ReadOnlyGrid,
+  h as RichTextDisplayField,
+  po as SideNavAdmin,
   V as SliderField,
-  R as StampField,
-  N as SwitchField,
+  G as StampField,
+  J as SwitchField,
   Y as TabsField,
   l as TagField,
-  d as TagItem,
-  k as TextField,
-  L as TextItem,
+  f as TagItem,
+  W as TextField,
+  A as TextItem,
   Q as ToggleField
 };

package/dist/stories/pages/AdminConsoleDemo.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+import { default as AdminConsoleDemo } from '../../pages/AdminConsoleDemo';
+declare const meta: {
+    title: string;
+    component: typeof AdminConsoleDemo;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=AdminConsoleDemo.stories.d.ts.map

package/dist/stories/pages/AdminConsoleDemo.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminConsoleDemo.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/pages/AdminConsoleDemo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,gBAAgB,MAAM,8BAA8B,CAAA;AAE3D,QAAA,MAAM,IAAI;;;;;;CAI+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAA"}

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA"}

package/dist/types/sail.d.ts

@@ -34,4 +34,19 @@ export type SAILLabelPosition = "ABOVE" | "ADJACENT" | "COLLAPSED" | "JUSTIFIED"
  * Semantic color values matching SAIL's color constants
  */
 export type SAILSemanticColor = "ACCENT" | "POSITIVE" | "NEGATIVE" | "SECONDARY" | "STANDARD";
+/**
+ * Sort configuration for grid columns
+ */
+export interface SortInfo {
+    field: string;
+    ascending: boolean;
+}
+/**
+ * Grid height values matching SAIL's height parameter for grids
+ */
+export type SAILGridHeight = "SHORT" | "SHORT_PLUS" | "MEDIUM" | "MEDIUM_PLUS" | "TALL" | "TALL_PLUS" | "EXTRA_TALL" | "AUTO";
+/**
+ * Grid column width values matching SAIL's width parameter for grid columns
+ */
+export type SAILGridColumnWidth = "AUTO" | "ICON" | "ICON_PLUS" | "NARROW" | "NARROW_PLUS" | "MEDIUM" | "MEDIUM_PLUS" | "WIDE" | "1X" | "2X" | "3X" | "4X" | "5X" | "6X" | "7X" | "8X" | "9X" | "10X";
 //# sourceMappingURL=sail.d.ts.map

package/dist/types/sail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sail.d.ts","sourceRoot":"","sources":["../../src/types/sail.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CAAA;AAE9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE3F;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE9F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAA;AAEtF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAElD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAA;AAEhF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA"}
+{"version":3,"file":"sail.d.ts","sourceRoot":"","sources":["../../src/types/sail.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CAAA;AAE9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE3F;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAA;AAE9F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAA;AAEtF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAElD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAA;AAEhF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA;AAE7F;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GACtB,OAAO,GAAG,YAAY,GACtB,QAAQ,GAAG,aAAa,GACxB,MAAM,GAAG,WAAW,GACpB,YAAY,GAAG,MAAM,CAAC;AAE1B;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAC3B,MAAM,GAAG,MAAM,GAAG,WAAW,GAC7B,QAAQ,GAAG,aAAa,GACxB,QAAQ,GAAG,aAAa,GACxB,MAAM,GACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAChC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pglevy/sailwind",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Appian SAIL components for React - Pre-release version under active development",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,10 +10,13 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./index.css": "./dist/index.css",
+    "./images/*": "./public/images/*",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "public/images",
     "README.md",
     "LICENSE"
   ],
@@ -50,7 +53,8 @@
     "version:patch": "npm version patch",
     "version:minor": "npm version minor",
     "version:major": "npm version major",
-    "release": "npm run build:lib && npm publish --access public"
+    "release": "npm run build:lib && npm publish --access public",
+    "test": "vitest --run"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -73,6 +77,9 @@
     "@storybook/addon-themes": "^10.2.8",
     "@storybook/react-vite": "^10.2.8",
     "@tailwindcss/postcss": "^4.1.14",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.3",
@@ -80,7 +87,9 @@
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "fast-check": "^4.5.3",
     "globals": "^16.4.0",
+    "jsdom": "^28.1.0",
     "playwright": "^1.56.1",
     "postcss": "^8.5.6",
     "react": "^19.1.1",
@@ -90,6 +99,7 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.44.0",
     "vite": "^7.1.7",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
   }
 }

package/public/images/icon-cog.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="144" height="144" viewBox="0 0 144 144"><defs><style>.a{fill:#2322f0;}.b{fill:#fff;}</style></defs><rect class="a" width="144" height="144"/><path class="b" d="M79.74,121.74H63.34a3.73,3.73,0,0,1-3.73-3.52L59,106.78a35.07,35.07,0,0,1-3.32-1.45l-8.18,7.44a3.76,3.76,0,0,1-5.17-.13L30.71,101a3.74,3.74,0,0,1-.14-5.12l7.6-8.55c-.48-1.07-.92-2.17-1.31-3.32l-11-.56a3.74,3.74,0,0,1-3.55-3.73V63.34a3.73,3.73,0,0,1,3.52-3.73L37.23,59c.42-1.1.89-2.18,1.42-3.24l-7.43-8.22a3.73,3.73,0,0,1,.13-5.15L43,30.72a3.75,3.75,0,0,1,5.14-.15l8.57,7.64c1.06-.47,2.15-.91,3.29-1.29l.55-11.11a3.74,3.74,0,0,1,3.74-3.55h16.4a3.75,3.75,0,0,1,3.74,3.52l.65,11.51a34.29,34.29,0,0,1,3.23,1.41l8.21-7.47a3.76,3.76,0,0,1,5.17.12L113.28,43a3.75,3.75,0,0,1,.15,5.14l-7.65,8.59q.72,1.61,1.29,3.27l11.12.56a3.74,3.74,0,0,1,3.55,3.73v16.4a3.75,3.75,0,0,1-3.52,3.74l-11.51.65a34.29,34.29,0,0,1-1.41,3.23l7.47,8.22a3.74,3.74,0,0,1-.12,5.16L101,113.28a3.74,3.74,0,0,1-5.13.15l-8.56-7.61A35,35,0,0,1,84,107.13l-.56,11.06A3.74,3.74,0,0,1,79.74,121.74Zm-12.87-7.48h9.31l.51-10.14a3.76,3.76,0,0,1,2.79-3.43,29.84,29.84,0,0,0,6.66-2.61,3.87,3.87,0,0,1,4.31.5l7.78,6.91,6.61-6.6L98,91.35a3.74,3.74,0,0,1-.44-4.44,27.15,27.15,0,0,0,2.83-6.49,3.76,3.76,0,0,1,3.39-2.69l10.51-.61v-9.3l-10.2-.51a3.76,3.76,0,0,1-3.43-2.79A29.84,29.84,0,0,0,98,57.86a3.74,3.74,0,0,1,.5-4.26l7-7.83-6.6-6.61L91.35,46a3.74,3.74,0,0,1-4.44.45,26.81,26.81,0,0,0-6.49-2.83,3.76,3.76,0,0,1-2.69-3.39l-.61-10.51H67.81l-.5,10.19a3.77,3.77,0,0,1-2.79,3.44A28.79,28.79,0,0,0,57.89,46a3.75,3.75,0,0,1-4.29-.48l-7.83-7-6.62,6.6L46,52.67a3.74,3.74,0,0,1,.43,4.43,27.51,27.51,0,0,0-2.84,6.47,3.73,3.73,0,0,1-3.38,2.69l-10.45.61v9.31l10.14.51a3.76,3.76,0,0,1,3.43,2.79A28.7,28.7,0,0,0,45.9,86.1a3.81,3.81,0,0,1,.47,1.81,3.88,3.88,0,0,1-.95,2.54L38.5,98.23l6.56,6.6L52.59,98a3.77,3.77,0,0,1,4.5-.41,25.49,25.49,0,0,0,6.46,2.86,3.72,3.72,0,0,1,2.71,3.38ZM118,80.66h0ZM72,90A18,18,0,1,1,89.94,72,17.95,17.95,0,0,1,72,90Zm0-28.41A10.46,10.46,0,1,0,82.46,72,10.47,10.47,0,0,0,72,61.54Z"/></svg>

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>