@pglevy/sailwind 0.3.0 → 0.4.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/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,5 @@ export * from './Tabs';
 export * from './Image';
 export * from './Dialog';
 export * from './ApplicationHeader';
+export * from './SideNavAdmin';
 //# 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"}

package/dist/index.js

@@ -7,52 +7,54 @@ 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 { MessageBanner as S } from "./components/MessageBanner/MessageBanner.js";
+import { MilestoneField as y } from "./components/Milestone/MilestoneField.js";
+import { ProgressBar as I } 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 { TextItem as C } from "./components/RichText/TextItem.js";
+import { Icon as M } 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 { CheckboxField as N } from "./components/Checkbox/CheckboxField.js";
+import { RadioButtonField as j } from "./components/RadioButton/RadioButtonField.js";
+import { DropdownField as z } from "./components/Dropdown/DropdownField.js";
+import { MultipleDropdownField as G } from "./components/Dropdown/MultipleDropdownField.js";
+import { SwitchField as K } 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 { SideNavAdmin as po } from "./components/SideNavAdmin/SideNavAdmin.js";
 export {
   ro as ApplicationHeader,
   g as ButtonArrayLayout,
   F as ButtonWidget,
   T as CardLayout,
-  j as CheckboxField,
+  N as CheckboxField,
   m as CollapsibleSection,
   oo as DialogField,
-  E as DropdownField,
+  z as DropdownField,
   r as FieldLabel,
   p as FieldWrapper,
   u as HeadingField,
-  A as Icon,
+  M as Icon,
   _ as ImageField,
-  b as MessageBanner,
-  D as MilestoneField,
-  J as MultipleDropdownField,
-  S as ProgressBar,
-  v as RadioButtonField,
+  S as MessageBanner,
+  y as MilestoneField,
+  G as MultipleDropdownField,
+  I as ProgressBar,
+  j as RadioButtonField,
   w as RichTextDisplayField,
+  po as SideNavAdmin,
   V as SliderField,
   R as StampField,
-  N as SwitchField,
+  K as SwitchField,
   Y as TabsField,
   l as TagField,
   d as TagItem,
   k as TextField,
-  L as TextItem,
+  C 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pglevy/sailwind",
-  "version": "0.3.0",
+  "version": "0.4.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"
   ],

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>