@snhaman/pollymorph 1.4.0 → 1.6.0

package/dist/index.mjs

@@ -10,7 +10,7 @@ var require_pollymorph = __commonJS({
       $schema: "https://design-tokens.github.io/community-group/format/",
       meta: {
         name: "PollyMorph",
-        version: "1.4.0",
+        version: "1.6.0",
         description: "Elucidata unified design system token file. Consolidates all core primitives and semantic component tokens.",
         generatedAt: "2026-03-18",
         lastAudit: "2026-03-18",
@@ -44,7 +44,8 @@ var require_pollymorph = __commonJS({
             -80
           ],
           note: "Full computed hex ramp tokenised in v1.3.0. Each colour has a 'base' key (pure colour) plus 22 tint/shade steps."
-        }
+        },
+        componentRulesSource: "Figma PDS-2.0-Library nodes: 850-601,602,603,605,1026-2068,7763-5244/5245,1916-4113,4718-1770,6228-7796/7063,280-59,447-188,452-304,230-280,289-101,448-191"
       },
       core: {
         color: {
@@ -1310,16 +1311,562 @@ var require_pollymorph = __commonJS({
           search_bar_placement: "Search bars inside the global header are centered and fill available space between the nav title and action buttons. They never span the full content width."
         },
         components: {
-          buttons: {
-            primary: "One primary button per screen. Use for the main action only.",
-            secondary: "Secondary actions (e.g. 'Request a Dataset') use the Secondary/Outlined variant with a purple border. Never use a filled secondary color.",
-            icon_button: "Icon-only action buttons (filter, view toggle, etc.) use the icon button variant with no visible border in default state."
+          $description: "Component-level rules derived from PDS-2.0-Library Figma specs. Each entry covers variants, states, token values, and composition constraints.",
+          button: {
+            variants: {
+              filled: {
+                description: "Primary action. One per view maximum.",
+                background: "primary.purple.base",
+                text: "white",
+                border: "none",
+                radius: "radius.md",
+                elevation: "none",
+                hover: {
+                  background: "primary.purple[-10]"
+                },
+                active: {
+                  background: "primary.purple[-20]"
+                },
+                disabled: {
+                  background: "primary.purple[80]",
+                  text: "white",
+                  cursor: "not-allowed"
+                },
+                loading: "Spinner replaces label. Width preserved. No interaction."
+              },
+              outlined: {
+                description: "Secondary action. Can appear alongside ghost.",
+                background: "transparent",
+                border: "1px solid primary.purple.base",
+                text: "primary.purple.base",
+                radius: "radius.md",
+                hover: {
+                  background: "primary.purple[95]"
+                },
+                active: {
+                  background: "primary.purple[90]"
+                },
+                disabled: {
+                  border: "primary.purple[80]",
+                  text: "primary.purple[80]",
+                  cursor: "not-allowed"
+                }
+              },
+              ghost: {
+                description: "Tertiary action. No border, no background.",
+                background: "transparent",
+                border: "none",
+                text: "primary.purple.base",
+                radius: "radius.md",
+                hover: {
+                  background: "primary.purple[95]"
+                },
+                active: {
+                  background: "primary.purple[90]"
+                },
+                disabled: {
+                  text: "neutral.warm[60]",
+                  cursor: "not-allowed"
+                }
+              }
+            },
+            sizes: {
+              large: {
+                height: "40px",
+                paddingX: "spacing.4",
+                fontSize: "font.size.md",
+                iconGap: "spacing.2"
+              },
+              medium: {
+                height: "32px",
+                paddingX: "spacing.3",
+                fontSize: "font.size.sm",
+                iconGap: "spacing.2"
+              },
+              small: {
+                height: "24px",
+                paddingX: "spacing.2",
+                fontSize: "font.size.xs",
+                iconGap: "spacing.1"
+              },
+              xsmall: {
+                height: "20px",
+                paddingX: "spacing.2",
+                fontSize: "font.size.xxs",
+                iconGap: "spacing.1"
+              }
+            },
+            iconPlacement: "Leading icon left of label, trailing icon right of label. Icon-only: square aspect ratio, tooltip required.",
+            font: "Inter SemiBold (600). No uppercase transform.",
+            radius: "radius.md (6px). Never radius.full for buttons.",
+            composition: "Never stack two Filled buttons side by side. Destructive action uses red Filled variant only in modal footers."
+          },
+          tag: {
+            variants: {
+              filled: "Background: color[90] tint. Text and icon: color.base.",
+              outlined: "Background: transparent. Border: 1px solid color.base. Text: color.base."
+            },
+            colors: {
+              brand: "primary.purple.base filled, white text. Only for Polly/Elucidata-attributed labels.",
+              content: "cyan, pink, blue, green, orange for data category tags.",
+              statusReserved: "red and yellow reserved for status only. Never use for data category tags."
+            },
+            sizes: {
+              medium: {
+                height: "24px",
+                paddingX: "spacing.2",
+                fontSize: "font.size.xs"
+              },
+              small: {
+                height: "20px",
+                paddingX: "spacing.1",
+                fontSize: "font.size.xxs"
+              }
+            },
+            font: "Inter Medium (500). Never bold inside a tag.",
+            radius: "radius.full (pill shape).",
+            closeable: "x icon on right, same color as label. Click removes tag.",
+            truncation: "Tags never wrap. Truncate with ellipsis. Set max-width on parent.",
+            icon: "Optional leading icon, same color as label."
+          },
+          textInput: {
+            states: {
+              default: {
+                border: "1px solid neutral.warm[70]",
+                background: "white",
+                placeholder: "neutral.warm[50]"
+              },
+              focused: {
+                border: "1px solid primary.purple.base",
+                shadow: "none",
+                outline: "none"
+              },
+              filled: {
+                border: "1px solid neutral.warm[70]"
+              },
+              error: {
+                border: "1px solid red.base",
+                trailingIcon: "warning icon in red.base",
+                helperText: "red.base, font.size.xs"
+              },
+              disabled: {
+                background: "neutral.warm[95]",
+                border: "neutral.warm[85]",
+                text: "neutral.warm[60]",
+                cursor: "not-allowed"
+              }
+            },
+            radius: "radius.sm",
+            label: "Always above the field. Inter Medium (500), font.size.sm. Never inside field as permanent placeholder.",
+            helperText: "Below field, neutral.warm[50], font.size.xs. Replaced by error message in error state.",
+            leadingIcon: "Optional. neutral.warm[50] default, primary.purple.base when focused.",
+            trailingIcon: "Password toggle, clear (x), or error indicator.",
+            textarea: "Same border/state rules. Min-height 3 rows. Vertical resize only.",
+            search: "Always has leading search icon. Trailing clear (x) when filled. No floating label.",
+            select: {
+              trailingIcon: "Chevron, rotates 180 degrees when open",
+              menu: {
+                background: "white",
+                radius: "radius.md",
+                elevation: "elevation.md"
+              }
+            }
+          },
+          selectionControl: {
+            radio: {
+              size: "18px",
+              states: {
+                default: {
+                  border: "1.5px solid neutral.warm[70]"
+                },
+                hover: {
+                  border: "1.5px solid primary.purple.base"
+                },
+                checked: {
+                  outerRing: "primary.purple.base",
+                  innerDot: "primary.purple.base"
+                },
+                disabled: {
+                  border: "neutral.warm[80]",
+                  dot: "neutral.warm[70]",
+                  cursor: "not-allowed"
+                }
+              }
+            },
+            checkbox: {
+              size: "18px",
+              radius: "radius.xs",
+              states: {
+                default: {
+                  border: "1.5px solid neutral.warm[70]"
+                },
+                hover: {
+                  border: "1.5px solid primary.purple.base"
+                },
+                checked: {
+                  background: "primary.purple.base",
+                  icon: "white checkmark"
+                },
+                indeterminate: {
+                  background: "primary.purple.base",
+                  icon: "white dash"
+                },
+                disabled: {
+                  background: "neutral.warm[90]",
+                  border: "neutral.warm[80]",
+                  cursor: "not-allowed"
+                },
+                error: {
+                  border: "red.base"
+                }
+              }
+            },
+            label: "Right of control. Inter Regular (400), font.size.sm. Never above or below.",
+            groupSpacing: {
+              vertical: "spacing.2 between items",
+              horizontal: "spacing.4 gap"
+            }
+          },
+          table: {
+            container: {
+              background: "white",
+              radius: "radius.xl",
+              elevation: "elevation.md"
+            },
+            header: {
+              background: "neutral.warm[97]",
+              font: "Label/Small SemiBold (600)",
+              color: "neutral.warm[50]",
+              sortIcon: "Always visible. Active column: primary.purple.base"
+            },
+            rows: {
+              default: {
+                background: "white",
+                border: "1px solid neutral.warm[90] bottom"
+              },
+              hover: {
+                background: "primary.purple[98]"
+              },
+              selected: {
+                background: "primary.purple[95]",
+                leftAccent: "3px solid primary.purple.base"
+              }
+            },
+            cellTypes: {
+              text: "Left-aligned. Inter Regular (400), font.size.sm, neutral.warm[20].",
+              number: "Right-aligned. JetBrains Mono.",
+              status: "Centered. Tag component.",
+              actions: "Right-aligned. Icon buttons, visible on row hover. Max 3 \u2014 overflow to meatball menu."
+            },
+            sort: "Click cycles: ascending to descending to unsorted.",
+            emptyState: "Centered illustration + headline + optional CTA. Never headers-only without empty state component.",
+            pagination: {
+              rowsPerPage: [
+                10,
+                25,
+                50,
+                100
+              ],
+              display: "Showing {start}-{end} of {total}",
+              controls: "Prev/next arrows + page numbers"
+            }
+          },
+          tabs: {
+            containerBorder: "1px solid neutral.warm[85] bottom",
+            indicator: "2px solid primary.purple.base bottom, active tab only",
+            states: {
+              active: {
+                label: "primary.purple.base",
+                font: "Inter SemiBold (600)"
+              },
+              default: {
+                label: "neutral.warm[40]",
+                font: "Inter Medium (500)"
+              },
+              hover: {
+                label: "neutral.warm[20]"
+              },
+              disabled: {
+                label: "neutral.warm[70]",
+                cursor: "not-allowed"
+              }
+            },
+            badge: {
+              default: {
+                background: "neutral.warm[80]",
+                text: "neutral.warm[30]"
+              },
+              active: {
+                background: "primary.purple[90]",
+                text: "primary.purple.base"
+              }
+            },
+            maxVisible: "6 tabs before dropdown overflow. No horizontal scroll.",
+            style: "Indicator line only. Never filled/pill background tabs in main nav context."
           },
-          tabs: "Tabs use a bottom-border indicator in #8E42EE for the active state. Inactive tabs have no underline and use neutral text. Filled or pill-style tabs are not permitted in the main nav context.",
-          table_sort: "Sort controls in table headers show the sort icon alongside the label at all times \u2014 not only on hover.",
-          pagination: "Pagination uses the minimal numeric style with previous/next arrows. Always display the total dataset count alongside (e.g. 'Showing 1\u201325 of 345').",
-          sidebar_active_state: "Active sidebar nav item is indicated by a left-side purple pill/accent bar only. No background fill, icon color change, or text weight change. This is the only permitted active state pattern for sidebar nav.",
-          notification_badges: "Notification badges on sidebar icons use the red semantic color token. Small, circular, positioned top-right of the icon."
+          sidebarNav: {
+            background: "platform.sidebar.surfaces (#211D33)",
+            item: {
+              default: {
+                icon: "white",
+                label: "neutral.warm[70]",
+                padding: "spacing.3 vertical"
+              },
+              hover: {
+                background: "rgba(255,255,255,0.06)",
+                radius: "radius.sm"
+              },
+              active: {
+                leftAccent: "3px solid primary.purple[60]",
+                label: "white",
+                icon: "primary.purple[60]"
+              }
+            },
+            divider: "1px solid platform.sidebar.stroke (#433B60)",
+            iconSize: "20px. Always use PDS-Icon-Font-20 or SVG. Never emoji or text characters.",
+            notificationBadge: {
+              background: "red.base",
+              text: "white",
+              position: "top-right of icon",
+              maxDisplay: "99+"
+            },
+            collapseBehavior: "Never collapses to icon-only on desktop. Mobile: drawer/overlay."
+          },
+          breadcrumb: {
+            separator: "/ or > in neutral.warm[60], spacing.2 each side",
+            crumbs: {
+              nonCurrent: {
+                color: "primary.purple.base",
+                hoverDecoration: "underline"
+              },
+              current: {
+                color: "neutral.warm[30]",
+                interactive: "false"
+              }
+            },
+            font: "Inter Regular (400), font.size.sm",
+            maxDepth: "4 levels. Collapse middle levels to ellipsis if deeper."
+          },
+          modal: {
+            overlay: "rgba(0,0,0,0.4) full-screen",
+            container: {
+              background: "white",
+              radius: "radius.xl",
+              elevation: "elevation.lg",
+              border: "1px solid neutral.warm[85]"
+            },
+            sizes: {
+              popup: {
+                maxWidth: "480px",
+                scrollable: "false",
+                use: "Confirmations, quick forms"
+              },
+              modal: {
+                maxWidth: "720px",
+                maxHeight: "80vh",
+                bodyScrollable: "true",
+                use: "Complex forms, data views"
+              }
+            },
+            header: {
+              background: "primary.purple[98]",
+              padding: "spacing.4 spacing.5",
+              title: "Inter SemiBold (600), font.size.md, neutral.warm[10]",
+              closeButton: "Ghost icon button, top-right, always present"
+            },
+            body: {
+              background: "white",
+              padding: "spacing.5",
+              scrollbar: "Thin, primary.purple[60] track, visible during scroll only"
+            },
+            footer: {
+              padding: "spacing.4 spacing.5",
+              border: "1px solid neutral.warm[90] top",
+              alignment: "right",
+              buttonPattern: "Tertiary (ghost) + Primary (filled). Destructive: red Filled.",
+              note: "Never ghost for destructive actions."
+            },
+            animation: "200ms fade + subtle scale on open/close",
+            closing: "x button, overlay click (configurable), Escape key",
+            nesting: "Never nest modals. Use multi-step flow within same modal instead."
+          },
+          snackbar: {
+            position: "Bottom-right. Stacks upward if multiple queued.",
+            container: {
+              background: "white",
+              radius: "radius.md",
+              elevation: "elevation.md",
+              border: "1px solid neutral.warm[85]",
+              width: "320px-480px"
+            },
+            variants: {
+              default: {
+                icon: "none or neutral info icon"
+              },
+              success: {
+                icon: "green check-circle, green.base"
+              },
+              error: {
+                icon: "red error-circle, red.base"
+              },
+              warning: {
+                icon: "orange warning-triangle, orange.base"
+              }
+            },
+            sizes: {
+              compact: "Single line: icon + title + optional action + dismiss",
+              expanded: "Icon + title + body text + optional action + dismiss"
+            },
+            content: {
+              title: "Inter SemiBold (600), font.size.sm, neutral.warm[10]. Required.",
+              body: "Inter Regular (400), font.size.sm, neutral.warm[30]. Optional.",
+              action: "One maximum. Right-aligned text link, primary.purple.base. Style: Open / Undo / View.",
+              dismiss: "x ghost icon button, top-right. Always present."
+            },
+            autoDismiss: "Default/Success: 4 seconds. Error/Warning: manual dismiss only.",
+            background: "Always white. Never colored backgrounds \u2014 icon carries semantic meaning.",
+            persistence: "Not for persistent messages. Use top-of-content-area banner for those."
+          },
+          tooltip: {
+            variants: {
+              dark: {
+                background: "neutral.warm[-70]",
+                border: "none",
+                text: "white"
+              },
+              light: {
+                background: "white",
+                border: "1px solid neutral.warm[85]",
+                text: "neutral.warm[10]"
+              }
+            },
+            shared: {
+              radius: "radius.sm",
+              elevation: "elevation.sm",
+              padding: "spacing.1 spacing.2",
+              maxWidth: "200px",
+              font: "Inter Regular (400), font.size.xs"
+            },
+            arrow: "6px triangle pointing toward trigger. Matches tooltip background. 4 directions + alignment variants.",
+            trigger: "Hover or focus. 300ms appear delay. Immediate dismiss on mouse-out.",
+            usage: {
+              dark: "Default for icon-only triggers (sidebar icons, action buttons).",
+              light: "Longer descriptive text.",
+              restriction: "Supplementary labels only. Never for critical task information. Never interactive elements inside \u2014 use hover card instead."
+            }
+          },
+          hoverCard: {
+            trigger: "Hover over element (table cell, username, tag). 400ms delay.",
+            container: {
+              background: "white",
+              radius: "radius.lg",
+              elevation: "elevation.md",
+              border: "1px solid neutral.warm[85]",
+              width: "220px-320px"
+            },
+            header: "Title: Inter SemiBold (600), font.size.sm. Optional meatball menu icon button on right.",
+            body: "Inter Regular (400), font.size.sm, neutral.warm[20]. Short text, key-value pairs, or small list.",
+            footer: "None. Hover cards are read-only. Use popup for actions.",
+            arrow: "Optional. Use when card needs visual connection to trigger in dense layouts.",
+            dismiss: "On mouse-out (no delay) or when focus leaves."
+          },
+          commentThread: {
+            input: {
+              placeholder: "Enter your comment here.",
+              sendButton: "Icon button, primary.purple.base bg, white arrow icon, trailing. Active only when input non-empty.",
+              sendButtonDisabled: "Muted purple when empty."
+            },
+            postedComment: {
+              avatar: "User initials, primary.purple.base background, white text.",
+              header: "Display name (SemiBold) + timestamp (neutral.warm[50], font.size.xs) on one line.",
+              body: "Inter Regular (400), font.size.sm."
+            },
+            actions: "Thumbs-up + count, reply link. neutral.warm[50] default, primary.purple.base on hover.",
+            nesting: "Max 2 levels. Replies: left-indent with 2px solid neutral.warm[85] left border.",
+            highlighted: {
+              background: "primary.purple[95]",
+              border: "1px dashed primary.purple.base",
+              radius: "radius.md"
+            }
+          },
+          chartColors: {
+            sequence: [
+              {
+                index: 1,
+                color: "secondary.purple (tint)",
+                use: "First data series"
+              },
+              {
+                index: 2,
+                color: "orange.base",
+                use: "Second data series"
+              },
+              {
+                index: 3,
+                color: "pink.base",
+                use: "Third data series"
+              },
+              {
+                index: 4,
+                color: "cyan.base",
+                use: "Fourth data series"
+              },
+              {
+                index: 5,
+                color: "blue.base",
+                use: "Fifth data series"
+              },
+              {
+                index: 6,
+                color: "neutral.warm.base",
+                use: "Sixth data series"
+              },
+              {
+                index: 7,
+                color: "green.base",
+                use: "Seventh data series"
+              },
+              {
+                index: 8,
+                color: "neutral.orange",
+                use: "Eighth data series"
+              },
+              {
+                index: 9,
+                color: "red.base",
+                use: "Ninth data series"
+              }
+            ],
+            rules: [
+              "Apply colors in sequence. Do not skip or reorder.",
+              "Each color has a chart tint (~20% lightened) and an offset variant for comparison charts.",
+              "Chart colors for data visualisation only. Never repurpose for UI status.",
+              "More than 9 series: wrap palette at 0.6x opacity. Never invent new colors.",
+              "Minimum 3:1 contrast between adjacent chart segments."
+            ]
+          },
+          cliColors: {
+            sqlCLI: {
+              keywords: "secondary.purple[-20]",
+              comments: "orange[-20]",
+              strings: "pink[-30]",
+              numeralsDatetime: "cyan[-20]",
+              atoms: "blue[-20]",
+              generic: "neutral[-40]",
+              identifiers: "green[-30]",
+              brackets: "neutral.orange[-20]",
+              errorText: "red[-40]"
+            },
+            logCLI: {
+              background: "neutral[-70]",
+              debug: "cyan[40]",
+              warning: "orange[50]",
+              error: "pink[90]",
+              critical: "red[0]",
+              info: "green[50]",
+              regularText: "neutral[95]"
+            }
+          }
         },
         spacing: {
           card_padding: "Internal card padding uses spacing.4 (1rem) on all sides.",
@@ -1394,6 +1941,7 @@ var radiusFull = "9999px";
 // src/rules.ts
 var raw2 = require_pollymorph();
 var rules = raw2.rules;
+var componentRules = raw2.rules.components;
 var rulePrimaryPurple = raw2.rules.color.brand.primary_purple;
 var rulePrimaryOrange = raw2.rules.color.brand.primary_orange;
 var ruleNonBrandAccents = raw2.rules.color.brand.non_brand_accents;
@@ -1414,11 +1962,1148 @@ var ruleFontMixing = raw2.rules.typography.font_families.mixing_rule;
 var rulePageStructure = raw2.rules.layout.page_structure;
 var ruleCards = raw2.rules.layout.cards;
 var ruleTables = raw2.rules.layout.tables;
-var ruleButtonPrimary = raw2.rules.components.buttons.primary;
-var ruleButtonSecondary = raw2.rules.components.buttons.secondary;
+var ruleButton = raw2.rules.components.button;
+var ruleTag = raw2.rules.components.tag;
+var ruleTextInput = raw2.rules.components.textInput;
+var ruleSelection = raw2.rules.components.selectionControl;
+var ruleTable = raw2.rules.components.table;
 var ruleTabs = raw2.rules.components.tabs;
-var ruleSidebarActiveState = raw2.rules.components.sidebar_active_state;
-var rulePagination = raw2.rules.components.pagination;
+var ruleSidebarNav = raw2.rules.components.sidebarNav;
+var ruleBreadcrumb = raw2.rules.components.breadcrumb;
+var ruleModal = raw2.rules.components.modal;
+var ruleSnackbar = raw2.rules.components.snackbar;
+var ruleTooltip = raw2.rules.components.tooltip;
+var ruleHoverCard = raw2.rules.components.hoverCard;
+var ruleCommentThread = raw2.rules.components.commentThread;
+var ruleChartColors = raw2.rules.components.chartColors;
+var ruleCLIColors = raw2.rules.components.cliColors;
+
+// src/icons.ts
+var icons = [
+  {
+    "num": 1,
+    "name": "meatballsSettings",
+    "codepoint": "U+E900",
+    "unicode": "\uE900",
+    "inFont": true
+  },
+  {
+    "num": 2,
+    "name": "addToShortlist",
+    "codepoint": "U+E901",
+    "unicode": "\uE901",
+    "inFont": true
+  },
+  {
+    "num": 3,
+    "name": "shortlist",
+    "codepoint": "U+E902",
+    "unicode": "\uE902",
+    "inFont": true
+  },
+  {
+    "num": 4,
+    "name": "uploadFile",
+    "codepoint": "U+E903",
+    "unicode": "\uE903",
+    "inFont": true
+  },
+  {
+    "num": 5,
+    "name": "downloadFile",
+    "codepoint": "U+E904",
+    "unicode": "\uE904",
+    "inFont": true
+  },
+  {
+    "num": 6,
+    "name": "edit",
+    "codepoint": "U+E905",
+    "unicode": "\uE905",
+    "inFont": true
+  },
+  {
+    "num": 7,
+    "name": "duplicateOrCopy",
+    "codepoint": "U+E906",
+    "unicode": "\uE906",
+    "inFont": true
+  },
+  {
+    "num": 8,
+    "name": "print",
+    "codepoint": "U+E907",
+    "unicode": "\uE907",
+    "inFont": true
+  },
+  {
+    "num": 9,
+    "name": "openInNewWindow",
+    "codepoint": "U+E908",
+    "unicode": "\uE908",
+    "inFont": true
+  },
+  {
+    "num": 10,
+    "name": "tableEditor",
+    "codepoint": "U+E909",
+    "unicode": "\uE909",
+    "inFont": true
+  },
+  {
+    "num": 11,
+    "name": "tableSort",
+    "codepoint": "U+E90A",
+    "unicode": "\uE90A",
+    "inFont": true
+  },
+  {
+    "num": 12,
+    "name": "save",
+    "codepoint": "U+E90B",
+    "unicode": "\uE90B",
+    "inFont": true
+  },
+  {
+    "num": 13,
+    "name": "delete",
+    "codepoint": "U+E90C",
+    "unicode": "\uE90C",
+    "inFont": true
+  },
+  {
+    "num": 14,
+    "name": "openFolder",
+    "codepoint": "U+E90D",
+    "unicode": "\uE90D",
+    "inFont": true
+  },
+  {
+    "num": 15,
+    "name": "analyse",
+    "codepoint": "U+E90E",
+    "unicode": "\uE90E",
+    "inFont": true
+  },
+  {
+    "num": 16,
+    "name": "starEmpty",
+    "codepoint": "U+E90F",
+    "unicode": "\uE90F",
+    "inFont": true
+  },
+  {
+    "num": 17,
+    "name": "filter",
+    "codepoint": "U+E910",
+    "unicode": "\uE910",
+    "inFont": true
+  },
+  {
+    "num": 18,
+    "name": "add",
+    "codepoint": "U+E911",
+    "unicode": "\uE911",
+    "inFont": true
+  },
+  {
+    "num": 19,
+    "name": "contract",
+    "codepoint": "U+E912",
+    "unicode": "\uE912",
+    "inFont": true
+  },
+  {
+    "num": 20,
+    "name": "expand",
+    "codepoint": "U+E913",
+    "unicode": "\uE913",
+    "inFont": true
+  },
+  {
+    "num": 21,
+    "name": "close",
+    "codepoint": "U+E914",
+    "unicode": "\uE914",
+    "inFont": true
+  },
+  {
+    "num": 22,
+    "name": "upChevron",
+    "codepoint": "U+E915",
+    "unicode": "\uE915",
+    "inFont": true
+  },
+  {
+    "num": 23,
+    "name": "leftChevron",
+    "codepoint": "U+E916",
+    "unicode": "\uE916",
+    "inFont": true
+  },
+  {
+    "num": 24,
+    "name": "rightChevron",
+    "codepoint": "U+E917",
+    "unicode": "\uE917",
+    "inFont": true
+  },
+  {
+    "num": 25,
+    "name": "expandChevron",
+    "codepoint": "U+E918",
+    "unicode": "\uE918",
+    "inFont": true
+  },
+  {
+    "num": 26,
+    "name": "upCarrot",
+    "codepoint": "U+E919",
+    "unicode": "\uE919",
+    "inFont": true
+  },
+  {
+    "num": 27,
+    "name": "leftCarrot",
+    "codepoint": "U+E91A",
+    "unicode": "\uE91A",
+    "inFont": true
+  },
+  {
+    "num": 28,
+    "name": "rightCarrot",
+    "codepoint": "U+E91B",
+    "unicode": "\uE91B",
+    "inFont": true
+  },
+  {
+    "num": 29,
+    "name": "downCarrot",
+    "codepoint": "U+E91C",
+    "unicode": "\uE91C",
+    "inFont": true
+  },
+  {
+    "num": 30,
+    "name": "arrowUp",
+    "codepoint": "U+E91D",
+    "unicode": "\uE91D",
+    "inFont": true
+  },
+  {
+    "num": 31,
+    "name": "arrowLeftBack",
+    "codepoint": "U+E91E",
+    "unicode": "\uE91E",
+    "inFont": true
+  },
+  {
+    "num": 32,
+    "name": "arrowRightForward",
+    "codepoint": "U+E91F",
+    "unicode": "\uE91F",
+    "inFont": true
+  },
+  {
+    "num": 33,
+    "name": "arrowDown",
+    "codepoint": "U+E920",
+    "unicode": "\uE920",
+    "inFont": true
+  },
+  {
+    "num": 34,
+    "name": "northEast",
+    "codepoint": "U+E921",
+    "unicode": "\uE921",
+    "inFont": true
+  },
+  {
+    "num": 35,
+    "name": "northWest",
+    "codepoint": "U+E922",
+    "unicode": "\uE922",
+    "inFont": true
+  },
+  {
+    "num": 36,
+    "name": "southEast",
+    "codepoint": "U+E923",
+    "unicode": "\uE923",
+    "inFont": true
+  },
+  {
+    "num": 37,
+    "name": "southWest",
+    "codepoint": "U+E924",
+    "unicode": "\uE924",
+    "inFont": true
+  },
+  {
+    "num": 38,
+    "name": "arrowForwardLarge",
+    "codepoint": "U+E925",
+    "unicode": "\uE925",
+    "inFont": true
+  },
+  {
+    "num": 39,
+    "name": "arrowBackLarge",
+    "codepoint": "U+E926",
+    "unicode": "\uE926",
+    "inFont": true
+  },
+  {
+    "num": 40,
+    "name": "skipToFirst",
+    "codepoint": "U+E927",
+    "unicode": "\uE927",
+    "inFont": true
+  },
+  {
+    "num": 41,
+    "name": "skipToLast",
+    "codepoint": "U+E928",
+    "unicode": "\uE928",
+    "inFont": true
+  },
+  {
+    "num": 42,
+    "name": "starFull",
+    "codepoint": "U+E929",
+    "unicode": "\uE929",
+    "inFont": true
+  },
+  {
+    "num": 43,
+    "name": "visibilityOn",
+    "codepoint": "U+E92A",
+    "unicode": "\uE92A",
+    "inFont": true
+  },
+  {
+    "num": 44,
+    "name": "visibilityOff",
+    "codepoint": "U+E92B",
+    "unicode": "\uE92B",
+    "inFont": true
+  },
+  {
+    "num": 45,
+    "name": "pinned",
+    "codepoint": "U+E92C",
+    "unicode": "\uE92C",
+    "inFont": true
+  },
+  {
+    "num": 46,
+    "name": "pin",
+    "codepoint": "U+E92D",
+    "unicode": "\uE92D",
+    "inFont": true
+  },
+  {
+    "num": 47,
+    "name": "starHalf",
+    "codepoint": "U+E92E",
+    "unicode": "\uE92E",
+    "inFont": true
+  },
+  {
+    "num": 48,
+    "name": "previousArrow",
+    "codepoint": "U+E92F",
+    "unicode": "\uE92F",
+    "inFont": true
+  },
+  {
+    "num": 49,
+    "name": "nextArrow",
+    "codepoint": "U+E930",
+    "unicode": "\uE930",
+    "inFont": true
+  },
+  {
+    "num": 50,
+    "name": "folderOpen",
+    "codepoint": "U+E931",
+    "unicode": "\uE931",
+    "inFont": true
+  },
+  {
+    "num": 51,
+    "name": "folder",
+    "codepoint": "U+E932",
+    "unicode": "\uE932",
+    "inFont": true
+  },
+  {
+    "num": 52,
+    "name": "createNewFolder",
+    "codepoint": "U+E933",
+    "unicode": "\uE933",
+    "inFont": true
+  },
+  {
+    "num": 53,
+    "name": "uploadFolder",
+    "codepoint": "U+E934",
+    "unicode": "\uE934",
+    "inFont": true
+  },
+  {
+    "num": 54,
+    "name": "archive",
+    "codepoint": "U+E935",
+    "unicode": "\uE935",
+    "inFont": true
+  },
+  {
+    "num": 55,
+    "name": "unarchive",
+    "codepoint": "U+E936",
+    "unicode": "\uE936",
+    "inFont": true
+  },
+  {
+    "num": 56,
+    "name": "link",
+    "codepoint": "U+E937",
+    "unicode": "\uE937",
+    "inFont": true
+  },
+  {
+    "num": 57,
+    "name": "done",
+    "codepoint": "U+E938",
+    "unicode": "\uE938",
+    "inFont": true
+  },
+  {
+    "num": 58,
+    "name": "chartIcon",
+    "codepoint": "U+E939",
+    "unicode": "\uE939",
+    "inFont": true
+  },
+  {
+    "num": 59,
+    "name": "document",
+    "codepoint": "U+E93A",
+    "unicode": "\uE93A",
+    "inFont": true
+  },
+  {
+    "num": 60,
+    "name": "codeDocument",
+    "codepoint": "U+E93B",
+    "unicode": "\uE93B",
+    "inFont": true
+  },
+  {
+    "num": 61,
+    "name": "info",
+    "codepoint": "U+E93C",
+    "unicode": "\uE93C",
+    "inFont": true
+  },
+  {
+    "num": 62,
+    "name": "swap",
+    "codepoint": "U+E93D",
+    "unicode": "\uE93D",
+    "inFont": true
+  },
+  {
+    "num": 63,
+    "name": "description",
+    "codepoint": "U+E93E",
+    "unicode": "\uE93E",
+    "inFont": true
+  },
+  {
+    "num": 64,
+    "name": "history",
+    "codepoint": "U+E93F",
+    "unicode": "\uE93F",
+    "inFont": true
+  },
+  {
+    "num": 65,
+    "name": "rename",
+    "codepoint": "U+E940",
+    "unicode": "\uE940",
+    "inFont": true
+  },
+  {
+    "num": 66,
+    "name": "panMove",
+    "codepoint": "U+E941",
+    "unicode": "\uE941",
+    "inFont": true
+  },
+  {
+    "num": 67,
+    "name": "github",
+    "codepoint": "U+E942",
+    "unicode": "\uE942",
+    "inFont": true
+  },
+  {
+    "num": 68,
+    "name": "curation",
+    "codepoint": "U+E943",
+    "unicode": "\uE943",
+    "inFont": true
+  },
+  {
+    "num": 69,
+    "name": "helpAndSupport",
+    "codepoint": "U+E944",
+    "unicode": "\uE944",
+    "inFont": true
+  },
+  {
+    "num": 70,
+    "name": "userProfile",
+    "codepoint": "U+E945",
+    "unicode": "\uE945",
+    "inFont": true
+  },
+  {
+    "num": 71,
+    "name": "settings",
+    "codepoint": "U+E946",
+    "unicode": "\uE946",
+    "inFont": true
+  },
+  {
+    "num": 72,
+    "name": "notification",
+    "codepoint": "U+E947",
+    "unicode": "\uE947",
+    "inFont": true
+  },
+  {
+    "num": 73,
+    "name": "ingestion",
+    "codepoint": "U+E948",
+    "unicode": "\uE948",
+    "inFont": true
+  },
+  {
+    "num": 74,
+    "name": "omixLogoSimple",
+    "codepoint": "U+E949",
+    "unicode": "\uE949",
+    "inFont": true
+  },
+  {
+    "num": 75,
+    "name": "workspaces",
+    "codepoint": "U+E94A",
+    "unicode": "\uE94A",
+    "inFont": true
+  },
+  {
+    "num": 76,
+    "name": "application",
+    "codepoint": "U+E94B",
+    "unicode": "\uE94B",
+    "inFont": true
+  },
+  {
+    "num": 77,
+    "name": "usersOA",
+    "codepoint": "U+E94C",
+    "unicode": "\uE94C",
+    "inFont": true
+  },
+  {
+    "num": 78,
+    "name": "admin",
+    "codepoint": "U+E94D",
+    "unicode": "\uE94D",
+    "inFont": true
+  },
+  {
+    "num": 79,
+    "name": "costWallet",
+    "codepoint": "U+E94E",
+    "unicode": "\uE94E",
+    "inFont": true
+  },
+  {
+    "num": 80,
+    "name": "splitView",
+    "codepoint": "U+E94F",
+    "unicode": "\uE94F",
+    "inFont": true
+  },
+  {
+    "num": 81,
+    "name": "summaryView",
+    "codepoint": "U+E9B0",
+    "unicode": "\uE9B0",
+    "inFont": true,
+    "codepointUnverified": true
+  },
+  {
+    "num": 82,
+    "name": "listView",
+    "codepoint": "U+E9B1",
+    "unicode": "\uE9B1",
+    "inFont": true,
+    "codepointUnverified": true
+  },
+  {
+    "num": 83,
+    "name": "cardView",
+    "codepoint": "U+E9B2",
+    "unicode": "\uE9B2",
+    "inFont": true,
+    "codepointUnverified": true
+  },
+  {
+    "num": 84,
+    "name": "tableView",
+    "codepoint": "U+E9B3",
+    "unicode": "\uE9B3",
+    "inFont": true,
+    "codepointUnverified": true
+  },
+  {
+    "num": 85,
+    "name": "cancelRound",
+    "codepoint": "U+E9B4",
+    "unicode": "\uE9B4",
+    "inFont": true,
+    "codepointUnverified": true
+  },
+  {
+    "num": 86,
+    "name": "userSingle",
+    "codepoint": "U+E9B5",
+    "unicode": "\uE9B5",
+    "inFont": true,
+    "codepointUnverified": true
+  },
+  {
+    "num": 87,
+    "name": "addUser",
+    "codepoint": "U+E9B6",
+    "unicode": "\uE9B6",
+    "inFont": true,
+    "codepointUnverified": true
+  },
+  {
+    "num": 88,
+    "name": "calendarEvent",
+    "codepoint": "U+E9B7",
+    "unicode": "\uE9B7",
+    "inFont": true,
+    "codepointUnverified": true
+  },
+  {
+    "num": 89,
+    "name": "calendarEmpty",
+    "codepoint": "U+E9B8",
+    "unicode": "\uE9B8",
+    "inFont": true,
+    "codepointUnverified": true
+  },
+  {
+    "num": 90,
+    "name": "calendarMonth",
+    "inFont": false
+  },
+  {
+    "num": 91,
+    "name": "alarm",
+    "inFont": false
+  },
+  {
+    "num": 92,
+    "name": "loadingIcon",
+    "inFont": false
+  },
+  {
+    "num": 93,
+    "name": "search",
+    "inFont": false
+  },
+  {
+    "num": 94,
+    "name": "dragHandle",
+    "inFont": false
+  },
+  {
+    "num": 95,
+    "name": "sortAscending",
+    "inFont": false
+  },
+  {
+    "num": 96,
+    "name": "sortDescending",
+    "inFont": false
+  },
+  {
+    "num": 97,
+    "name": "emptyFlag",
+    "inFont": false
+  },
+  {
+    "num": 98,
+    "name": "filledFlag",
+    "inFont": false
+  },
+  {
+    "num": 99,
+    "name": "refreshIcon",
+    "inFont": false
+  },
+  {
+    "num": 100,
+    "name": "pollyFlow",
+    "inFont": false
+  },
+  {
+    "num": 101,
+    "name": "pollyPipelines",
+    "inFont": false
+  },
+  {
+    "num": 102,
+    "name": "hamburgerMenuToggle",
+    "inFont": false
+  },
+  {
+    "num": 103,
+    "name": "hamburgerMenu",
+    "inFont": false
+  },
+  {
+    "num": 104,
+    "name": "checkBoxSelected",
+    "inFont": false
+  },
+  {
+    "num": 105,
+    "name": "checkBoxIndeterminate",
+    "inFont": false
+  },
+  {
+    "num": 106,
+    "name": "addReport",
+    "inFont": false
+  },
+  {
+    "num": 107,
+    "name": "viewReport",
+    "inFont": false
+  },
+  {
+    "num": 108,
+    "name": "key",
+    "inFont": false
+  },
+  {
+    "num": 109,
+    "name": "databaseIcon",
+    "inFont": false
+  },
+  {
+    "num": 110,
+    "name": "databaseSettings",
+    "inFont": false
+  },
+  {
+    "num": 111,
+    "name": "databaseEditIcon",
+    "inFont": false
+  },
+  {
+    "num": 112,
+    "name": "databaseAddIcon",
+    "inFont": false
+  },
+  {
+    "num": 113,
+    "name": "frameworkOntologyFlowchart",
+    "inFont": false
+  },
+  {
+    "num": 114,
+    "name": "thumbUpFilled",
+    "inFont": false
+  },
+  {
+    "num": 115,
+    "name": "thumbUp",
+    "inFont": false
+  },
+  {
+    "num": 116,
+    "name": "thumbDownFilled",
+    "inFont": false
+  },
+  {
+    "num": 117,
+    "name": "thumbDown",
+    "inFont": false
+  },
+  {
+    "num": 118,
+    "name": "mailIcon",
+    "inFont": false
+  },
+  {
+    "num": 119,
+    "name": "reply",
+    "inFont": false
+  },
+  {
+    "num": 120,
+    "name": "send",
+    "inFont": false
+  },
+  {
+    "num": 121,
+    "name": "chatIcon",
+    "inFont": false
+  },
+  {
+    "num": 122,
+    "name": "comment",
+    "inFont": false
+  },
+  {
+    "num": 123,
+    "name": "editTableIcon",
+    "inFont": false
+  },
+  {
+    "num": 124,
+    "name": "addTable",
+    "inFont": false
+  },
+  {
+    "num": 125,
+    "name": "editTableRow",
+    "inFont": false
+  },
+  {
+    "num": 126,
+    "name": "addTableRow",
+    "inFont": false
+  },
+  {
+    "num": 127,
+    "name": "editTableColumn",
+    "inFont": false
+  },
+  {
+    "num": 128,
+    "name": "addTableColumn",
+    "inFont": false
+  },
+  {
+    "num": 129,
+    "name": "dashboardIcon",
+    "inFont": false
+  },
+  {
+    "num": 130,
+    "name": "organisationIcon",
+    "inFont": false
+  },
+  {
+    "num": 131,
+    "name": "detailsIcons",
+    "inFont": false
+  },
+  {
+    "num": 132,
+    "name": "userGroups",
+    "inFont": false
+  },
+  {
+    "num": 133,
+    "name": "foreignKey",
+    "inFont": false
+  },
+  {
+    "num": 134,
+    "name": "blockCancelled",
+    "inFont": false
+  },
+  {
+    "num": 135,
+    "name": "hourglassRunning",
+    "inFont": false
+  },
+  {
+    "num": 136,
+    "name": "checkCircleDone",
+    "inFont": false
+  },
+  {
+    "num": 137,
+    "name": "warning",
+    "inFont": false
+  },
+  {
+    "num": 138,
+    "name": "cohorts",
+    "inFont": false
+  },
+  {
+    "num": 139,
+    "name": "medicine",
+    "inFont": false
+  },
+  {
+    "num": 140,
+    "name": "aiIcon",
+    "inFont": false
+  },
+  {
+    "num": 141,
+    "name": "aiKnowledge",
+    "inFont": false
+  },
+  {
+    "num": 142,
+    "name": "aiInsights",
+    "inFont": false
+  },
+  {
+    "num": 143,
+    "name": "dataProductIcon",
+    "inFont": false
+  },
+  {
+    "num": 144,
+    "name": "performance",
+    "inFont": false
+  },
+  {
+    "num": 145,
+    "name": "collections",
+    "inFont": false
+  },
+  {
+    "num": 146,
+    "name": "config",
+    "inFont": false
+  },
+  {
+    "num": 147,
+    "name": "reviewerTasks",
+    "inFont": false
+  },
+  {
+    "num": 148,
+    "name": "chatHistory",
+    "inFont": false
+  },
+  {
+    "num": 149,
+    "name": "shareIcon",
+    "inFont": false
+  },
+  {
+    "num": 150,
+    "name": "collectionsAlt",
+    "inFont": false
+  },
+  {
+    "num": 151,
+    "name": "reviewerTasksAlt",
+    "inFont": false
+  },
+  {
+    "num": 152,
+    "name": "pollyScout",
+    "inFont": false
+  },
+  {
+    "num": 153,
+    "name": "pendingTasks",
+    "inFont": false
+  },
+  {
+    "num": 154,
+    "name": "pollyXtract",
+    "inFont": false
+  },
+  {
+    "num": 155,
+    "name": "logout",
+    "inFont": false
+  },
+  {
+    "num": 156,
+    "name": "login",
+    "inFont": false
+  },
+  {
+    "num": 157,
+    "name": "mic",
+    "inFont": false
+  },
+  {
+    "num": 158,
+    "name": "micOff",
+    "inFont": false
+  },
+  {
+    "num": 159,
+    "name": "attach",
+    "inFont": false
+  },
+  {
+    "num": 160,
+    "name": "aiInsight",
+    "inFont": false
+  },
+  {
+    "num": 161,
+    "name": "pollyKG",
+    "inFont": false
+  },
+  {
+    "num": 162,
+    "name": "video",
+    "inFont": false
+  },
+  {
+    "num": 163,
+    "name": "files",
+    "inFont": false
+  },
+  {
+    "num": 164,
+    "name": "audio",
+    "inFont": false
+  },
+  {
+    "num": 165,
+    "name": "camera",
+    "inFont": false
+  },
+  {
+    "num": 166,
+    "name": "images",
+    "inFont": false
+  },
+  {
+    "num": 167,
+    "name": "pollyPipelinesAlt",
+    "inFont": false
+  },
+  {
+    "num": 168,
+    "name": "coScientistIcon",
+    "inFont": false
+  },
+  {
+    "num": 169,
+    "name": "youtubeSearchedFor",
+    "inFont": false
+  },
+  {
+    "num": 170,
+    "name": "zoomIn",
+    "inFont": false
+  },
+  {
+    "num": 171,
+    "name": "zoomOut",
+    "inFont": false
+  },
+  {
+    "num": 172,
+    "name": "addCircle",
+    "inFont": false
+  },
+  {
+    "num": 173,
+    "name": "addCircleOutline",
+    "inFont": false
+  },
+  {
+    "num": 174,
+    "name": "remove",
+    "inFont": false
+  },
+  {
+    "num": 175,
+    "name": "removeCircle",
+    "inFont": false
+  },
+  {
+    "num": 176,
+    "name": "removeCircleOutline",
+    "inFont": false
+  },
+  {
+    "num": 177,
+    "name": "playArrow",
+    "inFont": false
+  },
+  {
+    "num": 178,
+    "name": "pause",
+    "inFont": false
+  },
+  {
+    "num": 179,
+    "name": "stop",
+    "inFont": false
+  },
+  {
+    "num": 180,
+    "name": "playCircle",
+    "inFont": false
+  },
+  {
+    "num": 181,
+    "name": "pauseCircle",
+    "inFont": false
+  },
+  {
+    "num": 182,
+    "name": "stopCircle",
+    "inFont": false
+  },
+  {
+    "num": 183,
+    "name": "replay",
+    "inFont": false
+  },
+  {
+    "num": 184,
+    "name": "loopRefreshUpdate",
+    "inFont": false
+  },
+  {
+    "num": 185,
+    "name": "forward",
+    "inFont": false
+  }
+];
+var fontIcons = icons.filter((i) => i.inFont);
+var svgIcons = icons.filter((i) => !i.inFont);
+function getIcon(name) {
+  return icons.find((i) => i.name === name);
+}
+function getIconChar(name) {
+  return icons.find((i) => i.name === name)?.unicode;
+}
+var iconCharMap = Object.fromEntries(
+  icons.filter((i) => i.inFont && i.unicode).map((i) => [i.name, i.unicode])
+);
 
 // src/index.ts
 var raw3 = require_pollymorph();
@@ -1452,18 +3137,24 @@ export {
   colorSidebarStroke,
   colorWhite,
   colorYellow,
+  componentRules,
   src_default as default,
   fontFamilyBase,
   fontFamilyGrotesk,
   fontFamilyIcon,
   fontFamilyInter,
   fontFamilyJetbrains,
+  fontIcons,
   fontWeightBold,
   fontWeightExtraThick,
   fontWeightMedium,
   fontWeightNormal,
   fontWeightSemiBold,
   fontWeightThick,
+  getIcon,
+  getIconChar,
+  iconCharMap,
+  icons,
   radius2xl,
   radiusFull,
   radiusLg,
@@ -1471,31 +3162,41 @@ export {
   radiusNone,
   radiusSm,
   radiusXl,
-  ruleButtonPrimary,
-  ruleButtonSecondary,
+  ruleBreadcrumb,
+  ruleButton,
+  ruleCLIColors,
   ruleCardBg,
   ruleCards,
+  ruleChartColors,
+  ruleCommentThread,
   ruleFontInter,
   ruleFontMixing,
   ruleFontMono,
   ruleFontSpaceGrotesk,
+  ruleHoverCard,
   ruleInteractiveLinks,
+  ruleModal,
   ruleMutedText,
   ruleNonBrandAccents,
   rulePageStructure,
-  rulePagination,
   rulePlatformSurface,
   rulePrimaryOrange,
   rulePrimaryPurple,
-  ruleSidebarActiveState,
+  ruleSelection,
   ruleSidebarBg,
+  ruleSidebarNav,
   ruleSidebarStroke,
+  ruleSnackbar,
   ruleStatusBlue,
   ruleStatusGreen,
   ruleStatusRed,
   ruleStatusYellow,
+  ruleTable,
   ruleTables,
   ruleTabs,
+  ruleTag,
+  ruleTextInput,
+  ruleTooltip,
   rules,
   spacing0,
   spacing1,
@@ -1508,6 +3209,7 @@ export {
   spacing5,
   spacing6,
   spacing8,
+  svgIcons,
   tokens
 };
 //# sourceMappingURL=index.mjs.map