From 9dd642421988a383acacc35318521fd298629697 Mon Sep 17 00:00:00 2001
From: Ethan Chennault <ethanolchennault@gmail.com>
Date: Wed, 8 Apr 2026 16:36:52 -0700
Subject: [PATCH 1/8] Refactor React button and icon button's prop interface

Now conforms with other components. Also fixed icon button square styling issue.
---
 packages/ui-css/src/components/button.css     | 24 ++++----
 .../ui-css/src/components/icon-button.css     | 10 +++-
 .../src/components/PktsButton/PktsButton.tsx  | 46 ++++++---------
 .../components/PktsButton/PktsButton.types.ts | 34 +++++++----
 .../PktsButton/__tests__/PktsButton.test.tsx  | 28 +--------
 .../PktsIconButton/PktsIconButton.tsx         | 20 +++----
 .../PktsIconButton/PktsIconButton.types.ts    | 58 ++++++-------------
 7 files changed, 90 insertions(+), 130 deletions(-)

diff --git a/packages/ui-css/src/components/button.css b/packages/ui-css/src/components/button.css
index ec96e47c..ee8223bd 100644
--- a/packages/ui-css/src/components/button.css
+++ b/packages/ui-css/src/components/button.css
@@ -4,8 +4,6 @@
 
    Base styles for button component. Variants are applied via composable classes:
    - Color variants: .pkts-primary, .pkts-secondary, .pkts-tertiary, .pkts-destructive, .pkts-branded
-   - Size variants: .pkts-medium, .pkts-xxlarge
-   - Layout variants: .pkts-fill, .pkts-nofill
 
    Usage: <button class="pkts-button es-primary es-medium">
 */
@@ -61,16 +59,18 @@ a.pkts-button {
     box-shadow ease-in-out var(--esnet-time-duration-quick, 250ms);
 }
 
-  /* Pseudo-events */
+/* Pseudo-events */
 
-  .pkts-button:hover, a.pkts-button:hover {
-    cursor: pointer;
-    box-shadow: var(--esnet-box-shadow-core-medium);
+.pkts-button:hover,
+a.pkts-button:hover {
+  cursor: pointer;
+  box-shadow: var(--esnet-box-shadow-core-medium);
 
-    padding: var(--esnet-size-border-width-medium, 4px)
-      var(--esnet-size-spacing-medium, 16px);
-  }
+  padding: var(--esnet-size-border-width-medium, 4px)
+    var(--esnet-size-spacing-medium, 16px);
+}
 
-  .pkts-button:disabled, a.pkts-button:disabled {
-    cursor: not-allowed;
-  }
+.pkts-button:disabled,
+a.pkts-button:disabled {
+  cursor: not-allowed;
+}
diff --git a/packages/ui-css/src/components/icon-button.css b/packages/ui-css/src/components/icon-button.css
index e27ba16b..31770fa1 100644
--- a/packages/ui-css/src/components/icon-button.css
+++ b/packages/ui-css/src/components/icon-button.css
@@ -4,8 +4,7 @@
 
    Base styles for icon button component. Variants are applied via composable classes:
    - Color variants: .pkts-primary, .pkts-secondary, .pkts-tertiary, .pkts-destructive, .pkts-branded
-   - Size variants: .pkts-medium, .pkts-xxlarge
-   - Layout variants: .pkts-fill, .pkts-nofill, .pkts-square
+   - Layout variants: .pkts-square
 
    Usage: <button class="pkts-icon-button es-primary es-medium">
 */
@@ -58,3 +57,10 @@
 .pkts-icon-button:disabled {
   cursor: not-allowed;
 }
+
+/* Square variant — equal width and height, no horizontal padding, circular border-radius */
+.pkts-icon-button.pkts-square {
+  border-radius: var(--esnet-size-radius-circle, 999px);
+  width: var(--spacing-height-medium);
+  padding: 0;
+}
diff --git a/packages/ui-react/src/components/PktsButton/PktsButton.tsx b/packages/ui-react/src/components/PktsButton/PktsButton.tsx
index a78b3b5c..1c681156 100644
--- a/packages/ui-react/src/components/PktsButton/PktsButton.tsx
+++ b/packages/ui-react/src/components/PktsButton/PktsButton.tsx
@@ -1,46 +1,37 @@
-import React from "react";
+import * as React from "react";
 import clsx from "clsx";
-import { PktsButtonDefaultAsType, PktsButtonProps } from "./PktsButton.types";
+import { PktsButtonProps } from "./PktsButton.types";
 
-// TODO: ensure this still works
 /**
- * Button - An extension of a HTML button that comes with different levels of action/intent.
+ * Button - An extension of a HTML button (or anchor, styled as a button)
+ * that comes with different levels of action/intent.
  *
  * @param {PktsButtonProps} props
- * @returns {React.FunctionComponent}
+ * @returns {React.ReactElement}
  */
-const PktsButton = <
-  E extends React.ElementType = typeof PktsButtonDefaultAsType,
->({
+const PktsButton: React.FC<PktsButtonProps> = ({
   variant = "secondary",
-  children = "",
-  fill = true,
-  disabled = false,
-  prepend = null,
-  size = "medium",
-  as,
+  as = "button",
   className,
-  append = null,
-  ...other
-}: PktsButtonProps<E>): JSX.Element => {
-  const Tag = as || PktsButtonDefaultAsType;
-
+  prepend,
+  append,
+  children,
+  ...props
+}) => {
+  const Tag = as as React.ElementType;
   return (
     <Tag
       className={clsx(
         "pkts-button",
         `pkts-${variant}`,
-        fill ? "pkts-fill" : "pkts-nofill",
-        size && `pkts-${size}`,
         className,
       )}
-      type="button"
-      disabled={disabled}
-      {...other}
+      {...(as === "button" && { type: "button" })}
+      {...props}
     >
-      <>{prepend}</>
+      {prepend}
       {children}
-      <>{append}</>
+      {append}
     </Tag>
   );
 };
@@ -48,6 +39,3 @@ const PktsButton = <
 PktsButton.displayName = "PktsButton";
 
 export default PktsButton;
-
-// TODO: convert this to use discriminated union and React.FC
-// see previous commits
diff --git a/packages/ui-react/src/components/PktsButton/PktsButton.types.ts b/packages/ui-react/src/components/PktsButton/PktsButton.types.ts
index bfad4ce1..18712103 100644
--- a/packages/ui-react/src/components/PktsButton/PktsButton.types.ts
+++ b/packages/ui-react/src/components/PktsButton/PktsButton.types.ts
@@ -1,16 +1,26 @@
-export const PktsButtonDefaultAsType = "button" as const;
+import * as React from "react";
 
-export type ButtonOwnProps<E extends React.ElementType> = {
-  children: React.ReactNode;
-  className?: string;
-  variant: "primary" | "secondary" | "branded" | "tertiary" | "destructive"; // Type of Button
-  size?: "medium" | "xxlarge";
-  prepend?: React.ReactNode;
+type PktsButtonVariantType = "primary" | "secondary" | "branded" | "tertiary" | "destructive";
+
+type PktsButtonCustomProps = {
+  /** Variant that affects color styling. */
+  variant?: PktsButtonVariantType;
+  /** Element to render before the button label. Typically an icon or avatar. */
   append?: React.ReactNode;
-  fill?: boolean;
-  disabled?: boolean;
-  as?: E;
+  /** Element to render after the button label. Typically an icon or avatar. */
+  prepend?: React.ReactNode;
+  /** Button label content. */
+  children: React.ReactNode;
 };
 
-export type PktsButtonProps<E extends React.ElementType> = ButtonOwnProps<E> &
-  Omit<React.ComponentProps<E>, keyof ButtonOwnProps<E>>;
+type AsButtonProps = {
+  /** Render as a native button element (default). */
+  as?: "button";
+} & React.ComponentPropsWithoutRef<"button">;
+
+type AsAnchorProps = {
+  /** Render as an anchor element, styled as a button. */
+  as: "a";
+} & React.ComponentPropsWithoutRef<"a">;
+
+export type PktsButtonProps = PktsButtonCustomProps & (AsButtonProps | AsAnchorProps);
diff --git a/packages/ui-react/src/components/PktsButton/__tests__/PktsButton.test.tsx b/packages/ui-react/src/components/PktsButton/__tests__/PktsButton.test.tsx
index 0f903a6c..5770cc07 100644
--- a/packages/ui-react/src/components/PktsButton/__tests__/PktsButton.test.tsx
+++ b/packages/ui-react/src/components/PktsButton/__tests__/PktsButton.test.tsx
@@ -10,7 +10,7 @@ test.describe("ESButton", () => {
     testTable,
     themes,
     actionStates,
-  }: ComponentTestTableType<PktsButtonProps<"button">> = {
+  }: ComponentTestTableType<PktsButtonProps> = {
     testTable: [
       {
         name: "primary",
@@ -47,30 +47,6 @@ test.describe("ESButton", () => {
           variant: "destructive",
         },
       },
-      {
-        name: "primary-xxlarge",
-        props: {
-          children: "XXLarge",
-          variant: "primary",
-          size: "xxlarge",
-        },
-      },
-      {
-        name: "secondary-medium",
-        props: {
-          children: "Medium",
-          variant: "secondary",
-          size: "medium",
-        },
-      },
-      {
-        name: "primary-nofill",
-        props: {
-          children: "No Fill",
-          variant: "primary",
-          fill: false,
-        },
-      },
       {
         name: "primary-disabled",
         props: {
@@ -95,7 +71,7 @@ test.describe("ESButton", () => {
       });
       actionStates.forEach((state) => {
         test(`${name}-${theme}-${state}`, async ({ mount }) => {
-          if (props.disabled) return; // skip if component is disabled
+          if ("disabled" in props && props.disabled) return; // skip if component is disabled
 
           const component = await mount(testBox);
           if (state === "hover") await component.hover();
diff --git a/packages/ui-react/src/components/PktsIconButton/PktsIconButton.tsx b/packages/ui-react/src/components/PktsIconButton/PktsIconButton.tsx
index 984d73e2..b1ad5c90 100644
--- a/packages/ui-react/src/components/PktsIconButton/PktsIconButton.tsx
+++ b/packages/ui-react/src/components/PktsIconButton/PktsIconButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import clsx from "clsx";
 import { PktsIconButtonProps } from "./PktsIconButton.types";
 
@@ -6,22 +6,24 @@ import { PktsIconButtonProps } from "./PktsIconButton.types";
  * Packets Icon Button
  *
  * Generic Icon only button component.
- * Can be a link or a button set with the "As" prop.
+ * Can be a link or a button set with the "as" prop.
  *
  * Child should be a lucide-icon, nothing else.
  *
  * @param {PktsIconButtonProps} props
- * @returns {React.FunctionComponent}
+ * @returns {React.ReactElement}
  */
-const PktsIconButton = ({
+const PktsIconButton: React.FC<PktsIconButtonProps> = ({
   variant = "secondary",
+  as = "button",
   className,
-  children = "",
+  children,
   square = false,
   ...props
-}: PktsIconButtonProps) => {
+}) => {
+  const Tag = as as React.ElementType;
   return (
-    <button
+    <Tag
       className={clsx(
         "pkts-icon-button",
         `pkts-${variant}`,
@@ -32,12 +34,10 @@ const PktsIconButton = ({
       {...props}
     >
       {children}
-    </button>
+    </Tag>
   );
 };
 
 PktsIconButton.displayName = "PktsIconButton";
 
 export default PktsIconButton;
-
-// TODO: ensure As prop works... ensure whole thing works
diff --git a/packages/ui-react/src/components/PktsIconButton/PktsIconButton.types.ts b/packages/ui-react/src/components/PktsIconButton/PktsIconButton.types.ts
index c6c84d7b..ef099b51 100644
--- a/packages/ui-react/src/components/PktsIconButton/PktsIconButton.types.ts
+++ b/packages/ui-react/src/components/PktsIconButton/PktsIconButton.types.ts
@@ -1,44 +1,24 @@
-export interface PktsIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode;
-  className?: string;
-  variant?: "primary" | "secondary" | "branded" | "tertiary" | "destructive"; // Type of Button
-  square?: boolean;
-  disabled?: boolean;
-}
-// TODO: update props and make it work with this?
-// import dynamicIconImports from "lucide-react/dynamicIconImports";
-// import * as React from "react";
+import * as React from "react";
 
-// type ESButtonVariantType =
-//   | "primary"
-//   | "secondary"
-//   | "branded"
-//   | "tertiary"
-//   | "destructive";
+type PktsIconButtonVariantType = "primary" | "secondary" | "branded" | "tertiary" | "destructive";
 
-// type ESIconButtonCustomProps = {
-//   /** Variants that affect styling, such as primary, secondary, tertiary, branded, and destructive. */
-//   variant?: ESButtonVariantType;
-//   /** Appendable ESIcon, ESAvatar, or other React element */
-//   append?: React.ReactNode;
-//   /** Prependable ESIcon, ESAvatar, or other React element */
-//   prepend?: React.ReactNode;
-//   /** Name of icon, from lucide-react. */
-//   name: keyof typeof dynamicIconImports;
-//   /** Whether or not to use a square-like aspect ratio */
-//   square?: boolean;
-// };
+type PktsIconButtonCustomProps = {
+  /** Variant that affects color styling. */
+  variant?: PktsIconButtonVariantType;
+  /** When true, removes horizontal padding and constrains width to match height. */
+  square?: boolean;
+  /** Button content. Should be a single lucide-react icon. */
+  children: React.ReactNode;
+};
 
-// type AsButtonProps = {
-//   /** ESButton as a button tag (default) */
-//   as?: "button";
-// } & Omit<React.ComponentPropsWithRef<"button">, "children">;
+type AsButtonProps = {
+  /** Render as a native button element (default). */
+  as?: "button";
+} & React.ComponentPropsWithoutRef<"button">;
 
-// type AsAnchorProps = {
-//   /** ESButton as an anchor tag */
-//   as: "a";
-// } & Omit<React.ComponentPropsWithRef<"a">, "children">;
+type AsAnchorProps = {
+  /** Render as an anchor element, styled as a button. */
+  as: "a";
+} & React.ComponentPropsWithoutRef<"a">;
 
-// // this discriminated union will be messy for Storybook autodocs, need to custom set it
-// export type ESIconButtonProps = ESIconButtonCustomProps &
-//   (AsButtonProps | AsAnchorProps);
+export type PktsIconButtonProps = PktsIconButtonCustomProps & (AsButtonProps | AsAnchorProps);

From 0e59612be8d111a79b74e9d653b893989bbacf6a Mon Sep 17 00:00:00 2001
From: Ethan Chennault <ethanolchennault@gmail.com>
Date: Fri, 17 Apr 2026 17:50:50 -0700
Subject: [PATCH 2/8] Rename esnet-tokens package to pkts-tokens

---
 apps/host-docs/package.json              |  2 +-
 apps/react-docs/package.json             |  2 +-
 apps/web-docs/package.json               |  2 +-
 dev-docs/release-process.md              |  2 +-
 packages/design-tokens/README.md         |  8 +--
 packages/design-tokens/config.json       | 14 ++---
 packages/design-tokens/package-lock.json |  4 +-
 packages/design-tokens/package.json      |  8 +--
 packages/design-tokens/rollup.config.js  | 10 +--
 packages/ui-css/package.json             | 80 ++++++++++++------------
 packages/ui-react/package.json           |  2 +-
 packages/ui-web/package.json             |  2 +-
 pnpm-lock.yaml                           | 22 +++----
 turbo.json                               |  6 +-
 14 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/apps/host-docs/package.json b/apps/host-docs/package.json
index a74c1b96..97bedf36 100644
--- a/apps/host-docs/package.json
+++ b/apps/host-docs/package.json
@@ -8,7 +8,7 @@
         "build": "storybook build"
     },
   "dependencies": {
-    "@esnet/esnet-tokens": "workspace:*",
+    "@esnet/pkts-tokens": "workspace:*",
     "@rive-app/react-canvas-lite": "^4.20.1",
     "doc-ui": "workspace:*",
     "lucide-react": "^0.525.0",
diff --git a/apps/react-docs/package.json b/apps/react-docs/package.json
index 21d1cbd5..3a3fb31d 100644
--- a/apps/react-docs/package.json
+++ b/apps/react-docs/package.json
@@ -10,7 +10,7 @@
     "preview": "serve storybook-static"
   },
   "dependencies": {
-    "@esnet/esnet-tokens": "workspace:*",
+    "@esnet/pkts-tokens": "workspace:*",
     "@esnet/packets-ui-css": "workspace:*",
     "@esnet/packets-ui-react": "workspace:*",
     "@rive-app/react-canvas-lite": "^4.20.1",
diff --git a/apps/web-docs/package.json b/apps/web-docs/package.json
index 7cbc4d6e..1e7436fd 100644
--- a/apps/web-docs/package.json
+++ b/apps/web-docs/package.json
@@ -8,7 +8,7 @@
         "build": "storybook build"
     },
   "dependencies": {
-    "@esnet/esnet-tokens": "workspace:*",
+    "@esnet/pkts-tokens": "workspace:*",
     "@esnet/packets-ui-web": "workspace:*",
     "@rive-app/react-canvas-lite": "^4.20.1",
     "doc-ui": "workspace:*",
diff --git a/dev-docs/release-process.md b/dev-docs/release-process.md
index 71854673..af00c54b 100644
--- a/dev-docs/release-process.md
+++ b/dev-docs/release-process.md
@@ -4,7 +4,7 @@ This document outlines the processes to reelease a new build of the npm package
 
 ## Package Registry
 
-The Gitlab Package Registry can be found [here](https://gitlab.es.net/esnet/packets-design-system/-/packages). It contains npm files for both `@esnet/packets-ui` and `@esnet/esnet-tokens`. If you need to debug artifacts, you can click in on a published version and see downloaded published artifacts.
+The Gitlab Package Registry can be found [here](https://gitlab.es.net/esnet/packets-design-system/-/packages). It contains npm files for both `@esnet/packets-ui` and `@esnet/pkts-tokens`. If you need to debug artifacts, you can click in on a published version and see downloaded published artifacts.
 
 ## Changesets
 
diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md
index 16871aac..92da8e20 100644
--- a/packages/design-tokens/README.md
+++ b/packages/design-tokens/README.md
@@ -1,8 +1,8 @@
-## ESNet UI Design Tokens
+## Packets UI Design Tokens
 
 #### Exports
 
-ESNet's code repository of tokens, available in the following formats:
+Packets' code repository of tokens, available in the following formats:
 
 - JavaScript constants, including ESM, CJS, and UMD definitions, along with TypeScript declarations
 - Tailwind configuration object (soon to support Tailwind v4 configuration)
@@ -11,11 +11,11 @@ ESNet's code repository of tokens, available in the following formats:
 
 The default export is the JavaScript constants with the TypeScript type declaration.
 
-If you wish to consume any other files, you can conveniently import them as such: `import "@esnet/design-tokens/filename"`, as defined in the package.json's `exports` field.
+If you wish to consume any other files, you can conveniently import them as such: `import "@esnet/pkts-tokens/filename"`, as defined in the package.json's `exports` field.
 
 ##### Caveats
 
-When importing token files in CSS using PostCSS (or likely any CSS compiler), it struggles to resolve the path names exported by package.json's `exports` field. Import them like this instead: `@import "@esnet/esnet-tokens/dist/esnet-tokens.css";`.
+When importing token files in CSS using PostCSS (or likely any CSS compiler), it struggles to resolve the path names exported by package.json's `exports` field. Import them like this instead: `@import "@esnet/pkts-tokens/dist/pkts-tokens.css";`.
 
 #### Build process
 
diff --git a/packages/design-tokens/config.json b/packages/design-tokens/config.json
index acda78c8..ebbb15ab 100644
--- a/packages/design-tokens/config.json
+++ b/packages/design-tokens/config.json
@@ -10,13 +10,13 @@
         "typography/shorthand",
         "duration/units"
       ],
-      "prefix": "esnet",
+      "prefix": "pkts",
       "transformGroup": "css",
       "buildPath": "dist/",
       "files": [
         {
           "format": "css/variables",
-          "destination": "esnet-tokens.css",
+          "destination": "pkts-tokens.css",
           "options": {
             "outputReferences": true
           }
@@ -32,12 +32,12 @@
         "typography/shorthand",
         "duration/units"
       ],
-      "prefix": "esnet",
+      "prefix": "pkts",
       "transformGroup": "scss",
       "buildPath": "dist/",
       "files": [
         {
-          "destination": "esnet-tokens.scss",
+          "destination": "pkts-tokens.scss",
           "format": "scss/variables",
           "options": {
             "outputReferences": true
@@ -45,7 +45,7 @@
         },
         {
           "format": "css/variables",
-          "destination": "_esnet-tokens-css-variables.scss",
+          "destination": "_pkts-tokens-css-variables.scss",
           "options": {
             "outputReferences": true
           }
@@ -60,7 +60,7 @@
         "size/pxToRem",
         "duration/units"
       ],
-      "prefix": "esnet",
+      "prefix": "pkts",
       "transformGroup": "js",
       "buildPath": "dist/",
       "files": [
@@ -82,7 +82,7 @@
         "size/pxToRem",
         "duration/units"
       ],
-      "prefix": "esnet",
+      "prefix": "pkts",
       "transformGroup": "js",
       "buildPath": "dist/",
       "files": [
diff --git a/packages/design-tokens/package-lock.json b/packages/design-tokens/package-lock.json
index b081ef2b..a874f6c5 100644
--- a/packages/design-tokens/package-lock.json
+++ b/packages/design-tokens/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "@esnet/esnet-tokens",
+  "name": "@esnet/pkts-tokens",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "@esnet/esnet-tokens",
+      "name": "@esnet/pkts-tokens",
       "version": "0.1.0",
       "license": "MIT",
       "dependencies": {
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index 7d9bc08f..968bae07 100644
--- a/packages/design-tokens/package.json
+++ b/packages/design-tokens/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "@esnet/esnet-tokens",
+  "name": "@esnet/pkts-tokens",
   "version": "1.1.1",
   "type": "module",
-  "description": "A set of reusable UI tokens for the various ESnet frontend systems.",
+  "description": "A set of reusable UI tokens created by ESnet for various frontend systems.",
   "author": "Jason Roeckle",
   "scripts": {
     "build": "node ./build.js && pnpm run format && rollup --config rollup.config.js",
@@ -17,8 +17,8 @@
   "exports": {
     ".": {
       "types": "./dist/tokens.d.ts",
-      "import": "./dist/esnet-tokens.esm.js",
-      "require": "./dist/esnet-tokens.cjs.js",
+      "import": "./dist/pkts-tokens.esm.js",
+      "require": "./dist/pkts-tokens.cjs.js",
       "default": "./dist/tokens.js"
     },
     "./*": "./dist/*"
diff --git a/packages/design-tokens/rollup.config.js b/packages/design-tokens/rollup.config.js
index 36395b40..67d7768e 100644
--- a/packages/design-tokens/rollup.config.js
+++ b/packages/design-tokens/rollup.config.js
@@ -6,8 +6,8 @@ export default [
   {
     input: "./dist/tokens.js",
     output: {
-      name: "esnet-tokens",
-      file: "./dist/esnet-tokens.umd.js",
+      name: "pkts-tokens",
+      file: "./dist/pkts-tokens.umd.js",
       format: "umd",
     },
     plugins: [
@@ -25,7 +25,7 @@ export default [
   {
     input: "./dist/tokens.js",
     external: [],
-    output: [{ file: "./dist/esnet-tokens.esm.js", format: "es" }],
+    output: [{ file: "./dist/pkts-tokens.esm.js", format: "es" }],
     plugins: [
       resolve(), // so Rollup can find `ms`
     ],
@@ -35,8 +35,8 @@ export default [
     input: "./dist/tokens.js",
     external: [],
     output: [
-      { file: "./dist/esnet-tokens.cjs.js", format: "cjs" },
-      { file: "./dist/esnet-tokens.esm.js", format: "es" },
+      { file: "./dist/pkts-tokens.cjs.js", format: "cjs" },
+      { file: "./dist/pkts-tokens.esm.js", format: "es" },
     ],
     plugins: [
       resolve(), // so Rollup can find `ms`
diff --git a/packages/ui-css/package.json b/packages/ui-css/package.json
index 0e97ee95..a8a61eef 100644
--- a/packages/ui-css/package.json
+++ b/packages/ui-css/package.json
@@ -1,41 +1,41 @@
 {
-  "name": "@esnet/packets-ui-css",
-  "version": "0.1.0",
-  "description": "The Packets Design System CSS-Only Components",
-  "author": "ESnet",
-  "type": "module",
-  "scripts": {
-    "build": "node scripts/build.js",
-    "build:rollup": "rollup -c",
-    "dev": "rollup -c --watch",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "prepublishOnly": "npm run build",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui",
-    "test:updatesnaps": "playwright test --update-snapshots"
-  },
-  "dependencies": {
-    "@esnet/esnet-tokens": "workspace:^"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.57.0",
-    "chokidar": "^3.5.3",
-    "cssnano": "^6.0.1",
-    "glob": "^13.0.0",
-    "postcss": "^8.4.31",
-    "postcss-import": "^16.1.0",
-    "postcss-nested": "^6.0.1",
-    "postcss-preset-env": "^9.3.0",
-    "rollup": "^4.53.5",
-    "rollup-plugin-postcss": "^4.0.2"
-  },
-  "main": "dist/styles.css",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    "./styles.css": "./dist/styles.css",
-    "./styles.min.css": "./dist/styles.min.css",
-    "./tearsheet.html": "./dist/tearsheet.html"
-  }
-}
+    "name": "@esnet/packets-ui-css",
+    "version": "0.1.0",
+    "description": "The Packets Design System CSS-Only Components",
+    "author": "James Kafader",
+    "type": "module",
+    "scripts": {
+        "build": "node scripts/build.js",
+        "build:rollup": "rollup -c",
+        "dev": "rollup -c --watch",
+        "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+        "prepublishOnly": "npm run build",
+        "test": "playwright test",
+        "test:ui": "playwright test --ui",
+        "test:updatesnaps": "playwright test --update-snapshots"
+    },
+    "dependencies": {
+        "@esnet/pkts-tokens": "workspace:^"
+    },
+    "devDependencies": {
+        "@playwright/test": "^1.57.0",
+        "chokidar": "^3.5.3",
+        "cssnano": "^6.0.1",
+        "glob": "^13.0.0",
+        "postcss": "^8.4.31",
+        "postcss-import": "^16.1.0",
+        "postcss-nested": "^6.0.1",
+        "postcss-preset-env": "^9.3.0",
+        "rollup": "^4.53.5",
+        "rollup-plugin-postcss": "^4.0.2"
+    },
+    "main": "dist/styles.css",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        "./styles.css": "./dist/styles.css",
+        "./styles.min.css": "./dist/styles.min.css",
+        "./tearsheet.html": "./dist/tearsheet.html"
+    }
+}
\ No newline at end of file
diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
index cc34ceca..78c45645 100644
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@@ -28,7 +28,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@esnet/esnet-tokens": "workspace:^",
+    "@esnet/pkts-tokens": "workspace:^",
     "@playwright/experimental-ct-react": "^1.57.0",
     "@playwright/test": "^1.57.0",
     "@repo/eslint-config": "workspace:^",
diff --git a/packages/ui-web/package.json b/packages/ui-web/package.json
index 786dbe5c..980509a6 100644
--- a/packages/ui-web/package.json
+++ b/packages/ui-web/package.json
@@ -26,7 +26,7 @@
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
-    "@esnet/esnet-tokens": "workspace:^",
+    "@esnet/pkts-tokens": "workspace:^",
     "@playwright/test": "^1.57.0",
     "@repo/eslint-config": "workspace:^",
     "@rollup/plugin-commonjs": "^24.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1291daac..4be01d8d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,7 +63,7 @@ importers:
 
   apps/host-docs:
     dependencies:
-      '@esnet/esnet-tokens':
+      '@esnet/pkts-tokens':
         specifier: workspace:*
         version: link:../../packages/design-tokens
       '@rive-app/react-canvas-lite':
@@ -169,15 +169,15 @@ importers:
 
   apps/react-docs:
     dependencies:
-      '@esnet/esnet-tokens':
-        specifier: workspace:*
-        version: link:../../packages/design-tokens
       '@esnet/packets-ui-css':
         specifier: workspace:*
         version: link:../../packages/ui-css
       '@esnet/packets-ui-react':
         specifier: workspace:*
         version: link:../../packages/ui-react
+      '@esnet/pkts-tokens':
+        specifier: workspace:*
+        version: link:../../packages/design-tokens
       '@rive-app/react-canvas-lite':
         specifier: ^4.20.1
         version: 4.27.0(react@18.3.1)
@@ -272,12 +272,12 @@ importers:
 
   apps/web-docs:
     dependencies:
-      '@esnet/esnet-tokens':
-        specifier: workspace:*
-        version: link:../../packages/design-tokens
       '@esnet/packets-ui-web':
         specifier: workspace:*
         version: link:../../packages/ui-web
+      '@esnet/pkts-tokens':
+        specifier: workspace:*
+        version: link:../../packages/design-tokens
       '@rive-app/react-canvas-lite':
         specifier: ^4.20.1
         version: 4.27.0(react@18.3.1)
@@ -501,7 +501,7 @@ importers:
 
   packages/ui-css:
     dependencies:
-      '@esnet/esnet-tokens':
+      '@esnet/pkts-tokens':
         specifier: workspace:^
         version: link:../design-tokens
     devDependencies:
@@ -560,7 +560,7 @@ importers:
       '@babel/preset-typescript':
         specifier: ^7.26.0
         version: 7.28.5(@babel/core@7.29.0)
-      '@esnet/esnet-tokens':
+      '@esnet/pkts-tokens':
         specifier: workspace:^
         version: link:../design-tokens
       '@playwright/experimental-ct-react':
@@ -669,7 +669,7 @@ importers:
       '@babel/preset-typescript':
         specifier: ^7.26.0
         version: 7.28.5(@babel/core@7.29.0)
-      '@esnet/esnet-tokens':
+      '@esnet/pkts-tokens':
         specifier: workspace:^
         version: link:../design-tokens
       '@playwright/test':
@@ -6623,7 +6623,7 @@ packages:
         optional: true
     dependencies:
       '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.9.3)(vite@5.4.21)
-      '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
+      '@rollup/pluginutils': 5.3.0(rollup@3.30.0)
       '@storybook/builder-vite': 8.6.17(storybook@8.6.17)(vite@5.4.21)
       '@storybook/react': 8.6.17(@storybook/test@8.6.15)(react-dom@18.3.1)(react@18.3.1)(storybook@8.6.17)(typescript@5.9.3)
       '@storybook/test': 8.6.15(storybook@8.6.17)
diff --git a/turbo.json b/turbo.json
index 10e698d7..038204ec 100644
--- a/turbo.json
+++ b/turbo.json
@@ -3,12 +3,12 @@
   "//": "XXX: the line below is EXTREMELY IMPORTANT. This does most of the work of binding playwright to the browser list from the docker container. THIS SHOULD NOT BE REMOVED as it affects docker builds and CI.",
   "globalPassThroughEnv": ["PLAYWRIGHT_BROWSERS_PATH"],
   "tasks": {
-    "@esnet/esnet-tokens#build": {
+    "@esnet/pkts-tokens#build": {
       "dependsOn": ["^build"],
       "outputs": ["dist/**"]
     },
     "@esnet/packets-ui-css#build": {
-      "dependsOn": ["@esnet/esnet-tokens#build"],
+      "dependsOn": ["@esnet/pkts-tokens#build"],
       "outputs": ["dist/**"]
     },
     "@esnet/packets-ui-react#build": {
@@ -20,7 +20,7 @@
       "outputs": ["dist/**"]
     },
     "build": {
-      "dependsOn": ["@esnet/esnet-tokens#build", "^build"],
+      "dependsOn": ["@esnet/pkts-tokens#build", "^build"],
       "outputs": ["dist/**"]
     },
     "lint": {

From d7cce2392bc4106c384adfa9856a45133c363e45 Mon Sep 17 00:00:00 2001
From: Ethan Chennault <ethanolchennault@gmail.com>
Date: Fri, 17 Apr 2026 17:54:20 -0700
Subject: [PATCH 3/8] Rename --esnet prefix for CSS variables to --pkts in
 ui-css

---
 packages/ui-css/src/base/grid.css             |   4 +-
 packages/ui-css/src/base/surfaces.css         |  26 +--
 packages/ui-css/src/base/tokens.css           |   2 +-
 packages/ui-css/src/base/typography.css       | 164 ++++++-------
 packages/ui-css/src/components/accordion.css  |  56 ++---
 packages/ui-css/src/components/alert.css      |  28 +--
 packages/ui-css/src/components/avatar.css     |  44 ++--
 packages/ui-css/src/components/badge.css      |  12 +-
 .../ui-css/src/components/breadcrumbs.css     |  18 +-
 .../ui-css/src/components/button-group.css    |   6 +-
 packages/ui-css/src/components/button.css     |  38 +--
 packages/ui-css/src/components/card.css       |  12 +-
 packages/ui-css/src/components/chip-group.css |   2 +-
 packages/ui-css/src/components/chip.css       |  78 +++----
 packages/ui-css/src/components/code-block.css |  36 +--
 packages/ui-css/src/components/data-table.css |  36 +--
 packages/ui-css/src/components/datum.css      |  18 +-
 packages/ui-css/src/components/divider.css    |  12 +-
 packages/ui-css/src/components/dropdown.css   |  12 +-
 .../ui-css/src/components/form-section.css    |  18 +-
 .../ui-css/src/components/icon-button.css     |  32 +--
 packages/ui-css/src/components/icon.css       |   4 +-
 .../ui-css/src/components/input-checkbox.css  |  56 ++---
 .../src/components/input-date-picker.css      | 122 +++++-----
 .../ui-css/src/components/input-option.css    |  18 +-
 .../ui-css/src/components/input-radio.css     |  36 +--
 packages/ui-css/src/components/input-row.css  |  36 +--
 .../ui-css/src/components/input-select.css    |  70 +++---
 .../ui-css/src/components/input-switch.css    |  50 ++--
 .../ui-css/src/components/input-text-area.css |  66 +++---
 packages/ui-css/src/components/input-text.css |  66 +++---
 .../ui-css/src/components/input-typeahead.css |  98 ++++----
 packages/ui-css/src/components/label.css      |  26 +--
 .../ui-css/src/components/list-tree-view.css  |  62 ++---
 packages/ui-css/src/components/module.css     |  10 +-
 .../ui-css/src/components/skeleton-chip.css   |  24 +-
 .../src/components/skeleton-surface.css       |  16 +-
 packages/ui-css/src/components/spacer.css     |   2 +-
 packages/ui-css/src/components/spinner.css    |  30 +--
 packages/ui-css/src/components/tab.css        |  22 +-
 .../src/components/table-of-contents.css      |  24 +-
 packages/ui-css/src/components/tabs.css       |  18 +-
 .../ui-css/src/components/title-section.css   |  10 +-
 packages/ui-css/src/components/tooltip.css    |  14 +-
 packages/ui-css/src/utilities.css             | 216 +++++++++---------
 45 files changed, 875 insertions(+), 875 deletions(-)

diff --git a/packages/ui-css/src/base/grid.css b/packages/ui-css/src/base/grid.css
index cbbb8fcd..a39899a3 100644
--- a/packages/ui-css/src/base/grid.css
+++ b/packages/ui-css/src/base/grid.css
@@ -1,6 +1,6 @@
 .packets-grid {
-  --grid-gap: var(--esnet-size-spacing-xsmall, 8px);
-  --bottom-margin: var(--esnet-size-spacing-xsmall, 8px);
+  --grid-gap: var(--pkts-size-spacing-xsmall, 8px);
+  --bottom-margin: var(--pkts-size-spacing-xsmall, 8px);
 
   display: grid;
   grid-gap: var(--grid-gap);
diff --git a/packages/ui-css/src/base/surfaces.css b/packages/ui-css/src/base/surfaces.css
index ce1a1ef6..74d0b72c 100644
--- a/packages/ui-css/src/base/surfaces.css
+++ b/packages/ui-css/src/base/surfaces.css
@@ -1,61 +1,61 @@
 /* body,
 .packets-ui {
-  background-color: var(--esnet-color-light-background, #cccccc);
+  background-color: var(--pkts-color-light-background, #cccccc);
 
   .dark & {
-    background-color: var(--esnet-color-dark-background, #19191a);
+    background-color: var(--pkts-color-dark-background, #19191a);
   }
 } */
 
 /* body, */
 .packets {
   /* dark/light overide classes */
-  background-color: var(--esnet-color-light-background, #cccccc);
+  background-color: var(--pkts-color-light-background, #cccccc);
 
   /* .dark & {
-    background-color: var(--esnet-color-dark-background, #19191a);
+    background-color: var(--pkts-color-dark-background, #19191a);
   } */
 
   &.dark,
   .dark {
-    background-color: var(--esnet-color-dark-background, #19191a);
+    background-color: var(--pkts-color-dark-background, #19191a);
   }
 
   /* Nested Surface Layers using just surface class */
   .surface {
-    background-color: var(--esnet-color-light-surface-1, #e3e3e3);
+    background-color: var(--pkts-color-light-surface-1, #e3e3e3);
 
     .surface {
-      background-color: var(--esnet-color-light-surface-2, #f2f2f2);
+      background-color: var(--pkts-color-light-surface-2, #f2f2f2);
     }
   }
 
   /* Bespoke instances of surface layers */
   .surface1 {
-    background-color: var(--esnet-color-light-surface-1, #e3e3e3);
+    background-color: var(--pkts-color-light-surface-1, #e3e3e3);
   }
 
   .surface2 {
-    background-color: var(--esnet-color-light-surface-2, #f2f2f2);
+    background-color: var(--pkts-color-light-surface-2, #f2f2f2);
   }
 
   /* Dark mode styles - when .dark is on .packets element or an ancestor */
   &.dark,
   .dark & {
     .surface {
-      background-color: var(--esnet-color-dark-surface-1, #3d3d3d);
+      background-color: var(--pkts-color-dark-surface-1, #3d3d3d);
 
       .surface {
-        background-color: var(--esnet-color-dark-surface-2, #4d4d4f);
+        background-color: var(--pkts-color-dark-surface-2, #4d4d4f);
       }
     }
 
     .surface1 {
-      background-color: var(--esnet-color-dark-surface-1, #3d3d3d);
+      background-color: var(--pkts-color-dark-surface-1, #3d3d3d);
     }
 
     .surface2 {
-      background-color: var(--esnet-color-dark-surface-2, #4d4d4f);
+      background-color: var(--pkts-color-dark-surface-2, #4d4d4f);
     }
   }
 }
diff --git a/packages/ui-css/src/base/tokens.css b/packages/ui-css/src/base/tokens.css
index 23cec305..e2ddeece 100644
--- a/packages/ui-css/src/base/tokens.css
+++ b/packages/ui-css/src/base/tokens.css
@@ -1 +1 @@
-@import "@esnet/esnet-tokens/dist/esnet-tokens.css";
\ No newline at end of file
+@import "@esnet/pkts-tokens/dist/pkts-tokens.css";
\ No newline at end of file
diff --git a/packages/ui-css/src/base/typography.css b/packages/ui-css/src/base/typography.css
index 100962cd..68a161bb 100644
--- a/packages/ui-css/src/base/typography.css
+++ b/packages/ui-css/src/base/typography.css
@@ -1,5 +1,5 @@
 .packets {
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  color: var(--pkts-color-light-copy, #3d3d3d);
 
   /* General Typography overrides */
   h1,
@@ -15,32 +15,32 @@
   dl,
   li {
     width: 100%;
-    margin: 0 0 var(--esnet-size-spacing-xsmall, 0.5rem);
-    color: var(--esnet-color-light-copy, #3d3d3d);
+    margin: 0 0 var(--pkts-size-spacing-xsmall, 0.5rem);
+    color: var(--pkts-color-light-copy, #3d3d3d);
   }
 
   h1 {
-    margin: 0 0 var(--esnet-size-spacing-medium, 2rem);
+    margin: 0 0 var(--pkts-size-spacing-medium, 2rem);
   }
 
   /* Body */
   &,
   body {
-    color: var(--esnet-color-light-copy, #3d3d3d);
+    color: var(--pkts-color-light-copy, #3d3d3d);
     &.dark,
     & .dark {
-      color: var(--esnet-color-dark-copy, #ffffff);
+      color: var(--pkts-color-dark-copy, #ffffff);
     }
 
     font: var(
-      --esnet-typography-copy-1-sans-font,
-      400 16px/120% var(--esnet-font-family-body-sans)
+      --pkts-typography-copy-1-sans-font,
+      400 16px/120% var(--pkts-font-family-body-sans)
     );
 
     .body2 {
       font: var(
-        --esnet-typography-copy-2-sans-font,
-        400 16px/120% var(--esnet-font-family-body-sans)
+        --pkts-typography-copy-2-sans-font,
+        400 16px/120% var(--pkts-font-family-body-sans)
       );
     }
 
@@ -65,21 +65,21 @@
     mark,
     .highlight,
     .highlight-blue {
-      background-color: var(--esnet-color-core-blue-200, #9ce2ff);
+      background-color: var(--pkts-color-core-blue-200, #9ce2ff);
       .dark & {
-        background-color: var(--esnet-color-core-blue-800, #9ce2ff);
+        background-color: var(--pkts-color-core-blue-800, #9ce2ff);
       }
     }
     .highlight-yellow {
-      background-color: var(--esnet-color-core-yellow-200, #fffb7d);
+      background-color: var(--pkts-color-core-yellow-200, #fffb7d);
       .dark & {
-        background-color: var(--esnet-color-core-yellow-600, #cc9e16);
+        background-color: var(--pkts-color-core-yellow-600, #cc9e16);
       }
     }
     .highlight-pink {
-      background-color: var(--esnet-color-core-berry-200, #ffa5cb);
+      background-color: var(--pkts-color-core-berry-200, #ffa5cb);
       .dark & {
-        background-color: var(--esnet-color-core-berry-800, #990054);
+        background-color: var(--pkts-color-core-berry-800, #990054);
       }
     }
   }
@@ -90,12 +90,12 @@
   h1.display,
   .display {
     font: var(
-      --esnet-typography-banner-1-display-font,
-      600 64px/110% var(--esnet-font-family-header-display)
+      --pkts-typography-banner-1-display-font,
+      600 64px/110% var(--pkts-font-family-header-display)
     );
 
     letter-spacing: var(
-      --esnet-typography-banner-1-display-letterspacing,
+      --pkts-typography-banner-1-display-letterspacing,
       0.49px
     );
   }
@@ -103,12 +103,12 @@
   h1.display2,
   .display2 {
     font: var(
-      --esnet-typography-header-1-display-font,
-      600 48px/110% var(--esnet-font-family-header-display)
+      --pkts-typography-header-1-display-font,
+      600 48px/110% var(--pkts-font-family-header-display)
     );
 
     letter-spacing: var(
-      --esnet-typography-header-1-display-letterspacing,
+      --pkts-typography-header-1-display-letterspacing,
       0.49px
     );
   }
@@ -119,17 +119,17 @@
   .display1,
   .display2,
   .display {
-    color: var(--esnet-color-core-black-1000, #000000);
+    color: var(--pkts-color-core-black-1000, #000000);
 
     &.branded {
-      color: var(--esnet-color-light-secondary, #004573);
+      color: var(--pkts-color-light-secondary, #004573);
     }
 
     .dark & {
-      color: var(--esnet-color-dark-copy, #ffffff);
+      color: var(--pkts-color-dark-copy, #ffffff);
 
       &.branded {
-        color: var(--esnet-color-dark-secondary, #00b6f2);
+        color: var(--pkts-color-dark-secondary, #00b6f2);
       }
     }
   }
@@ -140,41 +140,41 @@
     text-decoration: underline;
     cursor: pointer;
 
-    color: var(--esnet-color-light-primary, #0088b5);
+    color: var(--pkts-color-light-primary, #0088b5);
     .dark & {
-      color: var(--esnet-color-dark-secondary, #00b6f2);
+      color: var(--pkts-color-dark-secondary, #00b6f2);
     }
 
     &:visited {
-      color: var(--esnet-color-light-primary, #0088b5);
+      color: var(--pkts-color-light-primary, #0088b5);
       .dark & {
-        color: var(--esnet-color-dark-secondary, #00b6f2);
+        color: var(--pkts-color-dark-secondary, #00b6f2);
       }
     }
 
     &:hover {
       outline: none;
-      color: var(--esnet-color-light-secondary, #004573);
+      color: var(--pkts-color-light-secondary, #004573);
       .dark & {
-        color: var(--esnet-color-core-blue-600, #0088b5);
+        color: var(--pkts-color-core-blue-600, #0088b5);
       }
     }
 
     &:active,
     &:focus {
       outline: none;
-      color: var(--esnet-color-light-accent, #d96300);
+      color: var(--pkts-color-light-accent, #d96300);
       .dark & {
-        color: var(--esnet-color-dark-accent, #ff8000);
+        color: var(--pkts-color-dark-accent, #ff8000);
       }
     }
 
     /* Figma's "inactive" style */
     &:not([href]),
     .inactive {
-      color: var(--esnet-color-light-copy-alt, #6e6e70);
+      color: var(--pkts-color-light-copy-alt, #6e6e70);
       .dark & {
-        color: var(--esnet-color-dark-copy-alt, #c2c2c2);
+        color: var(--pkts-color-dark-copy-alt, #c2c2c2);
       }
     }
   }
@@ -184,18 +184,18 @@
   .h1,
   .header1 {
     font: var(
-      --esnet-typography-header-1-sans-font,
-      600 48px/110% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-1-sans-font,
+      600 48px/110% var(--pkts-font-family-header-sans)
     );
-    letter-spacing: var(--esnet-typography-header-1-sans-letterspacing, 0.49px);
+    letter-spacing: var(--pkts-typography-header-1-sans-letterspacing, 0.49px);
   }
 
   h2,
   .h2,
   .header2 {
     font: var(
-      --esnet-typography-header-2-sans-font,
-      700 39px/130% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-2-sans-font,
+      700 39px/130% var(--pkts-font-family-header-sans)
     );
   }
 
@@ -203,8 +203,8 @@
   .h3,
   .header3 {
     font: var(
-      --esnet-typography-header-3-sans-font,
-      700 31px/140% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-3-sans-font,
+      700 31px/140% var(--pkts-font-family-header-sans)
     );
   }
 
@@ -212,14 +212,14 @@
   .h4,
   .header4 {
     font: var(
-      --esnet-typography-header-4-sans-font,
-      700 25px/140% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-4-sans-font,
+      700 25px/140% var(--pkts-font-family-header-sans)
     );
 
     &.mono {
       font: var(
-        --esnet-typography-header-4-mono-font,
-        500 25px/140% var(--esnet-font-family-header-mono)
+        --pkts-typography-header-4-mono-font,
+        500 25px/140% var(--pkts-font-family-header-mono)
       );
     }
   }
@@ -228,14 +228,14 @@
   .h5,
   .header5 {
     font: var(
-      --esnet-typography-header-5-sans-font,
-      600 20px/140% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-5-sans-font,
+      600 20px/140% var(--pkts-font-family-header-sans)
     );
 
     &.mono {
       font: var(
-        --esnet-typography-header-5-mono-font,
-        500 20px/140% var(--esnet-font-family-header-mono)
+        --pkts-typography-header-5-mono-font,
+        500 20px/140% var(--pkts-font-family-header-mono)
       );
     }
   }
@@ -244,14 +244,14 @@
   .h6,
   .header6 {
     font: var(
-      --esnet-typography-header-6-sans-font,
-      600 16px/140% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-6-sans-font,
+      600 16px/140% var(--pkts-font-family-header-sans)
     );
 
     &.mono {
       font: var(
-        --esnet-typography-header-6-mono-font,
-        500 16px/140% var(--esnet-font-family-header-mono)
+        --pkts-typography-header-6-mono-font,
+        500 16px/140% var(--pkts-font-family-header-mono)
       );
     }
   }
@@ -276,21 +276,21 @@
   .header6 {
     &.accent1,
     &.accent {
-      color: var(--esnet-color-light-secondary, #004573);
+      color: var(--pkts-color-light-secondary, #004573);
     }
 
     &.accent2 {
-      color: var(--esnet-color-light-primary, #0088b5);
+      color: var(--pkts-color-light-primary, #0088b5);
     }
 
     .dark & {
       &.accent1,
       &.accent {
-        color: var(--esnet-color-dark-secondary, #00b6f2);
+        color: var(--pkts-color-dark-secondary, #00b6f2);
       }
 
       &.accent2 {
-        color: var(--esnet-color-core-blue-200, #9ce2ff);
+        color: var(--pkts-color-core-blue-200, #9ce2ff);
       }
     }
 
@@ -298,7 +298,7 @@
       color: inherit;
 
       &:hover {
-        color: var(--esnet-color-core-blue-500, #00a0d6);
+        color: var(--pkts-color-core-blue-500, #00a0d6);
 
         .dark & {
           color: var(--color-core-blue-300, #64d2ff);
@@ -312,14 +312,14 @@
   .small footer,
   .footer {
     font: var(
-      --esnet-typography-copy-1-sans-font,
-      400 16px/120% var(--esnet-font-family-body-sans)
+      --pkts-typography-copy-1-sans-font,
+      400 16px/120% var(--pkts-font-family-body-sans)
     );
 
-    color: var(--esnet-color-light-copy-alt, #6e6e70);
+    color: var(--pkts-color-light-copy-alt, #6e6e70);
 
     .dark & {
-      color: var(--esnet-color-dark-copy-alt, #c2c2c2);
+      color: var(--pkts-color-dark-copy-alt, #c2c2c2);
     }
   }
 
@@ -330,16 +330,16 @@
     display: inline-block;
     margin: 0;
     font: var(
-      --esnet-typography-label-1-sans-font,
-      400 12px/120% var(--esnet-font-family-body-sans)
+      --pkts-typography-label-1-sans-font,
+      400 12px/120% var(--pkts-font-family-body-sans)
     );
     letter-spacing: -0.18px;
-    color: var(--esnet-color-light-copy, #3d3d3d);
+    color: var(--pkts-color-light-copy, #3d3d3d);
 
     &.mono {
       font: var(
-        --esnet-typography-label-1-mono-font,
-        400 12px/120% var(--esnet-font-family-body-mono)
+        --pkts-typography-label-1-mono-font,
+        400 12px/120% var(--pkts-font-family-body-mono)
       );
     }
   }
@@ -348,10 +348,10 @@
     display: inline-block;
     margin: 0;
     font: var(
-      --esnet-typography-label-2-sans-font,
-      600 12px/120% var(--esnet-font-family-body-sans)
+      --pkts-typography-label-2-sans-font,
+      600 12px/120% var(--pkts-font-family-body-sans)
     );
-    color: var(--esnet-color-light-copy, #3d3d3d);
+    color: var(--pkts-color-light-copy, #3d3d3d);
   }
 
   /* Code (in-line only) */
@@ -360,15 +360,15 @@
     padding: 0 var(--size-border-width-medium, 4px);
     border-radius: var(--size-radius-large, 6px);
     border: var(--size-border-width-xsmall, 1px) solid
-      var(--esnet-color-core-white-600, #ccc);
-    background-color: var(--esnet-color-core-white-500, #d9d9d9);
-    color: var(--esnet-color-light-primary, #0088b5);
+      var(--pkts-color-core-white-600, #ccc);
+    background-color: var(--pkts-color-core-white-500, #d9d9d9);
+    color: var(--pkts-color-light-primary, #0088b5);
   }
 
   /* Dark mode styles - when .dark is on .packets element or an ancestor */
   &.dark,
   .dark & {
-    color: var(--esnet-color-dark-copy, #e6e6e6);
+    color: var(--pkts-color-dark-copy, #e6e6e6);
 
     h1,
     h2,
@@ -382,22 +382,22 @@
     ul,
     dl,
     li {
-      color: var(--esnet-color-dark-copy, #e6e6e6);
+      color: var(--pkts-color-dark-copy, #e6e6e6);
     }
 
     figcaption,
     .caption,
     .label-1,
     .label-2 {
-      color: var(--esnet-color-dark-copy, #e6e6e6);
+      color: var(--pkts-color-dark-copy, #e6e6e6);
     }
 
     code,
     .code {
       border: var(--size-border-width-xsmall, 1px) solid
-        var(--esnet-color-core-slate-1000, #ccc);
-      background-color: var(--esnet-color-core-black-800, #252526);
-      color: var(--esnet-color-dark-secondary, #00b6f2);
+        var(--pkts-color-core-slate-1000, #ccc);
+      background-color: var(--pkts-color-core-black-800, #252526);
+      color: var(--pkts-color-dark-secondary, #00b6f2);
     }
   }
 
@@ -406,7 +406,7 @@
   ul {
     box-sizing: border-box;
     padding-left: 1.5rem;
-    margin: 0 0 var(--esnet-size-spacing-xsmall, 0.5rem);
+    margin: 0 0 var(--pkts-size-spacing-xsmall, 0.5rem);
   }
 
   ul {
diff --git a/packages/ui-css/src/components/accordion.css b/packages/ui-css/src/components/accordion.css
index 63aea32b..255a15d9 100644
--- a/packages/ui-css/src/components/accordion.css
+++ b/packages/ui-css/src/components/accordion.css
@@ -8,20 +8,20 @@
   flex-direction: column;
 
   /* Styling */
-  border-radius: var(--esnet-size-radius-xxlarge);
-  box-shadow: var(--esnet-box-shadow-core-medium);
+  border-radius: var(--pkts-size-radius-xxlarge);
+  box-shadow: var(--pkts-box-shadow-core-medium);
 }
 
 /* Inline variant */
 
 .pkts-accordion.pkts-inline {
   border-radius: 0;
-  border-bottom: 1px solid var(--esnet-color-light-copy-alt, #6e6e70);
+  border-bottom: 1px solid var(--pkts-color-light-copy-alt, #6e6e70);
   box-shadow: none;
 }
 
 .dark .pkts-accordion.pkts-inline {
-  border-bottom: 1px solid var(--esnet-color-dark-copy-alt, #6e6e70);
+  border-bottom: 1px solid var(--pkts-color-dark-copy-alt, #6e6e70);
 }
 
 .pkts-accordion.pkts-inline .pkts-accordion-header {
@@ -32,21 +32,21 @@
 
 .pkts-accordion.pkts-inline .pkts-accordion-open-btn svg,
 .pkts-accordion.pkts-inline .pkts-accordion-action-btns svg {
-  color: var(--esnet-color-light-secondary);
+  color: var(--pkts-color-light-secondary);
 }
 
 .dark .pkts-accordion.pkts-inline .pkts-accordion-open-btn svg,
 .dark .pkts-accordion.pkts-inline .pkts-accordion-action-btns svg {
-  color: var(--esnet-color-dark-secondary);
+  color: var(--pkts-color-dark-secondary);
 }
 
 .pkts-accordion.pkts-inline .pkts-accordion-content {
   background-color: transparent;
-  padding: 0 var(--esnet-size-spacing-xsmall, 8px);
+  padding: 0 var(--pkts-size-spacing-xsmall, 8px);
 }
 
 .pkts-accordion.pkts-inline .pkts-accordion-content:last-child {
-  padding-bottom: var(--esnet-size-spacing-xsmall, 8px);
+  padding-bottom: var(--pkts-size-spacing-xsmall, 8px);
 }
 
 .pkts-accordion.pkts-inline .pkts-accordion-footer {
@@ -58,18 +58,18 @@
 /* Header */
 
 .pkts-accordion .pkts-accordion-header {
-  height: var(--esnet-size-spacing-xlarge, 40px);
+  height: var(--pkts-size-spacing-xlarge, 40px);
   display: flex;
   justify-content: space-between;
-  gap: var(--esnet-size-spacing-small, 12px);
-  padding: 0 var(--esnet-size-spacing-xsmall, 8px);
-  background-color: var(--esnet-color-light-primary);
-  color: var(--esnet-color-core-white-100);
-  font: var(--esnet-typography-header-5-sans-font);
+  gap: var(--pkts-size-spacing-small, 12px);
+  padding: 0 var(--pkts-size-spacing-xsmall, 8px);
+  background-color: var(--pkts-color-light-primary);
+  color: var(--pkts-color-core-white-100);
+  font: var(--pkts-typography-header-5-sans-font);
 }
 
 .dark .pkts-accordion .pkts-accordion-header {
-  background-color: var(--esnet-color-dark-primary);
+  background-color: var(--pkts-color-dark-primary);
 }
 
 .dark .pkts-accordion.pkts-inline .pkts-accordion-header {
@@ -92,7 +92,7 @@
   padding: 0;
   display: flex;
   align-items: center;
-  gap: var(--esnet-size-spacing-xsmall);
+  gap: var(--pkts-size-spacing-xsmall);
   color: inherit;
   font: inherit;
   overflow: hidden;
@@ -113,7 +113,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  gap: var(--esnet-size-spacing-xsmall);
+  gap: var(--pkts-size-spacing-xsmall);
 }
 
 /* Content */
@@ -122,13 +122,13 @@
   width: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  padding: var(--esnet-size-spacing-xsmall, 8px);
-  font: var(--esnet-typography-copy-1-sans-font);
-  background-color: var(--esnet-color-light-surface-1);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
+  font: var(--pkts-typography-copy-1-sans-font);
+  background-color: var(--pkts-color-light-surface-1);
 }
 
 .dark .pkts-accordion .pkts-accordion-content {
-  background-color: var(--esnet-color-dark-surface-1);
+  background-color: var(--pkts-color-dark-surface-1);
 }
 
 .dark .pkts-accordion.pkts-inline .pkts-accordion-content {
@@ -142,18 +142,18 @@
 /* Footer */
 
 .pkts-accordion .pkts-accordion-footer {
-  height: var(--esnet-size-spacing-xlarge, 40px);
-  padding: 0 var(--esnet-size-spacing-xsmall, 8px);
+  height: var(--pkts-size-spacing-xlarge, 40px);
+  padding: 0 var(--pkts-size-spacing-xsmall, 8px);
   display: flex;
   align-items: center;
-  font: var(--esnet-typography-copy-1-sans-font);
-  background-color: var(--esnet-color-core-slate-600);
-  color: var(--esnet-color-core-white-100);
+  font: var(--pkts-typography-copy-1-sans-font);
+  background-color: var(--pkts-color-core-slate-600);
+  color: var(--pkts-color-core-white-100);
 }
 
 .dark .pkts-accordion .pkts-accordion-footer {
-  background-color: var(--esnet-color-core-slate-700);
-  color: var(--esnet-color-core-white-100);
+  background-color: var(--pkts-color-core-slate-700);
+  color: var(--pkts-color-core-white-100);
 }
 
 .pkts-accordion .pkts-accordion-footer span {
diff --git a/packages/ui-css/src/components/alert.css b/packages/ui-css/src/components/alert.css
index c0337769..51820f02 100644
--- a/packages/ui-css/src/components/alert.css
+++ b/packages/ui-css/src/components/alert.css
@@ -9,20 +9,20 @@
 */
 
 .pkts-alert {
-  --icon-size: var(--esnet-size-touchtarget-min, 32px);
-  --section-gap: var(--esnet-size-spacing-medium, 16px);
+  --icon-size: var(--pkts-size-touchtarget-min, 32px);
+  --section-gap: var(--pkts-size-spacing-medium, 16px);
   --title-label-font: var(
-    --esnet-typography-header-5-sans-font,
-    600 20px/140% var(--esnet-font-family-header-sans)
+    --pkts-typography-header-5-sans-font,
+    600 20px/140% var(--pkts-font-family-header-sans)
   );
 
-  border-radius: var(--esnet-size-radius-xlarge, 8px);
-  padding: var(--esnet-size-spacing-medium, 16px);
+  border-radius: var(--pkts-size-radius-xlarge, 8px);
+  padding: var(--pkts-size-spacing-medium, 16px);
   display: flex;
   gap: var(--section-gap);
-  background-color: var(--esnet-color-light-surface-2, #f2f2f2);
+  background-color: var(--pkts-color-light-surface-2, #f2f2f2);
 
-  animation: fadeInSlideUp var(--esnet-time-duration-quick, 250ms) ease-in-out;
+  animation: fadeInSlideUp var(--pkts-time-duration-quick, 250ms) ease-in-out;
 }
 
 @media (prefers-reduced-motion) {
@@ -32,8 +32,8 @@
 }
 
 .dark .pkts-alert {
-  color: var(--esnet-color-dark-copy, #e6e6e6);
-  background-color: var(--esnet-color-dark-surface-2, #f2f2f2);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
+  background-color: var(--pkts-color-dark-surface-2, #f2f2f2);
 }
 
 .dark .pkts-alert label,
@@ -44,7 +44,7 @@
 .dark .pkts-alert h4,
 .dark .pkts-alert h5,
 .dark .pkts-alert h6 {
-  color: var(--esnet-color-dark-copy, #e6e6e6);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
 }
 
 /* Icon - class-based or semantic */
@@ -72,11 +72,11 @@
 }
 
 .pkts-alert aside:last-child button svg {
-  color: var(--esnet-color-light-copy, #000000);
+  color: var(--pkts-color-light-copy, #000000);
 }
 
 .dark .pkts-alert aside:last-child button svg {
-  color: var(--esnet-color-dark-copy, #e6e6e6);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
 }
 
 /* Title - class-based or semantic */
@@ -89,7 +89,7 @@
 
 @keyframes fadeInSlideUp {
   from {
-    translate: 0 var(--esnet-size-spacing-medium, 16px);
+    translate: 0 var(--pkts-size-spacing-medium, 16px);
     opacity: 0;
     transform: scale(0.95);
   }
diff --git a/packages/ui-css/src/components/avatar.css b/packages/ui-css/src/components/avatar.css
index 31d64e89..48fe791a 100644
--- a/packages/ui-css/src/components/avatar.css
+++ b/packages/ui-css/src/components/avatar.css
@@ -11,19 +11,19 @@
 
 .pkts-avatar {
   --shadow: var(
-    --esnet-box-shadow-core-light,
+    --pkts-box-shadow-core-light,
     0 1px 3px 0 rgb(0 0 0 / 0.1),
     0 1px 3px -1px rgb(0 0 0 / 0.1)
   );
-  --border: var(--esnet-size-border-width-small, 2px) solid
-    var(--esnet-color-core-white-100, #fff);
-  --border-radius: var(--esnet-size-radius-xxlarge, 18px);
-  --border-hover-color: var(--esnet-color-core-blue-600, #0088b5);
+  --border: var(--pkts-size-border-width-small, 2px) solid
+    var(--pkts-color-core-white-100, #fff);
+  --border-radius: var(--pkts-size-radius-xxlarge, 18px);
+  --border-hover-color: var(--pkts-color-core-blue-600, #0088b5);
 
-  --size: var(--esnet-size-spacing-xlarge, 40px);
+  --size: var(--pkts-size-spacing-xlarge, 40px);
   --label-font: var(
-    --esnet-typography-header-5-sans-font,
-    600 20px/140% var(--esnet-font-family-header-sans)
+    --pkts-typography-header-5-sans-font,
+    600 20px/140% var(--pkts-font-family-header-sans)
   );
 
   display: flex;
@@ -55,7 +55,7 @@
   font: var(--label-font);
   text-decoration: none;
   text-transform: uppercase;
-  color: var(--esnet-color-core-white-100, #fff);
+  color: var(--pkts-color-core-white-100, #fff);
 
   /* Shift baseline down slightly for better visual centering */
   transform: translateY(1px);
@@ -70,7 +70,7 @@
   max-width: 110%;
   max-height: 110%;
   /* Ensure alt text is white when image fails to load */
-  color: var(--esnet-color-core-white-100, #fff);
+  color: var(--pkts-color-core-white-100, #fff);
 }
 
 .pkts-avatar.broken-image img,
@@ -100,17 +100,17 @@
 .pkts-avatar.pkts-small {
   --size: 24px;
   --label-font: var(
-    --esnet-typography-label-1-sans-font,
-    400 12px/120% var(--esnet-font-family-body-sans)
+    --pkts-typography-label-1-sans-font,
+    400 12px/120% var(--pkts-font-family-body-sans)
   );
   --border-radius: 10px;
 }
 
 .pkts-avatar.pkts-medium {
-  --size: var(--esnet-size-spacing-xlarge, 40px);
+  --size: var(--pkts-size-spacing-xlarge, 40px);
   --label-font: var(
-    --esnet-typography-header-5-sans-font,
-    600 20px/140% var(--esnet-font-family-header-sans)
+    --pkts-typography-header-5-sans-font,
+    600 20px/140% var(--pkts-font-family-header-sans)
   );
   /* There isn't a token for border radius of 14px (or even 12px/0.75rem) that matches the Figma specification */
   --border-radius: 14px;
@@ -119,26 +119,26 @@
 .pkts-avatar.pkts-large {
   --size: 48px;
   --label-font: var(
-    --esnet-typography-header-4-sans-font,
-    500 24px/140% var(--esnet-font-family-header-sans)
+    --pkts-typography-header-4-sans-font,
+    500 24px/140% var(--pkts-font-family-header-sans)
   );
-  --border-radius: var(--esnet-size-radius-xxlarge, 18px);
+  --border-radius: var(--pkts-size-radius-xxlarge, 18px);
 }
 
 /* Color Variants */
 
 .pkts-avatar.pkts-grape {
-  background-color: var(--esnet-color-core-purple-500, #a350ff);
+  background-color: var(--pkts-color-core-purple-500, #a350ff);
 }
 
 .pkts-avatar.pkts-lime {
-  background-color: var(--esnet-color-core-green-500, #11ad2b);
+  background-color: var(--pkts-color-core-green-500, #11ad2b);
 }
 
 .pkts-avatar.pkts-berry {
-  background-color: var(--esnet-color-core-berry-500, #ff2377);
+  background-color: var(--pkts-color-core-berry-500, #ff2377);
 }
 
 .pkts-avatar.pkts-orange {
-  background-color: var(--esnet-color-core-orange-500, #ff8000);
+  background-color: var(--pkts-color-core-orange-500, #ff8000);
 }
diff --git a/packages/ui-css/src/components/badge.css b/packages/ui-css/src/components/badge.css
index 160a0a28..c0349f26 100644
--- a/packages/ui-css/src/components/badge.css
+++ b/packages/ui-css/src/components/badge.css
@@ -5,15 +5,15 @@
   min-width: 12px;
   height: 20px;
   padding: 2px 6px;
-  border-radius: var(--esnet-size-radius-circle, 100px);
+  border-radius: var(--pkts-size-radius-circle, 100px);
   font: var(
-    --esnet-typography-label-2-sans-font,
-    700 12px/120% var(--esnet-font-family-body-sans)
+    --pkts-typography-label-2-sans-font,
+    700 12px/120% var(--pkts-font-family-body-sans)
   );
-  background-color: var(--esnet-color-light-primary, #0088b5);
-  color: var(--esnet-color-core-white-100, #ffffff);
+  background-color: var(--pkts-color-light-primary, #0088b5);
+  color: var(--pkts-color-core-white-100, #ffffff);
 }
 
 .dark .pkts-badge {
-  background-color: var(--esnet-color-dark-primary, #004573);
+  background-color: var(--pkts-color-dark-primary, #004573);
 }
diff --git a/packages/ui-css/src/components/breadcrumbs.css b/packages/ui-css/src/components/breadcrumbs.css
index 552b8478..50f25762 100644
--- a/packages/ui-css/src/components/breadcrumbs.css
+++ b/packages/ui-css/src/components/breadcrumbs.css
@@ -1,11 +1,11 @@
 .pkts-breadcrumbs {
-  --divider-color: var(--esnet-color-core-black-500, #4d4d4f);
-  --link-color: var(--esnet-color-light-copy, #3d3d3d);
+  --divider-color: var(--pkts-color-core-black-500, #4d4d4f);
+  --link-color: var(--pkts-color-light-copy, #3d3d3d);
 
   display: flex;
-  gap: var(--esnet-size-spacing-xsmall);
+  gap: var(--pkts-size-spacing-xsmall);
   flex-wrap: wrap;
-  margin-bottom: var(--esnet-size-spacing-medium);
+  margin-bottom: var(--pkts-size-spacing-medium);
   list-style: none;
   padding: 0;
   margin: 0;
@@ -13,14 +13,14 @@
 }
 
 .dark .pkts-breadcrumbs {
-  --divider-color: var(--esnet-color-core-white-800, #b3b3b3);
-  --link-color: var(--esnet-color-dark-copy, #e6e6e6);
+  --divider-color: var(--pkts-color-core-white-800, #b3b3b3);
+  --link-color: var(--pkts-color-dark-copy, #e6e6e6);
 }
 
 .pkts-breadcrumbs li {
   display: flex;
   align-items: center;
-  gap: var(--esnet-size-spacing-xsmall);
+  gap: var(--pkts-size-spacing-xsmall);
   width: auto;
   color: var(--link-color);
 }
@@ -39,8 +39,8 @@
   display: inline-block;
   color: var(--divider-color);
   font: var(
-    --esnet-typography-label-2-sans-font,
-    700 12px/120% var(--esnet-font-family-body-sans)
+    --pkts-typography-label-2-sans-font,
+    700 12px/120% var(--pkts-font-family-body-sans)
   );
 }
 
diff --git a/packages/ui-css/src/components/button-group.css b/packages/ui-css/src/components/button-group.css
index 5dd11e24..51cf4b16 100644
--- a/packages/ui-css/src/components/button-group.css
+++ b/packages/ui-css/src/components/button-group.css
@@ -1,7 +1,7 @@
 .pkts-button-group {
-  --spacing: var(--esnet-size-spacing-xsmall, 8px);
-  --label-color: var(--esnet-color-light-copy, #3d3d3d);
-  --label-color-dark: var(--esnet-color-dark-copy, #e6e6e6);
+  --spacing: var(--pkts-size-spacing-xsmall, 8px);
+  --label-color: var(--pkts-color-light-copy, #3d3d3d);
+  --label-color-dark: var(--pkts-color-dark-copy, #e6e6e6);
   width: fit-content;
 }
 
diff --git a/packages/ui-css/src/components/button.css b/packages/ui-css/src/components/button.css
index ee8223bd..38881a97 100644
--- a/packages/ui-css/src/components/button.css
+++ b/packages/ui-css/src/components/button.css
@@ -10,27 +10,27 @@
 
 .pkts-button,
 a.pkts-button {
-  --spacing-horizontal-layout-gap: var(--esnet-size-spacing-xxsmall, 4px);
+  --spacing-horizontal-layout-gap: var(--pkts-size-spacing-xxsmall, 4px);
 
   --spacing-height-medium: 40px;
-  --spacing-height-xxlarge: var(--esnet-size-spacing-xxlarge, 64px);
+  --spacing-height-xxlarge: var(--pkts-size-spacing-xxlarge, 64px);
 
-  --spacing-padding-horizontal: var(--esnet-size-spacing-large, 32px);
-  --spacing-padding-vertical: var(--esnet-size-spacing-xxsmall, 4px);
+  --spacing-padding-horizontal: var(--pkts-size-spacing-large, 32px);
+  --spacing-padding-vertical: var(--pkts-size-spacing-xxsmall, 4px);
 
-  --spacing-border-radius: var(--esnet-size-radius-xxlarge, 18px);
-  --spacing-border-width: var(--esnet-size-radius-small, 2px);
+  --spacing-border-radius: var(--pkts-size-radius-xxlarge, 18px);
+  --spacing-border-width: var(--pkts-size-radius-small, 2px);
 
   --typography-font: var(
-    --esnet-typography-button-1-sans-font,
-    700 16px/120% var(--esnet-font-family-body-sans)
+    --pkts-typography-button-1-sans-font,
+    700 16px/120% var(--pkts-font-family-body-sans)
   );
 
   /* Layout */
   display: inline-flex;
   width: auto;
-  padding: var(--esnet-size-border-width-medium, 4px)
-    var(--esnet-size-spacing-medium, 16px);
+  padding: var(--pkts-size-border-width-medium, 4px)
+    var(--pkts-size-spacing-medium, 16px);
   box-sizing: border-box;
 
   justify-content: center;
@@ -41,11 +41,11 @@ a.pkts-button {
   /* Styling */
   border-radius: var(--spacing-border-radius);
   border: var(--spacing-border-width) solid
-    var(--esnet-color-core-blue-900, #004573);
-  box-shadow: var(var(--esnet-box-shadow-core-light));
+    var(--pkts-color-core-blue-900, #004573);
+  box-shadow: var(var(--pkts-box-shadow-core-light));
 
   /* Typography */
-  color: var(--esnet-color-core-slate-900, #3f424d);
+  color: var(--pkts-color-core-slate-900, #3f424d);
   text-align: center;
 
   font: var(--typography-font);
@@ -54,9 +54,9 @@ a.pkts-button {
   text-decoration: none;
 
   transition:
-    background ease-in-out var(--esnet-time-duration-quick, 250ms),
-    border-color ease-in-out var(--esnet-time-duration-quick, 250ms),
-    box-shadow ease-in-out var(--esnet-time-duration-quick, 250ms);
+    background ease-in-out var(--pkts-time-duration-quick, 250ms),
+    border-color ease-in-out var(--pkts-time-duration-quick, 250ms),
+    box-shadow ease-in-out var(--pkts-time-duration-quick, 250ms);
 }
 
 /* Pseudo-events */
@@ -64,10 +64,10 @@ a.pkts-button {
 .pkts-button:hover,
 a.pkts-button:hover {
   cursor: pointer;
-  box-shadow: var(--esnet-box-shadow-core-medium);
+  box-shadow: var(--pkts-box-shadow-core-medium);
 
-  padding: var(--esnet-size-border-width-medium, 4px)
-    var(--esnet-size-spacing-medium, 16px);
+  padding: var(--pkts-size-border-width-medium, 4px)
+    var(--pkts-size-spacing-medium, 16px);
 }
 
 .pkts-button:disabled,
diff --git a/packages/ui-css/src/components/card.css b/packages/ui-css/src/components/card.css
index 22094a73..3390ea04 100644
--- a/packages/ui-css/src/components/card.css
+++ b/packages/ui-css/src/components/card.css
@@ -1,13 +1,13 @@
 .pkts-card {
   display: block;
-  padding: var(--esnet-size-spacing-medium, 16px);
-  border-radius: var(--esnet-size-radius-large, 8px);
+  padding: var(--pkts-size-spacing-medium, 16px);
+  border-radius: var(--pkts-size-radius-large, 8px);
   border: 1px solid transparent; /* no border in light mode, but leave placeholder. */ 
-  background-color: var(--esnet-color-core-white-100, #ffffff);
-  box-shadow: var(--esnet-box-shadow-core-light);
+  background-color: var(--pkts-color-core-white-100, #ffffff);
+  box-shadow: var(--pkts-box-shadow-core-light);
 }
 
 .dark .pkts-card {
-  border-color: var(--esnet-color-dark-shadow, #5c5f6b);
-  background-color: var(--esnet-color-dark-surface-1, #19191a);
+  border-color: var(--pkts-color-dark-shadow, #5c5f6b);
+  background-color: var(--pkts-color-dark-surface-1, #19191a);
 }
diff --git a/packages/ui-css/src/components/chip-group.css b/packages/ui-css/src/components/chip-group.css
index bfaeda13..b66ecc04 100644
--- a/packages/ui-css/src/components/chip-group.css
+++ b/packages/ui-css/src/components/chip-group.css
@@ -1,5 +1,5 @@
 .pkts-chip-group {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: var(--esnet-size-spacing-xsmall, 8px);
+  gap: var(--pkts-size-spacing-xsmall, 8px);
 }
diff --git a/packages/ui-css/src/components/chip.css b/packages/ui-css/src/components/chip.css
index f4dcf53d..f92da319 100644
--- a/packages/ui-css/src/components/chip.css
+++ b/packages/ui-css/src/components/chip.css
@@ -1,152 +1,152 @@
 .pkts-chip {
   /* Layout */
   display: inline-flex;
-  height: var(--esnet-size-spacing-large, 32px);
+  height: var(--pkts-size-spacing-large, 32px);
   box-sizing: border-box;
-  padding: var(--esnet-size-spacing-xxsmall, 4px) 12px;
+  padding: var(--pkts-size-spacing-xxsmall, 4px) 12px;
   justify-content: center;
   align-items: center;
-  gap: var(--esnet-size-spacing-xsmall, 8px);
+  gap: var(--pkts-size-spacing-xsmall, 8px);
   flex-shrink: 0;
   overflow: hidden;
 
   /* Styling */
-  background-color: var(--esnet-color-core-white-600, #CCC);
-  color: var(--esnet-color-core-black-600, #454547);
+  background-color: var(--pkts-color-core-white-600, #CCC);
+  color: var(--pkts-color-core-black-600, #454547);
   border-style: solid;
-  border-width: var(--esnet-size-border-width-xsmall, 0.0625rem);
+  border-width: var(--pkts-size-border-width-xsmall, 0.0625rem);
   border-color: transparent;
-  border-radius: var(--esnet-size-radius-xlarge, 0.375rem);
+  border-radius: var(--pkts-size-radius-xlarge, 0.375rem);
 
   /* Typography */
-  font: var(--esnet-typography-label-1-sans-font, 400 12px/120% var(--esnet-font-family-body-sans));
+  font: var(--pkts-typography-label-1-sans-font, 400 12px/120% var(--pkts-font-family-body-sans));
 
   /* Interaction */
   cursor: pointer;
   outline: none;
-  transition: border-color, background-color var(--esnet-time-duration-quick, 250ms) ease;
+  transition: border-color, background-color var(--pkts-time-duration-quick, 250ms) ease;
 }
 
 .dark .pkts-chip {
-  background-color: var(--esnet-color-core-black-600, #454547);
-  color: var(--esnet-color-core-white-300, #e6e6e6);
+  background-color: var(--pkts-color-core-black-600, #454547);
+  color: var(--pkts-color-core-white-300, #e6e6e6);
 }
 
 /* Hover state */
 
 .pkts-chip:hover:not(.pkts-disabled) {
-  background-color: var(--esnet-color-core-white-700, #C2C2C2);
+  background-color: var(--pkts-color-core-white-700, #C2C2C2);
 }
 
 .dark .pkts-chip:hover:not(.pkts-disabled) {
-  background-color: var(--esnet-color-core-black-300, #5E5E5E);
+  background-color: var(--pkts-color-core-black-300, #5E5E5E);
 }
 
 /* Focus state */
 
 .pkts-chip:focus:not(.pkts-disabled) {
-  background-color: var(--esnet-color-core-white-800, #B3B3B3);
+  background-color: var(--pkts-color-core-white-800, #B3B3B3);
 }
 
 .dark .pkts-chip:focus:not(.pkts-disabled) {
-  background-color: var(--esnet-color-core-black-200, #656566);
+  background-color: var(--pkts-color-core-black-200, #656566);
 }
 
 /* Active state */
 
 .pkts-chip:active:not(.pkts-disabled) {
-  border-color: var(--esnet-color-core-blue-500, #00a0d6);
-  background-color: var(--esnet-color-core-blue-100, #cff1ff);
-  color: var(--esnet-color-core-blue-800, #00608c);
+  border-color: var(--pkts-color-core-blue-500, #00a0d6);
+  background-color: var(--pkts-color-core-blue-100, #cff1ff);
+  color: var(--pkts-color-core-blue-800, #00608c);
 }
 
 .dark .pkts-chip:active:not(.pkts-disabled) {
-  border-color: var(--esnet-color-core-blue-600, #0088B5);
-  background-color: var(--esnet-color-core-blue-200, #9CE2FF);
+  border-color: var(--pkts-color-core-blue-600, #0088B5);
+  background-color: var(--pkts-color-core-blue-200, #9CE2FF);
 }
 
 /* Disabled state */
 
 .pkts-chip.pkts-disabled,
 .pkts-chip:disabled {
-  background-color: var(--esnet-color-core-white-400, #E3E3E3);
+  background-color: var(--pkts-color-core-white-400, #E3E3E3);
   cursor: default;
   pointer-events: none;
 }
 
 .dark .pkts-chip.pkts-disabled,
 .dark .pkts-chip:disabled {
-  background-color: var(--esnet-color-core-black-600, #454547);
+  background-color: var(--pkts-color-core-black-600, #454547);
 }
 
 /* Outline variant */
 
 .pkts-chip.pkts-outline {
   background-color: transparent;
-  border-color: var(--esnet-color-core-white-600, #CCC);
+  border-color: var(--pkts-color-core-white-600, #CCC);
 }
 
 .dark .pkts-chip.pkts-outline {
-  border-color: var(--esnet-color-core-black-600, #CCC);
+  border-color: var(--pkts-color-core-black-600, #CCC);
 }
 
 .pkts-chip.pkts-outline:hover:not(.pkts-disabled) {
-  background-color: var(--esnet-color-core-white-200, #F2F2F2);
+  background-color: var(--pkts-color-core-white-200, #F2F2F2);
 }
 
 .dark .pkts-chip.pkts-outline:hover:not(.pkts-disabled) {
-  background-color: var(--esnet-color-core-black-800, #252526);
+  background-color: var(--pkts-color-core-black-800, #252526);
 }
 
 .pkts-chip.pkts-outline:focus:not(.pkts-disabled) {
-  background-color: var(--esnet-color-core-white-800, #B3B3B3);
+  background-color: var(--pkts-color-core-white-800, #B3B3B3);
 }
 
 .dark .pkts-chip.pkts-outline:focus:not(.pkts-disabled) {
-  background-color: var(--esnet-color-core-black-200, #656566);
+  background-color: var(--pkts-color-core-black-200, #656566);
 }
 
 .pkts-chip.pkts-outline:active:not(.pkts-disabled) {
-  border-color: var(--esnet-color-core-blue-500, #00A0D6);
-  background-color: var(--esnet-color-core-blue-100, #CFF1FF);
-  color: var(--esnet-color-core-blue-800, #00608c);
+  border-color: var(--pkts-color-core-blue-500, #00A0D6);
+  background-color: var(--pkts-color-core-blue-100, #CFF1FF);
+  color: var(--pkts-color-core-blue-800, #00608c);
 }
 
 .dark .pkts-chip.pkts-outline:active:not(.pkts-disabled) {
-  background-color: var(--esnet-color-core-blue-200, #9ce2ff);
+  background-color: var(--pkts-color-core-blue-200, #9ce2ff);
 }
 
 .pkts-chip.pkts-outline.pkts-disabled,
 .pkts-chip.pkts-outline:disabled {
-  background-color: var(--esnet-color-core-white-200, #f2f2f2);
-  border-color: var(--esnet-color-core-white-300, #E6E6E6);
+  background-color: var(--pkts-color-core-white-200, #f2f2f2);
+  border-color: var(--pkts-color-core-white-300, #E6E6E6);
 }
 
 .dark .pkts-chip.pkts-outline.pkts-disabled,
 .dark .pkts-chip.pkts-outline:disabled {
-  background-color: var(--esnet-color-core-black-800, #252526);
+  background-color: var(--pkts-color-core-black-800, #252526);
   border-color: transparent;
 }
 
 /* Rounded variant */
 
 .pkts-chip.pkts-rounded {
-  border-radius: var(--esnet-size-radius-circle, 999px);
+  border-radius: var(--pkts-size-radius-circle, 999px);
 }
 
 /* Prepend/append modifiers for reduced padding */
 
 .pkts-chip.pkts-prepend {
-  padding-left: var(--esnet-size-spacing-xsmall, 4px);
+  padding-left: var(--pkts-size-spacing-xsmall, 4px);
 }
 
 .pkts-chip.pkts-append {
-  padding-right: var(--esnet-size-spacing-xsmall, 4px);
+  padding-right: var(--pkts-size-spacing-xsmall, 4px);
 }
 
 /* Delete icon */
 
 .pkts-chip .delete-icon {
-  width: var(--esnet-size-spacing-medium, 16px);
+  width: var(--pkts-size-spacing-medium, 16px);
   aspect-ratio: 1 / 1;
 }
diff --git a/packages/ui-css/src/components/code-block.css b/packages/ui-css/src/components/code-block.css
index bcdb2ead..16f29b09 100644
--- a/packages/ui-css/src/components/code-block.css
+++ b/packages/ui-css/src/components/code-block.css
@@ -2,24 +2,24 @@
   /* Layout */
   display: flex;
   position: relative;
-  padding: var(--esnet-size-spacing-xsmall, 8px);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
   flex-direction: column;
-  gap: var(--esnet-size-spacing-xsmall, 8px);
+  gap: var(--pkts-size-spacing-xsmall, 8px);
 
   /* Styling */
-  border-radius: var(--esnet-size-radius-large);
+  border-radius: var(--pkts-size-radius-large);
   background: var(--color-core-white-500, #d9d9d9);
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  color: var(--pkts-color-light-copy, #3d3d3d);
 
   /* Typography */
-  font: var(--esnet-typography-copy-1-mono-font, 400 16px/120% var(--esnet-font-family-body-mono));
+  font: var(--pkts-typography-copy-1-mono-font, 400 16px/120% var(--pkts-font-family-body-mono));
   white-space: pre;
   overflow: auto;
 }
 
 .dark .pkts-code-block {
-  background: var(--esnet-color-core-black-800, #252526);
-  color: var(--esnet-color-dark-copy, #fff);
+  background: var(--pkts-color-core-black-800, #252526);
+  color: var(--pkts-color-dark-copy, #fff);
 }
 
 .pkts-code-block .pkts-code-block-top {
@@ -33,16 +33,16 @@
 
 .pkts-code-block .pkts-code-block-lang-chip {
   height: 16px;
-  padding: 0 var(--esnet-size-spacing-xxsmall, 4px);
-  border-radius: var(--esnet-size-radius-large, 0.375rem);
-  background-color: var(--esnet-color-light-surface-1, #e3e3e3);
-  color: var(--esnet-color-light-copy-alt, #6e6e70);
-  font: var(--esnet-typography-label-1-mono-font, 400 12px/120% var(--esnet-font-family-body-mono));
+  padding: 0 var(--pkts-size-spacing-xxsmall, 4px);
+  border-radius: var(--pkts-size-radius-large, 0.375rem);
+  background-color: var(--pkts-color-light-surface-1, #e3e3e3);
+  color: var(--pkts-color-light-copy-alt, #6e6e70);
+  font: var(--pkts-typography-label-1-mono-font, 400 12px/120% var(--pkts-font-family-body-mono));
 }
 
 .dark .pkts-code-block .pkts-code-block-lang-chip {
-  background-color: var(--esnet-color-dark-surface-1, #19191a);
-  color: var(--esnet-color-dark-copy-alt, #c2c2c2);
+  background-color: var(--pkts-color-dark-surface-1, #19191a);
+  color: var(--pkts-color-dark-copy-alt, #c2c2c2);
 }
 
 .pkts-code-block button {
@@ -53,11 +53,11 @@
   font: inherit;
   width: 16px;
   height: 16px;
-  color: var(--esnet-color-light-copy-alt, #6e6e70);
+  color: var(--pkts-color-light-copy-alt, #6e6e70);
 }
 
 .dark .pkts-code-block button {
-  color: var(--esnet-color-dark-copy-alt, #c2c2c2);
+  color: var(--pkts-color-dark-copy-alt, #c2c2c2);
 }
 
 .pkts-code-block button svg {
@@ -70,11 +70,11 @@
 }
 
 .pkts-code-block button:focus {
-  border-bottom: 1px solid var(--esnet-color-light-copy-alt, #6e6e70);
+  border-bottom: 1px solid var(--pkts-color-light-copy-alt, #6e6e70);
 }
 
 .dark .pkts-code-block button:focus {
-  border-bottom: 1px solid var(--esnet-color-dark-copy-alt, #c2c2c2);
+  border-bottom: 1px solid var(--pkts-color-dark-copy-alt, #c2c2c2);
 }
 
 .pkts-code-block code {
diff --git a/packages/ui-css/src/components/data-table.css b/packages/ui-css/src/components/data-table.css
index 6f15b19f..ca2a496c 100644
--- a/packages/ui-css/src/components/data-table.css
+++ b/packages/ui-css/src/components/data-table.css
@@ -11,20 +11,20 @@
 */
 
 .pkts-data-table {
-  --background-color: var(--esnet-color-core-white-100, #fff);
-  --background-dark-color: var(--esnet-color-core-slate-1000, #30333b);
-  --header-background-color: var(--esnet-color-core-blue-900);
-  --header-copy-color: var(--esnet-color-core-white-100);
-  --body-copy-color: var(--esnet-color-light-copy, #1a1a1a);
+  --background-color: var(--pkts-color-core-white-100, #fff);
+  --background-dark-color: var(--pkts-color-core-slate-1000, #30333b);
+  --header-background-color: var(--pkts-color-core-blue-900);
+  --header-copy-color: var(--pkts-color-core-white-100);
+  --body-copy-color: var(--pkts-color-light-copy, #1a1a1a);
 
   --table-row-even-background-color: rgba(0, 0, 0, 0.05);
   --table-row-hover-background-color: rgba(0, 0, 0, 0.1);
 
-  --label-typography: var(--esnet-typography-header-6-sans-font);
+  --label-typography: var(--pkts-typography-header-6-sans-font);
 
-  --corner-radius: var(--esnet-size-radius-large, 6px);
-  --cell-padding: var(--esnet-size-spacing-xsmall, 8px)
-    var(--esnet-size-spacing-medium, 16px);
+  --corner-radius: var(--pkts-size-radius-large, 6px);
+  --cell-padding: var(--pkts-size-spacing-xsmall, 8px)
+    var(--pkts-size-spacing-medium, 16px);
 
   table-layout: auto;
   display: block;
@@ -46,7 +46,7 @@
   --table-row-even-background-color: rgba(0, 0, 0, 0.5);
   --table-row-hover-background-color: rgba(0, 0, 0, 0.6);
   --background-color: var(--background-dark-color);
-  --body-copy-color: var(--esnet-color-dark-copy, #e6e6e6);
+  --body-copy-color: var(--pkts-color-dark-copy, #e6e6e6);
 }
 
 /* Table Header */
@@ -89,10 +89,10 @@
 .pkts-data-table thead th .labelWrapper {
   display: flex;
   align-items: center;
-  gap: var(--esnet-size-spacing-xxsmall);
+  gap: var(--pkts-size-spacing-xxsmall);
   width: 100%;
   font: var(--label-typography);
-  color: var(--esnet-color-dark-copy, #e6e6e6);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
   cursor: pointer;
 }
 
@@ -118,8 +118,8 @@
 
 .pkts-data-table tbody tr {
   display: block;
-  padding: var(--esnet-size-spacing-medium) 0;
-  transition: background ease-in var(--esnet-time-duration-short, 100ms);
+  padding: var(--pkts-size-spacing-medium) 0;
+  transition: background ease-in var(--pkts-time-duration-short, 100ms);
   color: var(--body-copy-color);
 }
 
@@ -148,7 +148,7 @@
   display: block;
   content: attr(data-parent);
   font: var(--label-typography);
-  color: var(--esnet-color-copy-alt);
+  color: var(--pkts-color-copy-alt);
 }
 
 @media (min-width: 640px) {
@@ -204,16 +204,16 @@
 }
 
 .pkts-data-table tfoot td:first-of-type {
-  border-bottom-left-radius: var(--esnet-size-radius-large);
+  border-bottom-left-radius: var(--pkts-size-radius-large);
 }
 
 .pkts-data-table tfoot td:last-of-type {
-  border-bottom-right-radius: var(--esnet-size-radius-large);
+  border-bottom-right-radius: var(--pkts-size-radius-large);
 }
 
 /* Sort Icon */
 
 .pkts-data-table-sort-icon {
   display: inline-block;
-  width: var(--esnet-size-spacing-medium);
+  width: var(--pkts-size-spacing-medium);
 }
diff --git a/packages/ui-css/src/components/datum.css b/packages/ui-css/src/components/datum.css
index 21fbee10..11899001 100644
--- a/packages/ui-css/src/components/datum.css
+++ b/packages/ui-css/src/components/datum.css
@@ -1,11 +1,11 @@
 .pkts-datum {
   width: 100%;
   --label-font: var(
-    --esnet-typography-label-1-sans-font,
-    400 12px/120% var(--esnet-font-family-body-sans)
+    --pkts-typography-label-1-sans-font,
+    400 12px/120% var(--pkts-font-family-body-sans)
   );
   --label-letterspace: var(
-    --esnet-typography-label-2-sans-letterspacing,
+    --pkts-typography-label-2-sans-letterspacing,
     -0.18px
   );
 }
@@ -13,7 +13,7 @@
   .pkts-datum label,
   .pkts-datum .label {
     display: block;
-    color: var(--esnet-color-light-copy-alt, #a8a8a8);
+    color: var(--pkts-color-light-copy-alt, #a8a8a8);
 
     font: var(--label-font);
     letter-spacing: var(--label-letterspace);
@@ -21,20 +21,20 @@
 
   .dark .pkts-datum label,
   .dark .pkts-datum .label {
-      color: var(--esnet-color-dark-copy-alt, #a8a8a8);
+      color: var(--pkts-color-dark-copy-alt, #a8a8a8);
     }
 
   .pkts-datum span,
   .pkts-datum .value {
     font: var(
-      --esnet-typography-copy-1-sans-font,
-      400 16px/120% var(--esnet-font-family-body-sans)
+      --pkts-typography-copy-1-sans-font,
+      400 16px/120% var(--pkts-font-family-body-sans)
     );
 
-    color: var(--esnet-color-light-copy, #3d3d3d);
+    color: var(--pkts-color-light-copy, #3d3d3d);
   }
 
   .dark .pkts-datum span,
   .dark .pkts-datum .value {
-      color: var(--esnet-color-dark-copy, #e6e6e6);
+      color: var(--pkts-color-dark-copy, #e6e6e6);
     }
diff --git a/packages/ui-css/src/components/divider.css b/packages/ui-css/src/components/divider.css
index 6d48459c..e60efead 100644
--- a/packages/ui-css/src/components/divider.css
+++ b/packages/ui-css/src/components/divider.css
@@ -10,28 +10,28 @@
 
 .pkts-divider {
   /* Layout */
-  height: var(--esnet-size-border-width-small, 2px);
+  height: var(--pkts-size-border-width-small, 2px);
   width: 100%;
 
   /* Styling */
-  border-radius: var(--esnet-size-radius-circle, 999px);
+  border-radius: var(--pkts-size-radius-circle, 999px);
   border: none;
 
   /* Set the thickness of the line */
-  background-color: var(--esnet-color-light-copy-alt, #6E6E70);
+  background-color: var(--pkts-color-light-copy-alt, #6E6E70);
 }
 
 /* Dark Mode */
 .dark .pkts-divider {
-  background-color: var(--esnet-color-dark-copy-alt, #C2C2C2);
+  background-color: var(--pkts-color-dark-copy-alt, #C2C2C2);
 }
 
 /* Branded variant */
 .pkts-divider.pkts-branded {
-  background-color: var(--esnet-color-light-primary, #0088B5);
+  background-color: var(--pkts-color-light-primary, #0088B5);
 }
 
 /* Dark Mode */
 .dark .pkts-divider.pkts-branded {
-  background-color: var(--esnet-color-dark-primary, #004573);
+  background-color: var(--pkts-color-dark-primary, #004573);
 }
diff --git a/packages/ui-css/src/components/dropdown.css b/packages/ui-css/src/components/dropdown.css
index e3015852..5991e04b 100644
--- a/packages/ui-css/src/components/dropdown.css
+++ b/packages/ui-css/src/components/dropdown.css
@@ -9,25 +9,25 @@
   z-index: 10000;
   overflow: auto;
   height: fit-content;
-  padding: var(--esnet-size-spacing-xsmall, 4px);
-  background: var(--esnet-color-light-surface-1);
-  box-shadow: var(--esnet-box-shadow-core-medium);
+  padding: var(--pkts-size-spacing-xsmall, 4px);
+  background: var(--pkts-color-light-surface-1);
+  box-shadow: var(--pkts-box-shadow-core-medium);
 }
 
 .dark .pkts-dropdown .pkts-dropdown-content {
-  background: var(--esnet-color-dark-surface-1);
+  background: var(--pkts-color-dark-surface-1);
 }
 
 .pkts-dropdown .pkts-dropdown-caret {
   position: absolute;
   width: 10px;
   height: 10px;
-  background: var(--esnet-color-light-surface-1);
+  background: var(--pkts-color-light-surface-1);
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
 }
 
 .dark .pkts-dropdown .pkts-dropdown-caret {
-  background: var(--esnet-color-dark-surface-1);
+  background: var(--pkts-color-dark-surface-1);
 }
 
 .pkts-dropdown .pkts-hidden {
diff --git a/packages/ui-css/src/components/form-section.css b/packages/ui-css/src/components/form-section.css
index e155f2c5..29f58a79 100644
--- a/packages/ui-css/src/components/form-section.css
+++ b/packages/ui-css/src/components/form-section.css
@@ -1,32 +1,32 @@
 .pkts-form-section {
-  --section-gap: var(--esnet-size-spacing-xxsmall, 4px);
+  --section-gap: var(--pkts-size-spacing-xxsmall, 4px);
 
-  padding: var(--esnet-size-spacing-medium);
-  border-radius: var(--esnet-size-spacing-xsmall);
+  padding: var(--pkts-size-spacing-medium);
+  border-radius: var(--pkts-size-spacing-xsmall);
 
-  margin-bottom: var(--esnet-size-spacing-medium);
-  background: var(--esnet-color-light-surface-1, #e3e3e3);
+  margin-bottom: var(--pkts-size-spacing-medium);
+  background: var(--pkts-color-light-surface-1, #e3e3e3);
 }
 
   .dark .pkts-form-section {
-    background: var(--esnet-color-dark-surface-1, #3d3d3d);
+    background: var(--pkts-color-dark-surface-1, #3d3d3d);
   }
 
   /* Left column - class-based or semantic */
   .pkts-form-section .left-col,
   .pkts-form-section > div:first-child {
-    margin-bottom: var(--esnet-size-spacing-medium);
+    margin-bottom: var(--pkts-size-spacing-medium);
   }
 
   .pkts-form-section .left-col > p,
   .pkts-form-section > div:first-child > p {
-      color: var(--esnet-color-copy-alt);
+      color: var(--pkts-color-copy-alt);
     }
 
   /* Right column - class-based or semantic */
   .pkts-form-section .right-col,
   .pkts-form-section > div:last-child {
-    margin-bottom: var(--esnet-size-spacing-medium);
+    margin-bottom: var(--pkts-size-spacing-medium);
   }
 
 .sheet & .pkts-form-section {
diff --git a/packages/ui-css/src/components/icon-button.css b/packages/ui-css/src/components/icon-button.css
index 31770fa1..25d9eaae 100644
--- a/packages/ui-css/src/components/icon-button.css
+++ b/packages/ui-css/src/components/icon-button.css
@@ -10,16 +10,16 @@
 */
 
 .pkts-icon-button {
-  --spacing-horizontal-layout-gap: var(--esnet-size-spacing-xxsmall, 4px);
+  --spacing-horizontal-layout-gap: var(--pkts-size-spacing-xxsmall, 4px);
 
   --spacing-height-medium: 40px;
-  --spacing-height-xxlarge: var(--esnet-size-spacing-xxlarge, 64px);
+  --spacing-height-xxlarge: var(--pkts-size-spacing-xxlarge, 64px);
 
-  --spacing-padding-horizontal: var(--esnet-size-spacing-large, 32px);
-  --spacing-padding-vertical: var(--esnet-size-spacing-xxsmall, 4px);
+  --spacing-padding-horizontal: var(--pkts-size-spacing-large, 32px);
+  --spacing-padding-vertical: var(--pkts-size-spacing-xxsmall, 4px);
 
-  --spacing-border-radius: var(--esnet-size-radius-xxlarge, 18px);
-  --spacing-border-width: var(--esnet-size-radius-small, 2px);
+  --spacing-border-radius: var(--pkts-size-radius-xxlarge, 18px);
+  --spacing-border-width: var(--pkts-size-radius-small, 2px);
 
   /* Layout */
   display: inline-flex;
@@ -31,27 +31,27 @@
   align-items: center;
   gap: var(--spacing-horizontal-layout-gap);
 
-  padding: var(--esnet-size-border-width-medium, 4px)
-    var(--esnet-size-spacing-medium, 16px);
+  padding: var(--pkts-size-border-width-medium, 4px)
+    var(--pkts-size-spacing-medium, 16px);
 
   /* Styling */
   border-radius: var(--spacing-border-radius);
   border: var(--spacing-border-width) solid
-    var(--esnet-color-core-blue-900, #004573);
-  box-shadow: var(var(--esnet-box-shadow-core-light));
-  color: var(--esnet-color-core-slate-900, #3f424d);
+    var(--pkts-color-core-blue-900, #004573);
+  box-shadow: var(var(--pkts-box-shadow-core-light));
+  color: var(--pkts-color-core-slate-900, #3f424d);
 
   transition:
-    background ease-in-out var(--esnet-time-duration-quick, 250ms),
-    border-color ease-in-out var(--esnet-time-duration-quick, 250ms),
-    box-shadow ease-in-out var(--esnet-time-duration-quick, 250ms);
+    background ease-in-out var(--pkts-time-duration-quick, 250ms),
+    border-color ease-in-out var(--pkts-time-duration-quick, 250ms),
+    box-shadow ease-in-out var(--pkts-time-duration-quick, 250ms);
 }
 
 /* Pseudo-events */
 
 .pkts-icon-button:hover {
   cursor: pointer;
-  box-shadow: var(--esnet-box-shadow-core-light);
+  box-shadow: var(--pkts-box-shadow-core-light);
 }
 
 .pkts-icon-button:disabled {
@@ -60,7 +60,7 @@
 
 /* Square variant — equal width and height, no horizontal padding, circular border-radius */
 .pkts-icon-button.pkts-square {
-  border-radius: var(--esnet-size-radius-circle, 999px);
+  border-radius: var(--pkts-size-radius-circle, 999px);
   width: var(--spacing-height-medium);
   padding: 0;
 }
diff --git a/packages/ui-css/src/components/icon.css b/packages/ui-css/src/components/icon.css
index ce792dc0..103d15f2 100644
--- a/packages/ui-css/src/components/icon.css
+++ b/packages/ui-css/src/components/icon.css
@@ -9,9 +9,9 @@ pkts-icon svg {
 }
 
 .pkts-icon {
-    color: var(--esnet-color-light-surface-2);
+    color: var(--pkts-color-light-surface-2);
 }
 
     .dark .pkts-icon {
-        color: var(--esnet-color-dark-surface-2);
+        color: var(--pkts-color-dark-surface-2);
     }
\ No newline at end of file
diff --git a/packages/ui-css/src/components/input-checkbox.css b/packages/ui-css/src/components/input-checkbox.css
index 8c44b12b..ed146498 100644
--- a/packages/ui-css/src/components/input-checkbox.css
+++ b/packages/ui-css/src/components/input-checkbox.css
@@ -10,21 +10,21 @@
   height: 100%;
   margin: 0;
   outline: none;
-  border-radius: var(--esnet-size-radius-large, 0.375rem);
+  border-radius: var(--pkts-size-radius-large, 0.375rem);
   border-style: solid;
-  border-width: var(--esnet-size-border-width-small, 0.125rem);
-  background-color: var(--esnet-color-core-white-100, #ffffff);
-  border-color: var(--esnet-color-light-shadow, #4d515e);
+  border-width: var(--pkts-size-border-width-small, 0.125rem);
+  background-color: var(--pkts-color-core-white-100, #ffffff);
+  border-color: var(--pkts-color-light-shadow, #4d515e);
 
   transition:
-    border-color var(--esnet-time-duration-quick, 250ms) ease,
-    background var(--esnet-time-duration-quick, 250ms) ease,
-    box-shadow var(--esnet-time-duration-quick, 250ms) ease;
+    border-color var(--pkts-time-duration-quick, 250ms) ease,
+    background var(--pkts-time-duration-quick, 250ms) ease,
+    box-shadow var(--pkts-time-duration-quick, 250ms) ease;
 }
 
 .dark .pkts-input-checkbox input {
-  background-color: var(--esnet-color-dark-surface-1, #19191a);
-  border-color: var(--esnet-color-dark-shadow, #5c5f6b);
+  background-color: var(--pkts-color-dark-surface-1, #19191a);
+  border-color: var(--pkts-color-dark-shadow, #5c5f6b);
 }
 
 .pkts-input-checkbox input:hover:not(:disabled),
@@ -32,22 +32,22 @@
   cursor: pointer;
   box-shadow:
     var(
-      --esnet-box-shadow-core-medium,
+      --pkts-box-shadow-core-medium,
       0px 2px 3px -1px rgba(0, 0, 0, 0.1),
       0px 4px 5px -1px rgba(0, 0, 0, 0.1)
     ),
-    0 0 0 1px var(--esnet-color-light-primary, #0088b5);
+    0 0 0 1px var(--pkts-color-light-primary, #0088b5);
 }
 
 .dark .pkts-input-checkbox input:hover:not(:disabled),
 .dark .pkts-input-checkbox input:focus:not(:disabled) {
   box-shadow:
     var(
-      --esnet-box-shadow-core-medium,
+      --pkts-box-shadow-core-medium,
       0px 2px 3px -1px rgba(0, 0, 0, 0.1),
       0px 4px 5px -1px rgba(0, 0, 0, 0.1)
     ),
-    0 0 0 1px var(--esnet-color-dark-secondary, #00b6f2);
+    0 0 0 1px var(--pkts-color-dark-secondary, #00b6f2);
 }
 
 .pkts-input-checkbox input:checked::after {
@@ -57,48 +57,48 @@
   width: 6px;
   height: 13px;
   border-style: solid;
-  border-color: var(--esnet-color-light-shadow, #4d515e);
+  border-color: var(--pkts-color-light-shadow, #4d515e);
   border-width: 0 3px 3px 0;
   transform: rotate(45deg);
   pointer-events: none;
 }
 
 .dark .pkts-input-checkbox input:checked:not(:disabled)::after {
-  border-color: var(--esnet-color-core-white-100, #ffffff);
+  border-color: var(--pkts-color-core-white-100, #ffffff);
 }
 
 .pkts-input-checkbox input:disabled {
   cursor: default;
   pointer-events: none;
-  accent-color: var(--esnet-color-light-surface-2, #f3f4f8);
-  background-color: var(--esnet-color-light-surface-2, #f3f4f8);
-  border-color: var(--esnet-color-light-shadow, #4d515e);
+  accent-color: var(--pkts-color-light-surface-2, #f3f4f8);
+  background-color: var(--pkts-color-light-surface-2, #f3f4f8);
+  border-color: var(--pkts-color-light-shadow, #4d515e);
 }
 
 .dark .pkts-input-checkbox input:disabled {
-  accent-color: var(--esnet-color-dark-surface-2, #23242a);
-  background-color: var(--esnet-color-dark-surface-2, #23242a);
-  border-color: var(--esnet-color-dark-shadow, #5c5f6b);
+  accent-color: var(--pkts-color-dark-surface-2, #23242a);
+  background-color: var(--pkts-color-dark-surface-2, #23242a);
+  border-color: var(--pkts-color-dark-shadow, #5c5f6b);
 }
 
 .pkts-input-checkbox input:disabled:checked::after {
-  border-color: var(--esnet-color-light-copy-alt, #b0b3ba);
+  border-color: var(--pkts-color-light-copy-alt, #b0b3ba);
 }
 
 .dark .pkts-input-checkbox input:disabled:checked::after {
-  border-color: var(--esnet-color-dark-copy-alt, #7c7f8a);
+  border-color: var(--pkts-color-dark-copy-alt, #7c7f8a);
 }
 
 .pkts-input-checkbox.pkts-branded input:checked:not(:disabled) {
-  accent-color: var(--esnet-color-light-primary, #0088b5);
-  background-color: var(--esnet-color-light-primary, #0088b5);
+  accent-color: var(--pkts-color-light-primary, #0088b5);
+  background-color: var(--pkts-color-light-primary, #0088b5);
 }
 
 .dark .pkts-input-checkbox.pkts-branded input:checked:not(:disabled) {
-  accent-color: var(--esnet-color-dark-primary, #004573);
-  background-color: var(--esnet-color-dark-primary, #004573);
+  accent-color: var(--pkts-color-dark-primary, #004573);
+  background-color: var(--pkts-color-dark-primary, #004573);
 }
 
 .pkts-input-checkbox.pkts-branded input:checked:not(:disabled)::after {
-  border-color: var(--esnet-color-core-white-100, #ffffff);
+  border-color: var(--pkts-color-core-white-100, #ffffff);
 }
\ No newline at end of file
diff --git a/packages/ui-css/src/components/input-date-picker.css b/packages/ui-css/src/components/input-date-picker.css
index beafac54..b9d0d28a 100644
--- a/packages/ui-css/src/components/input-date-picker.css
+++ b/packages/ui-css/src/components/input-date-picker.css
@@ -28,24 +28,24 @@
   min-height: 272px;
 
   /* Styling */
-  background-color: var(--esnet-color-light-surface-2, #f2f2f2);
-  color: var(--esnet-color-light-copy, #3d3d3d);
-  box-shadow: var(--esnet-box-shadow-core-medium);
+  background-color: var(--pkts-color-light-surface-2, #f2f2f2);
+  color: var(--pkts-color-light-copy, #3d3d3d);
+  box-shadow: var(--pkts-box-shadow-core-medium);
 
   /* Typography */
   font: var(
-    --esnet-typography-copy-1-sans-font,
-    400 16px/120% var(--esnet-font-family-body-sans)
+    --pkts-typography-copy-1-sans-font,
+    400 16px/120% var(--pkts-font-family-body-sans)
   );
 }
 
 .dark .pkts-input-date-picker {
-  background-color: var(--esnet-color-dark-surface-2, #000000);
-  color: var(--esnet-color-dark-copy, #ffffff);
+  background-color: var(--pkts-color-dark-surface-2, #000000);
+  color: var(--pkts-color-dark-copy, #ffffff);
 }
 
 .pkts-input-date-picker.pkts-branded {
-  border-radius: var(--esnet-size-radius-medium, 0.25rem);
+  border-radius: var(--pkts-size-radius-medium, 0.25rem);
 }
 
 /* Shared Button Styles */
@@ -55,56 +55,56 @@
   cursor: pointer;
   outline: none;
   box-sizing: border-box;
-  border-radius: var(--esnet-size-radius-medium, 0.5rem);
-  border-width: var(--esnet-size-border-width-small, 0.125rem);
+  border-radius: var(--pkts-size-radius-medium, 0.5rem);
+  border-width: var(--pkts-size-border-width-small, 0.125rem);
   border-style: solid;
   border-color: transparent;
   background: transparent;
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  color: var(--pkts-color-light-copy, #3d3d3d);
 }
 
 .dark .pkts-input-date-picker button {
-  color: var(--esnet-color-dark-copy, #ffffff);
+  color: var(--pkts-color-dark-copy, #ffffff);
 }
 
 .pkts-input-date-picker button:hover:not(:disabled) {
   text-decoration: underline;
-  background-color: var(--esnet-color-core-blue-300, #64d2ff);
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  background-color: var(--pkts-color-core-blue-300, #64d2ff);
+  color: var(--pkts-color-light-copy, #3d3d3d);
 }
 
 .dark .pkts-input-date-picker button:hover:not(:disabled) {
-  background-color: var(--esnet-color-core-blue-400, #00b6f2);
-  color: var(--esnet-color-dark-copy, #ffffff);
+  background-color: var(--pkts-color-core-blue-400, #00b6f2);
+  color: var(--pkts-color-dark-copy, #ffffff);
 }
 
 .pkts-input-date-picker button:focus:not(:disabled) {
   text-decoration: underline;
-  border-color: var(--esnet-color-core-blue-300, #64d2ff);
+  border-color: var(--pkts-color-core-blue-300, #64d2ff);
 }
 
 .pkts-input-date-picker button:active:not(:disabled),
 .pkts-input-date-picker button.selected {
   text-decoration: underline;
-  background-color: var(--esnet-color-light-primary, #0088b5);
-  color: var(--esnet-color-light-surface-2);
+  background-color: var(--pkts-color-light-primary, #0088b5);
+  color: var(--pkts-color-light-surface-2);
   border-color: transparent !important;
 }
 
 .dark .pkts-input-date-picker button:active:not(:disabled),
 .dark .pkts-input-date-picker button.selected {
-  background-color: var(--esnet-color-core-blue-500, #00a0d6);
-  color: var(--esnet-color-dark-copy, #ffffff);
+  background-color: var(--pkts-color-core-blue-500, #00a0d6);
+  color: var(--pkts-color-dark-copy, #ffffff);
 }
 
 .pkts-input-date-picker button:disabled {
   border-color: transparent;
   cursor: default;
-  color: var(--esnet-color-core-white-600, #cccccc);
+  color: var(--pkts-color-core-white-600, #cccccc);
 }
 
 .dark .pkts-input-date-picker button:disabled {
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 /* Date Picker Styles */
@@ -112,23 +112,23 @@
 .pkts-input-date-picker-date {
   display: flex;
   flex-direction: column;
-  padding: var(--esnet-size-spacing-xsmall, 0.5rem);
+  padding: var(--pkts-size-spacing-xsmall, 0.5rem);
 }
 
 /* Navigation */
 
 .pkts-input-date-picker-date .nav {
   display: flex;
-  gap: var(--esnet-size-spacing-xsmall, 0.5rem);
+  gap: var(--pkts-size-spacing-xsmall, 0.5rem);
   justify-content: space-between;
   align-items: center;
-  min-height: var(--esnet-size-spacing-large, 2rem);
+  min-height: var(--pkts-size-spacing-large, 2rem);
   width: 100%;
 }
 
 .pkts-input-date-picker-date .nav-info {
   display: flex;
-  gap: var(--esnet-size-spacing-medium, 1rem);
+  gap: var(--pkts-size-spacing-medium, 1rem);
   justify-content: center;
   align-items: center;
 }
@@ -145,8 +145,8 @@
 
 .pkts-input-date-picker-date .nav-info button svg {
   cursor: pointer;
-  width: var(--esnet-size-spacing-medium, 1rem);
-  height: var(--esnet-size-spacing-medium, 1rem);
+  width: var(--pkts-size-spacing-medium, 1rem);
+  height: var(--pkts-size-spacing-medium, 1rem);
 }
 
 .pkts-input-date-picker-date .nav-button {
@@ -173,7 +173,7 @@
 
 .pkts-input-date-picker-date .day-grid-header {
   aspect-ratio: 1 / 1;
-  width: var(--esnet-size-spacing-large, 2rem);
+  width: var(--pkts-size-spacing-large, 2rem);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -184,7 +184,7 @@
   font: inherit;
   color: inherit;
   aspect-ratio: 1 / 1;
-  width: var(--esnet-size-spacing-large, 2rem);
+  width: var(--pkts-size-spacing-large, 2rem);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -193,48 +193,48 @@
 }
 
 .pkts-input-date-picker-date .day-grid-button.today {
-  border-radius: var(--esnet-size-radius-circle, 999px);
-  border-color: var(--esnet-color-light-primary, #0088b5);
+  border-radius: var(--pkts-size-radius-circle, 999px);
+  border-color: var(--pkts-color-light-primary, #0088b5);
 }
 
 .dark .pkts-input-date-picker-date .day-grid-button.today {
-  border-color: var(--esnet-color-dark-secondary, #00b6f2);
+  border-color: var(--pkts-color-dark-secondary, #00b6f2);
 }
 
 /* Date Range Specific Styles */
 
 .pkts-input-date-picker-date .day-grid-button.date-range-start {
-  border-radius: var(--esnet-size-radius-medium, 0.5rem)
-    var(--esnet-size-radius-none, 0px) var(--esnet-size-radius-none, 0px)
-    var(--esnet-size-radius-medium, 0.5rem) !important;
+  border-radius: var(--pkts-size-radius-medium, 0.5rem)
+    var(--pkts-size-radius-none, 0px) var(--pkts-size-radius-none, 0px)
+    var(--pkts-size-radius-medium, 0.5rem) !important;
 }
 
 .pkts-input-date-picker-date .day-grid-button.date-range-end {
-  border-radius: var(--esnet-size-radius-none, 0px)
-    var(--esnet-size-radius-medium, 0.5rem)
-    var(--esnet-size-radius-medium, 0.5rem) var(--esnet-size-radius-none, 0px) !important;
+  border-radius: var(--pkts-size-radius-none, 0px)
+    var(--pkts-size-radius-medium, 0.5rem)
+    var(--pkts-size-radius-medium, 0.5rem) var(--pkts-size-radius-none, 0px) !important;
 }
 
 .pkts-input-date-picker-date .day-grid-button.date-range-edge {
-  background-color: var(--esnet-color-light-primary, #0088b5) !important;
-  color: var(--esnet-color-light-surface-2, #f2f2f2) !important;
+  background-color: var(--pkts-color-light-primary, #0088b5) !important;
+  color: var(--pkts-color-light-surface-2, #f2f2f2) !important;
 }
 
 .dark .pkts-input-date-picker-date .day-grid-button.date-range-edge {
-  background-color: var(--esnet-color-core-blue-500, #00a0d6) !important;
-  color: var(--esnet-color-dark-copy, #ffffff) !important;
+  background-color: var(--pkts-color-core-blue-500, #00a0d6) !important;
+  color: var(--pkts-color-dark-copy, #ffffff) !important;
 }
 
 .pkts-input-date-picker-date .day-grid-button.date-range-middle {
-  background-color: var(--esnet-color-core-blue-300, #64d2ff) !important;
-  color: var(--esnet-color-light-copy, #3d3d3d) !important;
-  border-radius: var(--esnet-size-radius-none, 0px) !important;
+  background-color: var(--pkts-color-core-blue-300, #64d2ff) !important;
+  color: var(--pkts-color-light-copy, #3d3d3d) !important;
+  border-radius: var(--pkts-size-radius-none, 0px) !important;
   border: none !important;
 }
 
 .dark .pkts-input-date-picker-date .day-grid-button.date-range-middle {
-  background-color: var(--esnet-color-core-blue-400, #00b6f2) !important;
-  color: var(--esnet-color-dark-copy, #ffffff) !important;
+  background-color: var(--pkts-color-core-blue-400, #00b6f2) !important;
+  color: var(--pkts-color-dark-copy, #ffffff) !important;
 }
 
 /* Month Grid */
@@ -243,7 +243,7 @@
   display: grid;
   height: 100%;
   grid-template-columns: repeat(3, 1fr);
-  gap: var(--esnet-size-spacing-small, 0.75rem);
+  gap: var(--pkts-size-spacing-small, 0.75rem);
   place-items: center;
   min-width: 224px;
 }
@@ -267,7 +267,7 @@
   display: grid;
   height: 100%;
   grid-template-columns: repeat(4, 1fr);
-  gap: var(--esnet-size-spacing-xxsmall, 0.25rem);
+  gap: var(--pkts-size-spacing-xxsmall, 0.25rem);
   place-items: center;
   min-width: 224px;
 }
@@ -291,7 +291,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  padding: var(--esnet-size-spacing-xsmall, 0.5rem);
+  padding: var(--pkts-size-spacing-xsmall, 0.5rem);
 }
 
 .pkts-input-date-picker-time .time-wheel {
@@ -299,11 +299,11 @@
   flex-direction: column;
   align-items: center;
   overflow: hidden;
-  width: var(--esnet-size-spacing-large, 2rem);
+  width: var(--pkts-size-spacing-large, 2rem);
 }
 
 .pkts-input-date-picker-time .time-wheel .label {
-  min-height: var(--esnet-size-spacing-large, 2rem);
+  min-height: var(--pkts-size-spacing-large, 2rem);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -316,12 +316,12 @@
   grid-template-columns: repeat(1, 1fr);
   grid-auto-rows: 32px;
   place-items: center;
-  width: var(--esnet-size-spacing-large, 2rem);
-  max-height: calc(var(--esnet-size-spacing-large, 2rem) * 7);
+  width: var(--pkts-size-spacing-large, 2rem);
+  max-height: calc(var(--pkts-size-spacing-large, 2rem) * 7);
   overflow: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
-  --fade-from-color: var(--esnet-color-light-surface-2, #f2f2f2);
+  --fade-from-color: var(--pkts-color-light-surface-2, #f2f2f2);
   mask-image: linear-gradient(
     to bottom,
     transparent 0%,
@@ -332,15 +332,15 @@
 }
 
 .dark .pkts-input-date-picker-time .time-wheel-button-group {
-  --fade-from-color: var(--esnet-color-dark-surface-2, #000000);
+  --fade-from-color: var(--pkts-color-dark-surface-2, #000000);
 }
 
 .pkts-input-date-picker-time {
-  background-color: var(--esnet-color-light-surface-2, #f2f2f2);
+  background-color: var(--pkts-color-light-surface-2, #f2f2f2);
 }
 
 .dark .pkts-input-date-picker-time {
-  background-color: var(--esnet-color-dark-surface-2, #000000);
+  background-color: var(--pkts-color-dark-surface-2, #000000);
 }
 
 .pkts-input-date-picker-time .time-wheel-button-group::-webkit-scrollbar {
@@ -353,7 +353,7 @@
   color: inherit;
   padding: 0;
   aspect-ratio: 1 / 1;
-  width: var(--esnet-size-spacing-large, 2rem);
+  width: var(--pkts-size-spacing-large, 2rem);
   border: none;
   margin: 0;
 }
diff --git a/packages/ui-css/src/components/input-option.css b/packages/ui-css/src/components/input-option.css
index d1cbbb99..ae5f7bb7 100644
--- a/packages/ui-css/src/components/input-option.css
+++ b/packages/ui-css/src/components/input-option.css
@@ -1,13 +1,13 @@
 .pkts-input-option {
   display: flex;
-  padding: var(--esnet-size-spacing-xsmall, 8px);
-  padding-right: var(--esnet-size-spacing-xxsmall, 4px);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
+  padding-right: var(--pkts-size-spacing-xxsmall, 4px);
   width: 100%;
   min-height: fit-content;
 
   outline: none;
   align-items: center;
-  gap: var(--esnet-size-spacing-xsmall, 8px);
+  gap: var(--pkts-size-spacing-xsmall, 8px);
   overflow-y: hidden;
 
   background-color: transparent;
@@ -20,12 +20,12 @@
 .pkts-input-option:hover,
 .pkts-input-option:focus {
   cursor: pointer;
-  background-color: var(--esnet-color-light-surface-1, #cccccc);
+  background-color: var(--pkts-color-light-surface-1, #cccccc);
 }
 
 .dark .pkts-input-option:hover,
 .dark .pkts-input-option:focus {
-  background-color: var(--esnet-color-dark-surface-1, #252526);
+  background-color: var(--pkts-color-dark-surface-1, #252526);
 }
 
 .pkts-input-option .pkts-input-option-label {
@@ -44,11 +44,11 @@
 }
 
 .pkts-input-option.pkts-selected {
-  background-color: var(--esnet-color-light-surface-1, #cccccc);
+  background-color: var(--pkts-color-light-surface-1, #cccccc);
 }
 
 .dark .pkts-input-option.pkts-selected {
-  background-color: var(--esnet-color-dark-surface-1, #252526);
+  background-color: var(--pkts-color-dark-surface-1, #252526);
 }
 
 .pkts-input-option > svg {
@@ -58,9 +58,9 @@
 }
 
 .pkts-input-option.pkts-selected > svg {
-  color: var(--esnet-color-light-primary, #0088b5);
+  color: var(--pkts-color-light-primary, #0088b5);
 }
 
 .dark .pkts-input-option.pkts-selected > svg {
-  color: var(--esnet-color-dark-secondary, #004573);
+  color: var(--pkts-color-dark-secondary, #004573);
 }
diff --git a/packages/ui-css/src/components/input-radio.css b/packages/ui-css/src/components/input-radio.css
index 1758df58..98401dc1 100644
--- a/packages/ui-css/src/components/input-radio.css
+++ b/packages/ui-css/src/components/input-radio.css
@@ -1,6 +1,6 @@
 .pkts-input-radio {
-  width: var(--esnet-size-spacing-medium, 1rem);
-  height: var(--esnet-size-spacing-medium, 1rem);
+  width: var(--pkts-size-spacing-medium, 1rem);
+  height: var(--pkts-size-spacing-medium, 1rem);
 }
 
 .pkts-input-radio input {
@@ -9,40 +9,40 @@
   appearance: none;
   width: 100%;
   height: 100%;
-  border-radius: var(--esnet-size-radius-circle, 999px);
+  border-radius: var(--pkts-size-radius-circle, 999px);
   border-style: solid;
-  border-width: var(--esnet-size-spacing-xxsmall, 0.25rem);
-  border-color: var(--esnet-color-light-copy, #3d3d3d);
-  background-color: var(--esnet-color-light-copy, #3d3d3d);
+  border-width: var(--pkts-size-spacing-xxsmall, 0.25rem);
+  border-color: var(--pkts-color-light-copy, #3d3d3d);
+  background-color: var(--pkts-color-light-copy, #3d3d3d);
 
   transition:
-    border-color var(--esnet-time-duration-quick, 250ms) ease,
-    background var(--esnet-time-duration-quick, 250ms) ease,
-    box-shadow var(--esnet-time-duration-quick, 250ms) ease;
+    border-color var(--pkts-time-duration-quick, 250ms) ease,
+    background var(--pkts-time-duration-quick, 250ms) ease,
+    box-shadow var(--pkts-time-duration-quick, 250ms) ease;
   cursor: pointer;
 }
 
 .dark .pkts-input-radio input {
-  border-color: var(--esnet-color-dark-copy, #ffffff);
-  background-color: var(--esnet-color-dark-copy, #ffffff);
+  border-color: var(--pkts-color-dark-copy, #ffffff);
+  background-color: var(--pkts-color-dark-copy, #ffffff);
 }
 
 .pkts-input-radio input:checked:not(:disabled),
 .pkts-input-radio input:focus:not(:disabled),
 .pkts-input-radio input:hover:not(:disabled) {
-  border-color: var(--esnet-color-light-primary, #0088b5);
+  border-color: var(--pkts-color-light-primary, #0088b5);
 }
 
 .dark .pkts-input-radio input:checked:not(:disabled),
 .dark .pkts-input-radio input:focus:not(:disabled),
 .dark .pkts-input-radio input:hover:not(:disabled) {
-  border-color: var(--esnet-color-dark-secondary, #00b6f2);
+  border-color: var(--pkts-color-dark-secondary, #00b6f2);
 }
 
 .pkts-input-radio input:focus:not(:disabled),
 .pkts-input-radio input:hover:not(:disabled) {
   box-shadow: var(
-    --esnet-box-shadow-core-medium,
+    --pkts-box-shadow-core-medium,
     0px 2px 3px -1px rgba(0, 0, 0, 0.1),
     0px 4px 5px -1px rgba(0, 0, 0, 0.1)
   );
@@ -51,11 +51,11 @@
 .pkts-input-radio input:disabled {
   pointer-events: none;
   cursor: default;
-  background-color: var(--esnet-color-light-copy-alt, #4d515e);
-  border-color: var(--esnet-color-light-copy-alt, #4d515e);
+  background-color: var(--pkts-color-light-copy-alt, #4d515e);
+  border-color: var(--pkts-color-light-copy-alt, #4d515e);
 }
 
 .dark .pkts-input-radio input:disabled {
-  border-color: var(--esnet-color-dark-copy-alt, #c2c2c2);
-  background-color: var(--esnet-color-dark-copy-alt, #c2c2c2);
+  border-color: var(--pkts-color-dark-copy-alt, #c2c2c2);
+  background-color: var(--pkts-color-dark-copy-alt, #c2c2c2);
 }
diff --git a/packages/ui-css/src/components/input-row.css b/packages/ui-css/src/components/input-row.css
index 4cfc9929..51bf30a0 100644
--- a/packages/ui-css/src/components/input-row.css
+++ b/packages/ui-css/src/components/input-row.css
@@ -2,26 +2,26 @@
   width: 100%;
   cursor: auto;
   box-sizing: border-box;
-  gap: var(--esnet-size-spacing-xxsmall, 0.25rem);
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  gap: var(--pkts-size-spacing-xxsmall, 0.25rem);
+  color: var(--pkts-color-light-copy, #3d3d3d);
   display: flex;
   align-self: flex-start;
 }
 
 .dark .pkts-input-row {
-  color: var(--esnet-color-dark-copy, #ffffff);
+  color: var(--pkts-color-dark-copy, #ffffff);
 }
 
 .pkts-input-row:hover,
 .pkts-input-row:focus,
 .pkts-input-row:focus-within {
-  color: var(--esnet-color-light-primary, #0088b5);
+  color: var(--pkts-color-light-primary, #0088b5);
 }
 
 .dark .pkts-input-row:hover,
 .dark .pkts-input-row:focus,
 .dark .pkts-input-row:focus-within {
-  color: var(--esnet-color-dark-secondary, #00b6f2);
+  color: var(--pkts-color-dark-secondary, #00b6f2);
 }
 
 .pkts-input-row:has(input[type="checkbox"]),
@@ -39,13 +39,13 @@
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--esnet-size-spacing-xsmall, 0.5rem);
+  gap: var(--pkts-size-spacing-xsmall, 0.5rem);
 }
 
 .pkts-input-row.pkts-label-right {
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--esnet-size-spacing-xsmall, 0.5rem);
+  gap: var(--pkts-size-spacing-xsmall, 0.5rem);
 }
 
 .pkts-input-row.pkts-label-bottom {
@@ -58,9 +58,9 @@
 .pkts-input-row .pkts-input-row-label {
   display: inline-block;
   width: fit-content;
-  transition: color var(--esnet-time-duration-quick, 250ms) ease;
+  transition: color var(--pkts-time-duration-quick, 250ms) ease;
   white-space: nowrap;
-  font: var(--esnet-typography-label-1-large-font, 400 16px/120% var(--esnet-font-family-body-sans));
+  font: var(--pkts-typography-label-1-large-font, 400 16px/120% var(--pkts-font-family-body-sans));
 }
 
 .pkts-input-row.pkts-label-right .pkts-input-row-label {
@@ -68,25 +68,25 @@
 }
 
 .pkts-input-row .pkts-input-row-label.pkts-disabled {
-  color: var(--esnet-color-core-white-1000, #9e9e9e);
+  color: var(--pkts-color-core-white-1000, #9e9e9e);
 }
 
 .dark .pkts-input-row .pkts-input-row-label.pkts-disabled {
-  color: var(--esnet-color-core-black-100, #6e6e70);
+  color: var(--pkts-color-core-black-100, #6e6e70);
 }
 
 /* Required asterisk */
 
 .pkts-input-row .pkts-input-row-required {
   margin-left: 2px;
-  color: var(--esnet-color-core-red-600, #d61200);
+  color: var(--pkts-color-core-red-600, #d61200);
 }
 
 /* Caption (error or success message) */
 
 .pkts-input-row .pkts-input-row-caption {
   width: inherit;
-  font: var(--esnet-typography-label-1-sans-font, 400 16px/120% var(--esnet-font-family-body-sans));
+  font: var(--pkts-typography-label-1-sans-font, 400 16px/120% var(--pkts-font-family-body-sans));
 }
 
 .pkts-input-row.pkts-label-bottom .pkts-input-row-caption {
@@ -103,26 +103,26 @@
 }
 
 .pkts-input-row .pkts-input-row-caption.pkts-error {
-  color: var(--esnet-color-core-red-600, #d61200);
+  color: var(--pkts-color-core-red-600, #d61200);
 }
 
 .dark .pkts-input-row .pkts-input-row-caption.pkts-error {
-  color: var(--esnet-color-core-red-400, #ff404e);
+  color: var(--pkts-color-core-red-400, #ff404e);
 }
 
 .pkts-input-row .pkts-input-row-caption.pkts-success {
-  color: var(--esnet-color-light-success, #0e8a0e);
+  color: var(--pkts-color-light-success, #0e8a0e);
 }
 
 .dark .pkts-input-row .pkts-input-row-caption.pkts-success {
-  color: var(--esnet-color-dark-success, #11ad2b);
+  color: var(--pkts-color-dark-success, #11ad2b);
 }
 
 /* Tooltip icon */
 
 .pkts-input-row .pkts-input-row-tooltip-icon {
   display: inline-block;
-  margin-left: var(--esnet-size-spacing-xsmall, 0.5rem);
+  margin-left: var(--pkts-size-spacing-xsmall, 0.5rem);
   margin-top: auto;
   margin-bottom: auto;
   width: 12px;
diff --git a/packages/ui-css/src/components/input-select.css b/packages/ui-css/src/components/input-select.css
index e892415f..d0718825 100644
--- a/packages/ui-css/src/components/input-select.css
+++ b/packages/ui-css/src/components/input-select.css
@@ -9,51 +9,51 @@
   anchor-name: --input-select;
 
   /* Styling */
-  background-color: var(--esnet-color-core-white-100, #ffffff);
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  background-color: var(--pkts-color-core-white-100, #ffffff);
+  color: var(--pkts-color-light-copy, #3d3d3d);
   border-style: solid;
-  border-width: var(--esnet-size-border-width-xsmall, 0.0625rem);
-  border-color: var(--esnet-color-core-slate-900, #3f424d);
+  border-width: var(--pkts-size-border-width-xsmall, 0.0625rem);
+  border-color: var(--pkts-color-core-slate-900, #3f424d);
 
   /* Typography */
-  font: var(--esnet-typography-copy-1-sans-font, 400 16px/120% var(--esnet-font-family-body-sans));
+  font: var(--pkts-typography-copy-1-sans-font, 400 16px/120% var(--pkts-font-family-body-sans));
 
   transition:
-    border-color var(--esnet-time-duration-quick, 250ms) ease,
-    box-shadow var(--esnet-time-duration-quick, 250ms) ease;
+    border-color var(--pkts-time-duration-quick, 250ms) ease,
+    box-shadow var(--pkts-time-duration-quick, 250ms) ease;
 }
 
 .dark .pkts-input-select {
-  background-color: var(--esnet-color-dark-surface-1, #19191a);
-  color: var(--esnet-color-dark-copy, #ffffff);
-  border-color: var(--esnet-color-core-slate-100, #c3c7d9);
+  background-color: var(--pkts-color-dark-surface-1, #19191a);
+  color: var(--pkts-color-dark-copy, #ffffff);
+  border-color: var(--pkts-color-core-slate-100, #c3c7d9);
 }
 
 .pkts-input-select.pkts-error {
-  border-color: var(--esnet-color-core-red-700, #a6111b);
-  border-width: var(--esnet-size-border-width-small, 0.125rem);
-  box-shadow: 0 0 0 var(--esnet-size-border-width-small) color-mix(in srgb, var(--esnet-color-light-error, #a6111b) 26%, transparent);
+  border-color: var(--pkts-color-core-red-700, #a6111b);
+  border-width: var(--pkts-size-border-width-small, 0.125rem);
+  box-shadow: 0 0 0 var(--pkts-size-border-width-small) color-mix(in srgb, var(--pkts-color-light-error, #a6111b) 26%, transparent);
 }
 
 .pkts-input-select:hover:not(.pkts-disabled),
 .pkts-input-select:focus-within:not(.pkts-disabled),
 .pkts-input-select:has(*:active):not(.pkts-disabled) {
-  border-color: var(--esnet-color-core-slate-1000, #30333b);
-  box-shadow: 0 0 0 var(--esnet-size-border-width-small, 0.125rem) var(--esnet-color-core-blue-400, #00b6f2);
+  border-color: var(--pkts-color-core-slate-1000, #30333b);
+  box-shadow: 0 0 0 var(--pkts-size-border-width-small, 0.125rem) var(--pkts-color-core-blue-400, #00b6f2);
 }
 
 .pkts-input-select.pkts-disabled {
-  border-color: var(--esnet-color-core-slate-300, #9699a8);
-  color: var(--esnet-color-core-slate-300, #9699a8);
+  border-color: var(--pkts-color-core-slate-300, #9699a8);
+  color: var(--pkts-color-core-slate-300, #9699a8);
 }
 
 .dark .pkts-input-select.pkts-disabled {
-  border-color: var(--esnet-color-core-slate-500, #787b87);
-  color: var(--esnet-color-core-slate-500, #787b87);
+  border-color: var(--pkts-color-core-slate-500, #787b87);
+  color: var(--pkts-color-core-slate-500, #787b87);
 }
 
 .pkts-input-select.pkts-branded {
-  border-radius: var(--esnet-size-radius-xxlarge, 1.125rem);
+  border-radius: var(--pkts-size-radius-xxlarge, 1.125rem);
 }
 
 /* Input box */
@@ -68,11 +68,11 @@
   overflow: hidden;
   border: none;
   align-items: center;
-  padding: var(--esnet-size-spacing-xsmall, 8px);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
 }
 
 .pkts-input-select.pkts-branded .pkts-input-select-input-box {
-  padding: var(--esnet-size-spacing-xsmall, 8px) var(--esnet-size-spacing-medium, 16px);
+  padding: var(--pkts-size-spacing-xsmall, 8px) var(--pkts-size-spacing-medium, 16px);
 }
 
 /* Dropdown icon */
@@ -105,32 +105,32 @@
 
   display: flex;
   flex-direction: column;
-  padding-top: var(--esnet-size-spacing-xsmall, 8px);
+  padding-top: var(--pkts-size-spacing-xsmall, 8px);
   height: fit-content;
   max-height: 242px;
   overflow-y: auto;
-  padding-bottom: var(--esnet-size-spacing-xsmall, 8px);
+  padding-bottom: var(--pkts-size-spacing-xsmall, 8px);
 
-  background: var(--esnet-color-light-surface-2);
-  box-shadow: var(--esnet-box-shadow-core-medium);
+  background: var(--pkts-color-light-surface-2);
+  box-shadow: var(--pkts-box-shadow-core-medium);
 }
 
 .dark .pkts-input-select .pkts-input-select-dropdown {
-  background: var(--esnet-color-dark-surface-2);
+  background: var(--pkts-color-dark-surface-2);
 }
 
 /* Dropdown option */
 
 .pkts-input-select .pkts-input-select-dropdown-option {
   display: flex;
-  padding: var(--esnet-size-spacing-xsmall, 8px);
-  padding-right: var(--esnet-size-spacing-xxsmall, 4px);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
+  padding-right: var(--pkts-size-spacing-xxsmall, 4px);
   width: 100%;
   min-height: fit-content;
 
   outline: none;
   align-items: center;
-  gap: var(--esnet-size-spacing-xsmall, 8px);
+  gap: var(--pkts-size-spacing-xsmall, 8px);
   overflow-y: hidden;
 
   background-color: transparent;
@@ -143,12 +143,12 @@
 .pkts-input-select .pkts-input-select-dropdown-option:hover,
 .pkts-input-select .pkts-input-select-dropdown-option:focus {
   cursor: pointer;
-  background-color: var(--esnet-color-light-surface-1, #cccccc);
+  background-color: var(--pkts-color-light-surface-1, #cccccc);
 }
 
 .dark .pkts-input-select .pkts-input-select-dropdown-option:hover,
 .dark .pkts-input-select .pkts-input-select-dropdown-option:focus {
-  background-color: var(--esnet-color-dark-surface-1, #252526);
+  background-color: var(--pkts-color-dark-surface-1, #252526);
 }
 
 .pkts-input-select .pkts-input-select-dropdown-option > svg {
@@ -158,17 +158,17 @@
 }
 
 .pkts-input-select .pkts-input-select-dropdown-option .pkts-checked {
-  color: var(--esnet-color-light-primary, #0088b5);
+  color: var(--pkts-color-light-primary, #0088b5);
 }
 
 .dark .pkts-input-select .pkts-input-select-dropdown-option .pkts-checked {
-  color: var(--esnet-color-dark-secondary, #004573);
+  color: var(--pkts-color-dark-secondary, #004573);
 }
 
 /* No options label */
 
 .pkts-input-select .pkts-input-select-no-options {
-  padding: 0 var(--esnet-size-spacing-xsmall, 8px);
+  padding: 0 var(--pkts-size-spacing-xsmall, 8px);
   font-size: 0.8rem;
   overflow-x: hidden;
   text-overflow: ellipsis;
diff --git a/packages/ui-css/src/components/input-switch.css b/packages/ui-css/src/components/input-switch.css
index 062bfb5e..81395afc 100644
--- a/packages/ui-css/src/components/input-switch.css
+++ b/packages/ui-css/src/components/input-switch.css
@@ -10,9 +10,9 @@
 */
 
 .pkts-input-switch {
-  --interaction-color: var(--esnet-color-core-blue-600);
-  --interaction-border: var(--esnet-color-core-blue-700);
-  --interaction-shadow: var(--esnet-color-core-blue-300);
+  --interaction-color: var(--pkts-color-core-blue-600);
+  --interaction-border: var(--pkts-color-core-blue-700);
+  --interaction-shadow: var(--pkts-color-core-blue-300);
 
   position: relative;
   overflow: hidden;
@@ -20,23 +20,23 @@
   height: 26px;
 
   transition:
-    border-color var(--esnet-time-duration-quick, 250ms) ease,
-    box-shadow var(--esnet-time-duration-quick, 250ms) ease,
-    background-color var(--esnet-time-duration-quick, 250ms) ease;
+    border-color var(--pkts-time-duration-quick, 250ms) ease,
+    box-shadow var(--pkts-time-duration-quick, 250ms) ease,
+    background-color var(--pkts-time-duration-quick, 250ms) ease;
 
   border-style: solid;
-  border-width: var(--esnet-size-border-width-small, 0.125rem);
-  border-radius: var(--esnet-size-radius-circle, 999px);
+  border-width: var(--pkts-size-border-width-small, 0.125rem);
+  border-radius: var(--pkts-size-radius-circle, 999px);
 
-  background-color: var(--esnet-color-core-white-700, #c2c2c2);
-  border-color: var(--esnet-color-core-white-700, #c2c2c2);
+  background-color: var(--pkts-color-core-white-700, #c2c2c2);
+  border-color: var(--pkts-color-core-white-700, #c2c2c2);
 }
 
 /* Secondary color variant */
 .pkts-input-switch.pkts-secondary {
-  --interaction-color: var(--esnet-color-core-orange-600);
-  --interaction-border: var(--esnet-color-core-orange-700);
-  --interaction-shadow: var(--esnet-color-core-orange-300);
+  --interaction-color: var(--pkts-color-core-orange-600);
+  --interaction-border: var(--pkts-color-core-orange-700);
+  --interaction-shadow: var(--pkts-color-core-orange-300);
 }
 
 /* Checked state - automatic detection */
@@ -47,13 +47,13 @@
 
 .pkts-input-switch:hover:not(:has(input:disabled)),
 .pkts-input-switch:focus-within:not(:has(input:disabled)) {
-  box-shadow: 0 0 0 var(--esnet-size-border-width-small, 0.125rem)
-    var(--esnet-color-core-white-400);
+  box-shadow: 0 0 0 var(--pkts-size-border-width-small, 0.125rem)
+    var(--pkts-color-core-white-400);
 }
 
 .pkts-input-switch:hover:not(:has(input:disabled)):has(input:checked),
 .pkts-input-switch:focus-within:not(:has(input:disabled)):has(input:checked) {
-  box-shadow: 0 0 0 var(--esnet-size-border-width-small, 0.125rem)
+  box-shadow: 0 0 0 var(--pkts-size-border-width-small, 0.125rem)
     var(--interaction-shadow);
 }
 
@@ -65,21 +65,21 @@
 /* Disabled state - automatic detection */
 .pkts-input-switch:has(input:disabled) {
   cursor: default;
-  border-color: var(--esnet-color-core-white-500, #d9d9d9);
+  border-color: var(--pkts-color-core-white-500, #d9d9d9);
   box-shadow: none;
-  background-color: var(--esnet-color-core-white-500, #d9d9d9);
+  background-color: var(--pkts-color-core-white-500, #d9d9d9);
 }
 
 .pkts-input-switch:has(input:disabled:checked) {
   border-color: color-mix(
     in srgb,
     var(--interaction-color),
-    var(--esnet-color-core-white-500, #d9d9d9) 70%
+    var(--pkts-color-core-white-500, #d9d9d9) 70%
   );
   background-color: color-mix(
     in srgb,
     var(--interaction-color),
-    var(--esnet-color-core-white-500, #d9d9d9) 70%
+    var(--pkts-color-core-white-500, #d9d9d9) 70%
   );
 }
 
@@ -111,10 +111,10 @@
   aspect-ratio: 1 / 1;
   pointer-events: none;
   user-select: none;
-  border-radius: var(--esnet-size-radius-circle, 999px);
+  border-radius: var(--pkts-size-radius-circle, 999px);
 
-  background-color: var(--esnet-color-core-white-100, #ffffff);
-  color: var(--esnet-color-core-white-600, #cccccc);
+  background-color: var(--pkts-color-core-white-100, #ffffff);
+  color: var(--pkts-color-core-white-600, #cccccc);
 }
 
 /* Move indicator to right when checked */
@@ -126,10 +126,10 @@
 
 /* Active state for checked indicator */
 .pkts-input-switch:has(input:checked:active):not(:has(input:disabled)) .indicator {
-  background-color: var(--esnet-color-core-blue-100, #cff1ff);
+  background-color: var(--pkts-color-core-blue-100, #cff1ff);
 }
 
 /* Disabled indicator */
 .pkts-input-switch:has(input:disabled) .indicator {
-  background-color: var(--esnet-color-core-white-400, #d9d9d9);
+  background-color: var(--pkts-color-core-white-400, #d9d9d9);
 }
diff --git a/packages/ui-css/src/components/input-text-area.css b/packages/ui-css/src/components/input-text-area.css
index 904b755c..95a57e7e 100644
--- a/packages/ui-css/src/components/input-text-area.css
+++ b/packages/ui-css/src/components/input-text-area.css
@@ -4,39 +4,39 @@
   flex-direction: column;
   justify-content: space-between;
   width: auto;
-  padding: var(--esnet-size-spacing-xsmall, 8px);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
   overflow: auto;
-  min-height: var(--esnet-size-spacing-xxxlarge, 5.5rem);
-  min-width: var(--esnet-size-spacing-xxxlarge, 5.5rem);
+  min-height: var(--pkts-size-spacing-xxxlarge, 5.5rem);
+  min-width: var(--pkts-size-spacing-xxxlarge, 5.5rem);
 
   /* Styling */
   box-sizing: border-box;
-  background-color: var(--esnet-color-core-white-100, #ffffff);
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  background-color: var(--pkts-color-core-white-100, #ffffff);
+  color: var(--pkts-color-light-copy, #3d3d3d);
   border-style: solid;
-  border-width: var(--esnet-size-border-width-xsmall, 0.0625rem);
-  border-color: var(--esnet-color-core-slate-900, #3f424d);
+  border-width: var(--pkts-size-border-width-xsmall, 0.0625rem);
+  border-color: var(--pkts-color-core-slate-900, #3f424d);
 
-  transition: border-color var(--esnet-time-duration-quick, 250ms) ease,
-    box-shadow var(--esnet-time-duration-quick, 250ms) ease;
+  transition: border-color var(--pkts-time-duration-quick, 250ms) ease,
+    box-shadow var(--pkts-time-duration-quick, 250ms) ease;
 }
 
   .dark .pkts-input-text-area {
-    background-color: var(--esnet-color-dark-surface-1, #19191a);
-    color: var(--esnet-color-dark-copy, #ffffff);
-    border-color: var(--esnet-color-core-slate-100, #c3c7d9);
+    background-color: var(--pkts-color-dark-surface-1, #19191a);
+    color: var(--pkts-color-dark-copy, #ffffff);
+    border-color: var(--pkts-color-core-slate-100, #c3c7d9);
   }
 
   .dark textarea,
   .packets.dark textarea,
   .dark .packets textarea {
-    background-color: var(--esnet-color-dark-surface-1, #19191a);
-    color: var(--esnet-color-dark-copy, #ffffff);
+    background-color: var(--pkts-color-dark-surface-1, #19191a);
+    color: var(--pkts-color-dark-copy, #ffffff);
   }
 
   .pkts-input-text-area {
-  font: var(--esnet-typography-copy-1-sans-font,
-    400 16px/120% var(--esnet-font-family-body-sans));
+  font: var(--pkts-typography-copy-1-sans-font,
+    400 16px/120% var(--pkts-font-family-body-sans));
 }
 
   /* Typography */
@@ -47,35 +47,35 @@
 
   .pkts-input-text-area.pkts-error,
   .pkts-input-text-area:invalid {
-    border-color: var(--esnet-color-core-red-700, #a6111b);
-    border-width: var(--esnet-size-border-width-small, 0.125rem);
-    box-shadow: 0 0 0 var(--esnet-size-border-width-small) color-mix(in srgb, var(--esnet-color-light-error, #a6111b) 26%, transparent);
+    border-color: var(--pkts-color-core-red-700, #a6111b);
+    border-width: var(--pkts-size-border-width-small, 0.125rem);
+    box-shadow: 0 0 0 var(--pkts-size-border-width-small) color-mix(in srgb, var(--pkts-color-light-error, #a6111b) 26%, transparent);
   }
 
   .pkts-input-text-area:hover:not(.disabled),
   .pkts-input-text-area:focus-within:not(.disabled),
   .pkts-input-text-area:has(*:active):not(.disabled) {
     /* border color on focus takes precedence over error border color */
-    border-color: var(--esnet-color-core-slate-1000, #30333b);
-    box-shadow: 0 0 0 var(--esnet-size-border-width-small, 0.125rem) var(--esnet-color-core-blue-400, #00b6f2);
+    border-color: var(--pkts-color-core-slate-1000, #30333b);
+    box-shadow: 0 0 0 var(--pkts-size-border-width-small, 0.125rem) var(--pkts-color-core-blue-400, #00b6f2);
   }
 
   /* based on a pseudo event of input tag (disabled), thus included here */
 
   .pkts-input-text-area.pkts-disabled,
   .pkts-input-text-area:disabled {
-    border-color: var(--esnet-color-core-slate-300, #9699a8);
+    border-color: var(--pkts-color-core-slate-300, #9699a8);
   }
 
   .dark .pkts-input-text-area.pkts-disabled,
   .dark .pkts-input-text-area:disabled {
-    border-color: var(--esnet-color-core-slate-500, #787b87);
+    border-color: var(--pkts-color-core-slate-500, #787b87);
   }
 
   /* Variants */
 
   .pkts-input-text-area.pkts-branded {
-    border-radius: var(--esnet-size-radius-xlarge, 6px);
+    border-radius: var(--pkts-size-radius-xlarge, 6px);
   }
 
   /* Modifiers */
@@ -108,7 +108,7 @@
 /* Pseudo-elements */
 
 .pkts-input-text-area textarea::-webkit-resizer {
-    padding: var(--esnet-size-spacing-xxsmall, 4px);
+    padding: var(--pkts-size-spacing-xxsmall, 4px);
     background-color: transparent;
     background-image: none;
   }
@@ -118,35 +118,35 @@
   }
 
 .pkts-input-text-area textarea::placeholder {
-    color: var(--esnet-color-light-copy-alt, #6e6e70);
+    color: var(--pkts-color-light-copy-alt, #6e6e70);
   }
 
 .dark .pkts-input-text-area textarea::placeholder {
-    color: var(--esnet-color-dark-copy-alt, #c2c2c2);
+    color: var(--pkts-color-dark-copy-alt, #c2c2c2);
   }
 
 /* Pseudo-events */
 
 .pkts-input-text-area textarea:disabled {
-    color: var(--esnet-color-core-white-900, #a8a8a8);
+    color: var(--pkts-color-core-white-900, #a8a8a8);
   }
 
 .pkts-input-text-area textarea:disabled::placeholder {
-      color: var(--esnet-color-core-white-900, #a8a8a8);
+      color: var(--pkts-color-core-white-900, #a8a8a8);
     }
 
 .dark .pkts-input-text-area textarea:disabled {
-    color: var(--esnet-color-core-white-900, #a8a8a8);
+    color: var(--pkts-color-core-white-900, #a8a8a8);
   }
 
 .dark .pkts-input-text-area textarea:disabled::placeholder {
-      color: var(--esnet-color-core-white-900, #a8a8a8);
+      color: var(--pkts-color-core-white-900, #a8a8a8);
     }
 
 .pkts-input-text-area svg {
   align-self: flex-end;
   color: inherit;
   transform: scaleX(-1);
-  width: var(--esnet-size-spacing-medium, 8px);
-  height: var(--esnet-size-spacing-medium, 8px);
+  width: var(--pkts-size-spacing-medium, 8px);
+  height: var(--pkts-size-spacing-medium, 8px);
 }
\ No newline at end of file
diff --git a/packages/ui-css/src/components/input-text.css b/packages/ui-css/src/components/input-text.css
index a4bb0cba..b38806dd 100644
--- a/packages/ui-css/src/components/input-text.css
+++ b/packages/ui-css/src/components/input-text.css
@@ -16,38 +16,38 @@
   box-sizing: border-box;
 
   /* Styling */
-  background-color: var(--esnet-color-core-white-100, #ffffff);
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  background-color: var(--pkts-color-core-white-100, #ffffff);
+  color: var(--pkts-color-light-copy, #3d3d3d);
   border-style: solid;
-  border-width: var(--esnet-size-border-width-xsmall, 0.0625rem);
-  border-color: var(--esnet-color-core-slate-900, #3f424d);
+  border-width: var(--pkts-size-border-width-xsmall, 0.0625rem);
+  border-color: var(--pkts-color-core-slate-900, #3f424d);
 
   transition:
-    border-color var(--esnet-time-duration-quick, 250ms) ease,
-    box-shadow var(--esnet-time-duration-quick, 250ms) ease;
+    border-color var(--pkts-time-duration-quick, 250ms) ease,
+    box-shadow var(--pkts-time-duration-quick, 250ms) ease;
 
   /* Typography */
   font: var(
-    --esnet-typography-copy-1-sans-font,
-    400 16px/120% var(--esnet-font-family-body-sans)
+    --pkts-typography-copy-1-sans-font,
+    400 16px/120% var(--pkts-font-family-body-sans)
   );
 }
 
 .dark .pkts-input-text {
-  background-color: var(--esnet-color-dark-surface-1, #19191a);
-  color: var(--esnet-color-dark-copy, #ffffff);
-  border-color: var(--esnet-color-core-slate-100, #c3c7d9);
+  background-color: var(--pkts-color-dark-surface-1, #19191a);
+  color: var(--pkts-color-dark-copy, #ffffff);
+  border-color: var(--pkts-color-core-slate-100, #c3c7d9);
 }
 
 /* Error state */
 
 .pkts-input-text.pkts-error {
-  border-color: var(--esnet-color-core-red-700, #a6111b);
-  border-width: var(--esnet-size-border-width-small, 0.125rem);
-  box-shadow: 0 0 0 var(--esnet-size-border-width-small)
+  border-color: var(--pkts-color-core-red-700, #a6111b);
+  border-width: var(--pkts-size-border-width-small, 0.125rem);
+  box-shadow: 0 0 0 var(--pkts-size-border-width-small)
     color-mix(
       in srgb,
-      var(--esnet-color-light-error, #a6111b) 26%,
+      var(--pkts-color-light-error, #a6111b) 26%,
       transparent
     );
 }
@@ -58,26 +58,26 @@
 .pkts-input-text:focus-within:not(.pkts-disabled),
 .pkts-input-text:has(*:active):not(.pkts-disabled) {
   /* border color on focus takes precedence over error border color */
-  border-color: var(--esnet-color-core-slate-1000, #30333b);
-  box-shadow: 0 0 0 var(--esnet-size-border-width-small, 0.125rem)
-    var(--esnet-color-core-blue-400, #00b6f2);
+  border-color: var(--pkts-color-core-slate-1000, #30333b);
+  box-shadow: 0 0 0 var(--pkts-size-border-width-small, 0.125rem)
+    var(--pkts-color-core-blue-400, #00b6f2);
 }
 
 /* Disabled state */
 
 .pkts-input-text.pkts-disabled {
-  border-color: var(--esnet-color-core-slate-300, #9699a8);
+  border-color: var(--pkts-color-core-slate-300, #9699a8);
   cursor: default;
 }
 
 .dark .pkts-input-text.pkts-disabled {
-  border-color: var(--esnet-color-core-slate-500, #787b87);
+  border-color: var(--pkts-color-core-slate-500, #787b87);
 }
 
 /* Branded variant */
 
 .pkts-input-text.pkts-branded {
-  border-radius: var(--esnet-size-radius-circle, 999px);
+  border-radius: var(--pkts-size-radius-circle, 999px);
 }
 
 /* Input element styles */
@@ -87,38 +87,38 @@
   width: 100%;
   box-sizing: border-box;
   font: inherit;
-  padding: var(--esnet-size-spacing-xsmall, 8px);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
 }
 
 .pkts-input-text input::placeholder {
-  color: var(--esnet-color-light-copy-alt, #6e6e70);
+  color: var(--pkts-color-light-copy-alt, #6e6e70);
 }
 
 .dark .pkts-input-text input::placeholder {
-  color: var(--esnet-color-dark-copy-alt, #c2c2c2);
+  color: var(--pkts-color-dark-copy-alt, #c2c2c2);
 }
 
 .pkts-input-text input:disabled {
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 .pkts-input-text input:disabled::placeholder {
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 .dark .pkts-input-text input:disabled {
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 .dark .pkts-input-text input:disabled::placeholder {
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 /* Branded variant - input padding adjustment */
 
 .pkts-input-text.pkts-branded input {
-  padding: var(--esnet-size-spacing-xsmall, 0.0625rem)
-    var(--esnet-size-spacing-medium, 0.25rem);
+  padding: var(--pkts-size-spacing-xsmall, 0.0625rem)
+    var(--pkts-size-spacing-medium, 0.25rem);
 }
 
 /* Action buttons container */
@@ -126,21 +126,21 @@
 .pkts-input-text .action-buttons,
 .pkts-input-text div {
   cursor: pointer;
-  padding-right: var(--esnet-size-spacing-xxsmall, 4px);
+  padding-right: var(--pkts-size-spacing-xxsmall, 4px);
   display: flex;
   align-items: center;
 }
 
 .pkts-input-text.pkts-branded .action-buttons:last-child,
 .pkts-input-text.pkts-branded div:last-child {
-  padding-right: var(--esnet-size-spacing-xsmall, 8px);
+  padding-right: var(--pkts-size-spacing-xsmall, 8px);
 }
 
 .pkts-input-text input:disabled + .action-buttons,
 .pkts-input-text input:disabled + div {
   cursor: default;
   pointer-events: none;
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 .pkts-input-text .action-buttons svg,
diff --git a/packages/ui-css/src/components/input-typeahead.css b/packages/ui-css/src/components/input-typeahead.css
index 97742c9a..3dc06fec 100644
--- a/packages/ui-css/src/components/input-typeahead.css
+++ b/packages/ui-css/src/components/input-typeahead.css
@@ -10,52 +10,52 @@
   anchor-name: --input-typeahead;
 
   /* Styling */
-  background-color: var(--esnet-color-core-white-100, #ffffff);
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  background-color: var(--pkts-color-core-white-100, #ffffff);
+  color: var(--pkts-color-light-copy, #3d3d3d);
   border-style: solid;
-  border-width: var(--esnet-size-border-width-xsmall, 0.0625rem);
-  border-color: var(--esnet-color-core-slate-900, #3f424d);
+  border-width: var(--pkts-size-border-width-xsmall, 0.0625rem);
+  border-color: var(--pkts-color-core-slate-900, #3f424d);
 
   /* Typography */
-  font: var(--esnet-typography-copy-1-sans-font, 400 16px/120% var(--esnet-font-family-body-sans));
+  font: var(--pkts-typography-copy-1-sans-font, 400 16px/120% var(--pkts-font-family-body-sans));
 
   transition:
-    border-color var(--esnet-time-duration-quick, 250ms) ease,
-    box-shadow var(--esnet-time-duration-quick, 250ms) ease;
+    border-color var(--pkts-time-duration-quick, 250ms) ease,
+    box-shadow var(--pkts-time-duration-quick, 250ms) ease;
 }
 
 .dark .pkts-input-typeahead {
-  background-color: var(--esnet-color-dark-surface-1, #19191a);
-  color: var(--esnet-color-dark-copy, #ffffff);
-  border-color: var(--esnet-color-core-slate-100, #c3c7d9);
+  background-color: var(--pkts-color-dark-surface-1, #19191a);
+  color: var(--pkts-color-dark-copy, #ffffff);
+  border-color: var(--pkts-color-core-slate-100, #c3c7d9);
 }
 
 .pkts-input-typeahead.pkts-error {
-  border-color: var(--esnet-color-core-red-700, #a6111b);
-  border-width: var(--esnet-size-border-width-small, 0.125rem);
-  box-shadow: 0 0 0 var(--esnet-size-border-width-small) color-mix(in srgb, var(--esnet-color-light-error, #a6111b) 26%, transparent);
+  border-color: var(--pkts-color-core-red-700, #a6111b);
+  border-width: var(--pkts-size-border-width-small, 0.125rem);
+  box-shadow: 0 0 0 var(--pkts-size-border-width-small) color-mix(in srgb, var(--pkts-color-light-error, #a6111b) 26%, transparent);
 }
 
 .pkts-input-typeahead:hover:not(.pkts-disabled),
 .pkts-input-typeahead:focus-within:not(.pkts-disabled),
 .pkts-input-typeahead:has(*:active):not(.pkts-disabled) {
-  border-color: var(--esnet-color-core-slate-1000, #30333b);
-  box-shadow: 0 0 0 var(--esnet-size-border-width-small, 0.125rem) var(--esnet-color-core-blue-400, #00b6f2);
+  border-color: var(--pkts-color-core-slate-1000, #30333b);
+  box-shadow: 0 0 0 var(--pkts-size-border-width-small, 0.125rem) var(--pkts-color-core-blue-400, #00b6f2);
 }
 
 .pkts-input-typeahead.pkts-disabled {
-  border-color: var(--esnet-color-core-slate-300, #9699a8);
-  color: var(--esnet-color-core-slate-300, #9699a8);
+  border-color: var(--pkts-color-core-slate-300, #9699a8);
+  color: var(--pkts-color-core-slate-300, #9699a8);
   cursor: default;
 }
 
 .dark .pkts-input-typeahead.pkts-disabled {
-  border-color: var(--esnet-color-core-slate-500, #787b87);
-  color: var(--esnet-color-core-slate-500, #787b87);
+  border-color: var(--pkts-color-core-slate-500, #787b87);
+  color: var(--pkts-color-core-slate-500, #787b87);
 }
 
 .pkts-input-typeahead.pkts-branded {
-  border-radius: var(--esnet-size-radius-xxlarge, 1.125rem);
+  border-radius: var(--pkts-size-radius-xxlarge, 1.125rem);
 }
 
 /* Input box */
@@ -76,15 +76,15 @@
   overflow: hidden;
   display: flex;
   flex-direction: column-reverse;
-  gap: var(--esnet-size-spacing-xxsmall, 4px);
+  gap: var(--pkts-size-spacing-xxsmall, 4px);
 }
 
 /* Selected options wrapper */
 
 .pkts-input-typeahead .pkts-input-typeahead-selected-wrapper {
   display: flex !important;
-  gap: var(--esnet-size-spacing-xsmall, 0.125rem);
-  padding: var(--esnet-size-spacing-xsmall, 8px) var(--esnet-size-spacing-xsmall, 8px) 0;
+  gap: var(--pkts-size-spacing-xsmall, 0.125rem);
+  padding: var(--pkts-size-spacing-xsmall, 8px) var(--pkts-size-spacing-xsmall, 8px) 0;
 }
 
 /* Search input */
@@ -94,55 +94,55 @@
   font: inherit;
   color: inherit;
   width: 100%;
-  padding: var(--esnet-size-spacing-xsmall, 8px);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
   box-sizing: border-box;
 }
 
 .pkts-input-typeahead .pkts-input-typeahead-search.pkts-no-options {
-  padding: var(--esnet-size-spacing-xsmall, 8px);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
 }
 
 .pkts-input-typeahead .pkts-input-typeahead-search::placeholder {
-  color: var(--esnet-color-light-copy-alt, #6e6e70);
+  color: var(--pkts-color-light-copy-alt, #6e6e70);
 }
 
 .dark .pkts-input-typeahead .pkts-input-typeahead-search::placeholder {
-  color: var(--esnet-color-dark-copy-alt, #c2c2c2);
+  color: var(--pkts-color-dark-copy-alt, #c2c2c2);
 }
 
 .pkts-input-typeahead .pkts-input-typeahead-search:disabled {
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 .pkts-input-typeahead .pkts-input-typeahead-search:disabled::placeholder {
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 .dark .pkts-input-typeahead .pkts-input-typeahead-search:disabled {
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 .dark .pkts-input-typeahead .pkts-input-typeahead-search:disabled::placeholder {
-  color: var(--esnet-color-core-white-900, #a8a8a8);
+  color: var(--pkts-color-core-white-900, #a8a8a8);
 }
 
 .pkts-input-typeahead .pkts-input-typeahead-search.pkts-branded {
-  padding-top: var(--esnet-size-spacing-xsmall, 8px);
-  padding-bottom: var(--esnet-size-spacing-xsmall, 8px);
-  padding-left: var(--esnet-size-spacing-medium, 16px);
+  padding-top: var(--pkts-size-spacing-xsmall, 8px);
+  padding-bottom: var(--pkts-size-spacing-xsmall, 8px);
+  padding-left: var(--pkts-size-spacing-medium, 16px);
 }
 
 /* Dropdown icon */
 
 .pkts-input-typeahead .pkts-input-typeahead-dropdown-icon {
   cursor: pointer;
-  margin-right: var(--esnet-size-spacing-xsmall, 0.5rem);
+  margin-right: var(--pkts-size-spacing-xsmall, 0.5rem);
   width: 20px;
   height: 20px;
 }
 
 .pkts-input-typeahead .pkts-input-typeahead-dropdown-icon.pkts-branded {
-  margin-right: var(--esnet-size-spacing-medium, 16px);
+  margin-right: var(--pkts-size-spacing-medium, 16px);
 }
 
 .pkts-input-typeahead.pkts-disabled .pkts-input-typeahead-dropdown-icon {
@@ -159,22 +159,22 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding-top: var(--esnet-size-spacing-xsmall, 8px);
+  padding-top: var(--pkts-size-spacing-xsmall, 8px);
   height: fit-content;
   z-index: 100;
 
-  background: var(--esnet-color-light-surface-2);
-  box-shadow: var(--esnet-box-shadow-core-medium);
+  background: var(--pkts-color-light-surface-2);
+  box-shadow: var(--pkts-box-shadow-core-medium);
 }
 
 .dark .pkts-input-typeahead .pkts-input-typeahead-dropdown {
-  background: var(--esnet-color-dark-surface-2);
+  background: var(--pkts-color-dark-surface-2);
 }
 
 /* Result info */
 
 .pkts-input-typeahead .pkts-input-typeahead-result-info {
-  padding: var(--esnet-size-spacing-xxsmall, 4px) var(--esnet-size-spacing-xsmall, 8px);
+  padding: var(--pkts-size-spacing-xxsmall, 4px) var(--pkts-size-spacing-xsmall, 8px);
   font-size: 0.8rem;
   overflow-x: hidden;
   text-overflow: ellipsis;
@@ -188,20 +188,20 @@
 .pkts-input-typeahead .pkts-input-typeahead-dropdown-options {
   max-height: 200px;
   overflow-x: hidden;
-  padding-bottom: var(--esnet-size-spacing-xsmall, 8px);
+  padding-bottom: var(--pkts-size-spacing-xsmall, 8px);
 }
 
 /* Dropdown option */
 
 .pkts-input-typeahead .pkts-input-typeahead-dropdown-option {
   display: flex;
-  padding: var(--esnet-size-spacing-xsmall, 8px);
-  padding-right: var(--esnet-size-spacing-xxsmall, 4px);
+  padding: var(--pkts-size-spacing-xsmall, 8px);
+  padding-right: var(--pkts-size-spacing-xxsmall, 4px);
   width: 100%;
 
   outline: none;
   align-items: center;
-  gap: var(--esnet-size-spacing-xsmall, 8px);
+  gap: var(--pkts-size-spacing-xsmall, 8px);
   text-overflow: ellipsis;
   word-break: break-all;
   overflow: hidden;
@@ -216,12 +216,12 @@
 .pkts-input-typeahead .pkts-input-typeahead-dropdown-option:hover,
 .pkts-input-typeahead .pkts-input-typeahead-dropdown-option:focus {
   cursor: pointer;
-  background-color: var(--esnet-color-light-surface-1, #cccccc);
+  background-color: var(--pkts-color-light-surface-1, #cccccc);
 }
 
 .dark .pkts-input-typeahead .pkts-input-typeahead-dropdown-option:hover,
 .dark .pkts-input-typeahead .pkts-input-typeahead-dropdown-option:focus {
-  background-color: var(--esnet-color-dark-surface-1, #252526);
+  background-color: var(--pkts-color-dark-surface-1, #252526);
 }
 
 .pkts-input-typeahead .pkts-input-typeahead-dropdown-option > svg {
@@ -239,9 +239,9 @@
 }
 
 .pkts-input-typeahead .pkts-input-typeahead-dropdown-option .pkts-checked {
-  color: var(--esnet-color-light-primary, #0088b5);
+  color: var(--pkts-color-light-primary, #0088b5);
 }
 
 .dark .pkts-input-typeahead .pkts-input-typeahead-dropdown-option .pkts-checked {
-  color: var(--esnet-color-dark-secondary, #004573);
+  color: var(--pkts-color-dark-secondary, #004573);
 }
diff --git a/packages/ui-css/src/components/label.css b/packages/ui-css/src/components/label.css
index dc7716c5..6a20be4f 100644
--- a/packages/ui-css/src/components/label.css
+++ b/packages/ui-css/src/components/label.css
@@ -4,50 +4,50 @@
   width: stretch;
   display: flex;
   flex-direction: column;
-  gap: var(--esnet-size-spacing-xxsmall, 0.25rem);
+  gap: var(--pkts-size-spacing-xxsmall, 0.25rem);
 }
 
 .pkts-label .pkts-label-text {
-  transition: color var(--esnet-time-duration-quick, 250ms) ease;
-  font: var(--esnet-typography-label-1-large-font, 400 16px/120% var(--esnet-font-family-body-sans));
+  transition: color var(--pkts-time-duration-quick, 250ms) ease;
+  font: var(--pkts-typography-label-1-large-font, 400 16px/120% var(--pkts-font-family-body-sans));
 }
 
 .dark .pkts-label .pkts-label-text {
-  color: var(--esnet-color-core-slate-200, #acb0bf);
+  color: var(--pkts-color-core-slate-200, #acb0bf);
 }
 
 .pkts-label .pkts-label-text:has(~ *:hover),
 .pkts-label .pkts-label-text:has(~ *:focus) {
-  color: var(--esnet-color-core-blue-700, #0075a2);
+  color: var(--pkts-color-core-blue-700, #0075a2);
 }
 
 .dark .pkts-label .pkts-label-text:has(~ *:hover),
 .dark .pkts-label .pkts-label-text:has(~ *:focus) {
-  color: var(--esnet-color-core-blue-300, #64d2ff);
+  color: var(--pkts-color-core-blue-300, #64d2ff);
 }
 
 .pkts-label .pkts-label-text.pkts-disabled {
-  color: var(--esnet-color-core-slate-200, #acb0bf);
+  color: var(--pkts-color-core-slate-200, #acb0bf);
 }
 
 .dark .pkts-label .pkts-label-text.pkts-disabled {
-  color: var(--esnet-color-core-black-100, #6e6e70);
+  color: var(--pkts-color-core-black-100, #6e6e70);
 }
 
 .pkts-label .pkts-label-required {
   margin-left: 2px;
-  color: var(--esnet-color-core-red-600, #d61200);
+  color: var(--pkts-color-core-red-600, #d61200);
 }
 
 .pkts-label .pkts-label-text.pkts-disabled .pkts-label-required {
-  color: var(--esnet-color-core-red-800, #8a0416);
+  color: var(--pkts-color-core-red-800, #8a0416);
 }
 
 .pkts-label .pkts-label-error {
-  color: var(--esnet-color-core-red-600, #a6611b);
-  font: var(--esnet-typography-label-1-large-font, 400 16px/120% var(--esnet-font-family-body-sans));
+  color: var(--pkts-color-core-red-600, #a6611b);
+  font: var(--pkts-typography-label-1-large-font, 400 16px/120% var(--pkts-font-family-body-sans));
 }
 
 .dark .pkts-label .pkts-label-error {
-  color: var(--esnet-color-core-red-400, #ff404e);
+  color: var(--pkts-color-core-red-400, #ff404e);
 }
diff --git a/packages/ui-css/src/components/list-tree-view.css b/packages/ui-css/src/components/list-tree-view.css
index 39209e46..c48ca2ff 100644
--- a/packages/ui-css/src/components/list-tree-view.css
+++ b/packages/ui-css/src/components/list-tree-view.css
@@ -1,6 +1,6 @@
 .pkts-list-tree-view {
-  --icon-size: var(--esnet-size-spacing-medium, 1rem);
-  --row-gap-size: var(--esnet-size-spacing-xxsmall, 4px);
+  --icon-size: var(--pkts-size-spacing-medium, 1rem);
+  --row-gap-size: var(--pkts-size-spacing-xxsmall, 4px);
 
   margin: 0;
   width: 100%;
@@ -11,31 +11,31 @@
     display: flex;
     padding: 2px;
     gap: var(--row-gap-size);
-    border-radius: var(--esnet-size-radius-large, 6px);
-    transition: background var(--esnet-time-duration-short, 100ms) ease-in-out;
+    border-radius: var(--pkts-size-radius-large, 6px);
+    transition: background var(--pkts-time-duration-short, 100ms) ease-in-out;
   }
 
   .pkts-list-tree-view .section-row:has(+ .list) {
-      border-radius: var(--esnet-size-radius-large, 6px)
-        var(--esnet-size-radius-large, 6px) 0 0;
+      border-radius: var(--pkts-size-radius-large, 6px)
+        var(--pkts-size-radius-large, 6px) 0 0;
     }
 
   .pkts-list-tree-view .section-row:hover {
-      background-color: var(--esnet-color-core-white-400, #e3e3e3);
+      background-color: var(--pkts-color-core-white-400, #e3e3e3);
     }
 
   .dark .pkts-list-tree-view .section-row:hover {
-        background-color: var(--esnet-color-core-blue-900, #004573);
+        background-color: var(--pkts-color-core-blue-900, #004573);
       }
 
   .pkts-list-tree-view .section-row:hover + .list {
-        border-radius: 0 0 var(--esnet-size-radius-large, 6px)
-          var(--esnet-size-radius-large, 6px);
-        background-color: var(--esnet-color-core-white-400, #e3e3e3);
+        border-radius: 0 0 var(--pkts-size-radius-large, 6px)
+          var(--pkts-size-radius-large, 6px);
+        background-color: var(--pkts-color-core-white-400, #e3e3e3);
       }
 
   .dark .pkts-list-tree-view .section-row:hover + .list {
-          background-color: var(--esnet-color-core-blue-900, #004573);
+          background-color: var(--pkts-color-core-blue-900, #004573);
         }
 
   /* Icon - class-based or semantic */
@@ -57,12 +57,12 @@
 
   .pkts-list-tree-view .icon.selectedIcon,
   .pkts-list-tree-view svg.selectedIcon {
-      color: var(--esnet-color-core-blue-600);
+      color: var(--pkts-color-core-blue-600);
     }
 
   .pkts-list-tree-view .icon.selectedIcon,
   .pkts-list-tree-view svg.selectedIcon  {
-        animation: scaleBounceIn var(--esnet-time-duration-quick, 250ms) cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        animation: scaleBounceIn var(--pkts-time-duration-quick, 250ms) cubic-bezier(0.175, 0.885, 0.32, 1.275);
       }
 
   @media (prefers-reduced-motion) {
@@ -80,24 +80,24 @@
 
   .dark .pkts-list-tree-view .icon.selectedIcon,
   .dark .pkts-list-tree-view svg.selectedIcon {
-        color: var(--esnet-color-core-white-100);
+        color: var(--pkts-color-core-white-100);
       }
 
   .pkts-list-tree-view .icon.groupIcon,
   .pkts-list-tree-view svg.groupIcon {
-      color: var(--esnet-color-core-blue-600);
+      color: var(--pkts-color-core-blue-600);
     }
 
   .dark .pkts-list-tree-view .icon.groupIcon,
   .dark .pkts-list-tree-view svg.groupIcon {
-        color: var(--esnet-color-core-white-700);
+        color: var(--pkts-color-core-white-700);
       }
 
   /* Accordion indicator - class-based */
   .pkts-list-tree-view .accordion-indicator {
-    transition: transform var(--esnet-time-duration-short) ease-in-out;
+    transition: transform var(--pkts-time-duration-short) ease-in-out;
 
-    color: var(--esnet-color-core-black-100);
+    color: var(--pkts-color-core-black-100);
   }
 
   .pkts-list-tree-view .accordion-indicator:hover {
@@ -109,15 +109,15 @@
     }
 
   .dark .pkts-list-tree-view .accordion-indicator {
-      color: var(--esnet-color-core-slate-400);
+      color: var(--pkts-color-core-slate-400);
     }
 
   /* List - class-based */
   .pkts-list-tree-view .list {
     list-style: none;
-    padding: 0 var(--esnet-size-spacing-medium, 16px) 0;
+    padding: 0 var(--pkts-size-spacing-medium, 16px) 0;
     margin: 0;
-    transition: background var(--esnet-time-duration-short, 100ms) ease-in-out;
+    transition: background var(--pkts-time-duration-short, 100ms) ease-in-out;
   }
 
   .pkts-list-tree-view .list > * {
@@ -127,7 +127,7 @@
   /* Add global scope for accessing animation name globally */
 
   .pkts-list-tree-view .list > * {
-        animation: ESFadeInUp var(--esnet-time-duration-medium) ease-in-out;
+        animation: ESFadeInUp var(--pkts-time-duration-medium) ease-in-out;
       }
 
   @media (prefers-reduced-motion) {
@@ -153,7 +153,7 @@
     display: flex;
     padding: 2px 0;
     gap: var(--row-gap-size);
-    border-radius: var(--esnet-size-radius-large, 6px);
+    border-radius: var(--pkts-size-radius-large, 6px);
   }
 
   .pkts-list-tree-leaf-view .icon {
@@ -166,8 +166,8 @@
   }
 
   .pkts-list-tree-leaf-view .icon.selectedIcon {
-    color: var(--esnet-color-core-blue-600);
-    animation: scaleBounceIn var(--esnet-time-duration-short, 100ms)
+    color: var(--pkts-color-core-blue-600);
+    animation: scaleBounceIn var(--pkts-time-duration-short, 100ms)
       cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
 
@@ -182,15 +182,15 @@
   }
 
   .dark .pkts-list-tree-leaf-view .icon.selectedIcon {
-    color: var(--esnet-color-core-white-100);
+    color: var(--pkts-color-core-white-100);
   }
 
   .pkts-list-tree-leaf-view .icon.leafIcon {
-    color: var(--esnet-color-core-blue-600);
+    color: var(--pkts-color-core-blue-600);
   }
 
   .dark .pkts-list-tree-leaf-view .icon.leafIcon {
-    color: var(--esnet-color-core-white-700);
+    color: var(--pkts-color-core-white-700);
   }
 
   /* States */
@@ -204,9 +204,9 @@
   }
 
   .pkts-list-tree-leaf-view:not(.isSublist) > .content-wrapper:hover {
-    background-color: var(--esnet-color-core-white-400, #e3e3e3);
+    background-color: var(--pkts-color-core-white-400, #e3e3e3);
   }
 
   .dark .pkts-list-tree-leaf-view:not(.isSublist) > .content-wrapper:hover {
-    background-color: var(--esnet-color-core-blue-900, #004573);
+    background-color: var(--pkts-color-core-blue-900, #004573);
   }
diff --git a/packages/ui-css/src/components/module.css b/packages/ui-css/src/components/module.css
index 645543d1..81ee486b 100644
--- a/packages/ui-css/src/components/module.css
+++ b/packages/ui-css/src/components/module.css
@@ -1,20 +1,20 @@
 .pkts-module {
-  padding: 0 var(--esnet-size-spacing-medium, 16px);
+  padding: 0 var(--pkts-size-spacing-medium, 16px);
 }
 
   @media (min-width: 640px) {.pkts-module {
-    padding: 0 var(--esnet-size-spacing-xlarge, 40px)
+    padding: 0 var(--pkts-size-spacing-xlarge, 40px)
 }
   }
 
   .pkts-module.surface {
-    border-radius: var(--esnet-size-spacing-xsmall);
-    padding: var(--esnet-size-spacing-medium, 16px);
+    border-radius: var(--pkts-size-spacing-xsmall);
+    padding: var(--pkts-size-spacing-medium, 16px);
   }
 
   @media (min-width: 640px) {
 
   .pkts-module.surface {
-      padding: var(--esnet-size-spacing-xlarge, 40px)
+      padding: var(--pkts-size-spacing-xlarge, 40px)
   }
     }
diff --git a/packages/ui-css/src/components/skeleton-chip.css b/packages/ui-css/src/components/skeleton-chip.css
index 4738e146..75e10403 100644
--- a/packages/ui-css/src/components/skeleton-chip.css
+++ b/packages/ui-css/src/components/skeleton-chip.css
@@ -3,33 +3,33 @@
 
   display: block;
   width: 100%;
-  height: var(--esnet-size-touchtarget-min);
-  border-radius: var(--esnet-size-spacing-xxxlarge);
+  height: var(--pkts-size-touchtarget-min);
+  border-radius: var(--pkts-size-spacing-xxxlarge);
 
   animation-duration: 3200ms;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-name: shimmer;
   animation-timing-function: linear;
-  border: var(--esnet-size-border-width-xsmall) solid var(--esnet-color-core-white-500);
-  background: var(--esnet-color-core-white-400);
+  border: var(--pkts-size-border-width-xsmall) solid var(--pkts-color-core-white-500);
+  background: var(--pkts-color-core-white-400);
   background: linear-gradient(
     to right,
-    var(--esnet-color-core-white-600) 8%,
-    var(--esnet-color-core-white-100) 18%,
-    var(--esnet-color-core-white-600) 33%
+    var(--pkts-color-core-white-600) 8%,
+    var(--pkts-color-core-white-100) 18%,
+    var(--pkts-color-core-white-600) 33%
   );
   background-size: var(--shimmerBGSize) 100%;
 }
 
 .dark .pkts-skeleton-chip {
-  border: var(--esnet-size-border-width-xsmall) solid var(--esnet-color-core-black-500);
-  background: var(--esnet-color-core-white-500);
+  border: var(--pkts-size-border-width-xsmall) solid var(--pkts-color-core-black-500);
+  background: var(--pkts-color-core-white-500);
   background: linear-gradient(
     to right,
-    var(--esnet-color-core-black-900) 8%,
-    var(--esnet-color-core-black-600) 18%,
-    var(--esnet-color-core-black-900) 33%
+    var(--pkts-color-core-black-900) 8%,
+    var(--pkts-color-core-black-600) 18%,
+    var(--pkts-color-core-black-900) 33%
   );
 }
 
diff --git a/packages/ui-css/src/components/skeleton-surface.css b/packages/ui-css/src/components/skeleton-surface.css
index 00a3ba04..80c13304 100644
--- a/packages/ui-css/src/components/skeleton-surface.css
+++ b/packages/ui-css/src/components/skeleton-surface.css
@@ -9,23 +9,23 @@
 */
 
 .pkts-skeleton-surface {
-  --stroke-size: var(--esnet-size-border-width-medium, 3px);
-  --stroke-radius: var(--esnet-size-spacing-large, 2rem);
-  --height: var(--esnet-size-touchtarget-min, 2rem);
+  --stroke-size: var(--pkts-size-border-width-medium, 3px);
+  --stroke-radius: var(--pkts-size-spacing-large, 2rem);
+  --height: var(--pkts-size-touchtarget-min, 2rem);
 
   display: block;
   width: 100%;
-  min-width: var(--esnet-size-spacing-large);
+  min-width: var(--pkts-size-spacing-large);
   height: var(--height);
 
   position: relative;
   z-index: 0;
   overflow: hidden;
-  background-color: var(--esnet-color-core-white-500, #d9d9d9);
+  background-color: var(--pkts-color-core-white-500, #d9d9d9);
 }
 
 .dark .pkts-skeleton-surface {
-  background-color: var(--esnet-color-core-black-500, #4d4d4f);
+  background-color: var(--pkts-color-core-black-500, #4d4d4f);
 }
 
 /* Shimmer Overlay */
@@ -59,11 +59,11 @@
   top: var(--stroke-size);
   width: calc(100% - calc(var(--stroke-size) * 2));
   height: calc(100% - calc(var(--stroke-size) * 2));
-  background: var(--esnet-color-core-white-700, #c2c2c2);
+  background: var(--pkts-color-core-white-700, #c2c2c2);
 }
 
 .dark .pkts-skeleton-surface::after {
-  background-color: var(--esnet-color-core-black-900, #19191a) !important;
+  background-color: var(--pkts-color-core-black-900, #19191a) !important;
 }
 
 /* Rounded variant */
diff --git a/packages/ui-css/src/components/spacer.css b/packages/ui-css/src/components/spacer.css
index ea07cf9e..9aedfae9 100644
--- a/packages/ui-css/src/components/spacer.css
+++ b/packages/ui-css/src/components/spacer.css
@@ -1,5 +1,5 @@
 .pkts-spacer {
-  --size: var(--esnet-size-spacing-none);
+  --size: var(--pkts-size-spacing-none);
 
   border: none;
 }
diff --git a/packages/ui-css/src/components/spinner.css b/packages/ui-css/src/components/spinner.css
index 8327a166..974acf0e 100644
--- a/packages/ui-css/src/components/spinner.css
+++ b/packages/ui-css/src/components/spinner.css
@@ -2,7 +2,7 @@
   display: inline-block;
   position: relative;
   width: 82px;
-  height: var(--esnet-size-spacing-medium);
+  height: var(--pkts-size-spacing-medium);
 }
 
   @media (prefers-reduced-motion) {
@@ -19,49 +19,49 @@
     display: none;
     text-align: center;
     font: var(
-      --esnet-typography-label-1-sans-font,
-      400 12px/120% var(--esnet-font-family-body-sans)
+      --pkts-typography-label-1-sans-font,
+      400 12px/120% var(--pkts-font-family-body-sans)
     );
 
-    color: var(--esnet-color-light-copy-alt, #a8a8a8);
+    color: var(--pkts-color-light-copy-alt, #a8a8a8);
   }
 
   .dark .pkts-spinner .no-motion-message {
-      color: var(--esnet-color-dark-copy-alt, #a8a8a8);
+      color: var(--pkts-color-dark-copy-alt, #a8a8a8);
     }
 
   .pkts-spinner .dot {
     position: absolute;
     top: 0;
-    width: var(--esnet-size-spacing-medium);
-    height: var(--esnet-size-spacing-medium);
+    width: var(--pkts-size-spacing-medium);
+    height: var(--pkts-size-spacing-medium);
     border-radius: 50%;
-    background: var(--esnet-color-light-copy, #3d3d3d);
+    background: var(--pkts-color-light-copy, #3d3d3d);
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
   }
 
   .dark .pkts-spinner .dot {
-      background: var(--esnet-color-dark-copy, #e6e6e6);
+      background: var(--pkts-color-dark-copy, #e6e6e6);
     }
 
   .pkts-spinner .dot:nth-child(1) {
-      left: var(--esnet-size-spacing-xsmall);
-      animation: dot1Animation var(--esnet-time-duration-long, 600ms) infinite;
+      left: var(--pkts-size-spacing-xsmall);
+      animation: dot1Animation var(--pkts-time-duration-long, 600ms) infinite;
     }
 
   .pkts-spinner .dot:nth-child(2) {
-      left: var(--esnet-size-spacing-xsmall);
-      animation: dot2Animation var(--esnet-time-duration-long, 600ms) infinite;
+      left: var(--pkts-size-spacing-xsmall);
+      animation: dot2Animation var(--pkts-time-duration-long, 600ms) infinite;
     }
 
   .pkts-spinner .dot:nth-child(3) {
       left: 32px;
-      animation: dot2Animation var(--esnet-time-duration-long, 600ms) infinite;
+      animation: dot2Animation var(--pkts-time-duration-long, 600ms) infinite;
     }
 
   .pkts-spinner .dot:nth-child(4) {
       left: 56px;
-      animation: dot3Animation var(--esnet-time-duration-long, 600ms) infinite;
+      animation: dot3Animation var(--pkts-time-duration-long, 600ms) infinite;
     }
 
 @keyframes dot1Animation {
diff --git a/packages/ui-css/src/components/tab.css b/packages/ui-css/src/components/tab.css
index 51740241..571c34a6 100644
--- a/packages/ui-css/src/components/tab.css
+++ b/packages/ui-css/src/components/tab.css
@@ -13,14 +13,14 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  gap: var(--esnet-size-spacing-xxsmall, 4px);
+  gap: var(--pkts-size-spacing-xxsmall, 4px);
 
-  min-width: var(--esnet-size-spacing-xxlarge, 64px);
+  min-width: var(--pkts-size-spacing-xxlarge, 64px);
   width: fit-content;
-  min-height: var(--esnet-size-spacing-large, 32px);
+  min-height: var(--pkts-size-spacing-large, 32px);
 
-  border-radius: var(--esnet-size-spacing-xsmall);
-  transition: background ease-in var(--esnet-time-duration-short, 100ms);
+  border-radius: var(--pkts-size-spacing-xsmall);
+  transition: background ease-in var(--pkts-time-duration-short, 100ms);
 }
 
 li.pkts-tab {
@@ -28,11 +28,11 @@ li.pkts-tab {
 }
 
 .pkts-tab.pkts-active {
-  background-color: var(--esnet-color-light-surface-2, #f2f2f2);
+  background-color: var(--pkts-color-light-surface-2, #f2f2f2);
 }
 
 .dark .pkts-tab.pkts-active {
-  background-color: var(--esnet-color-dark-primary, #004573);
+  background-color: var(--pkts-color-dark-primary, #004573);
 }
 
 .pkts-tab:hover {
@@ -44,14 +44,14 @@ li.pkts-tab {
 }
 
 .pkts-tab a {
-  padding: var(--esnet-size-spacing-xsmall, 8px)
-    var(--esnet-size-spacing-medium, 16px);
+  padding: var(--pkts-size-spacing-xsmall, 8px)
+    var(--pkts-size-spacing-medium, 16px);
 
-  color: var(--esnet-color-light-copy, #1a1a1a);
+  color: var(--pkts-color-light-copy, #1a1a1a);
   text-decoration: none;
   white-space: nowrap;
 }
 
 .dark .pkts-tab a {
-  color: var(--esnet-color-dark-copy, #e6e6e6);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
 }
diff --git a/packages/ui-css/src/components/table-of-contents.css b/packages/ui-css/src/components/table-of-contents.css
index ec350113..0af978ae 100644
--- a/packages/ui-css/src/components/table-of-contents.css
+++ b/packages/ui-css/src/components/table-of-contents.css
@@ -1,41 +1,41 @@
 .pkts-table-of-contents {
-  margin: 0 var(--esnet-size-spacing-large) var(--esnet-size-spacing-medium);
+  margin: 0 var(--pkts-size-spacing-large) var(--pkts-size-spacing-medium);
 }
 
   /* List - already using semantic selector */
   .pkts-table-of-contents ul {
     list-style: none;
-    margin: var(--esnet-size-spacing-xsmall, 12px) 0 0;
-    padding: 0px var(--esnet-size-spacing-medium, 16px);
-    border-left: var(--esnet-size-border-width-medium) solid
-      var(--esnet-color-core-white-1000, #9e9e9e);
+    margin: var(--pkts-size-spacing-xsmall, 12px) 0 0;
+    padding: 0px var(--pkts-size-spacing-medium, 16px);
+    border-left: var(--pkts-size-border-width-medium) solid
+      var(--pkts-color-core-white-1000, #9e9e9e);
 
     display: flex;
     flex-direction: column;
-    gap: var(--esnet-size-spacing-xxsmall, 4px);
+    gap: var(--pkts-size-spacing-xxsmall, 4px);
   }
 
   .pkts-table-of-contents a {
-    color: var(--esnet-color-light-copy, #1a1a1a);
+    color: var(--pkts-color-light-copy, #1a1a1a);
     text-decoration: underline;
   }
 
   .dark .pkts-table-of-contents a {
-    color: var(--esnet-color-dark-copy, #e6e6e6);
+    color: var(--pkts-color-dark-copy, #e6e6e6);
   }
 
   .pkts-table-of-contents.pkts-sticky {
     position: sticky;
-    top: var(--esnet-size-spacing-xxlarge, 72px);
+    top: var(--pkts-size-spacing-xxlarge, 72px);
   }
 
 /* TODO: ensure vertical line still exists */
 /*
   .verticalLine {
-    width: var(--esnet-size-border-width-medium, 4px);
+    width: var(--pkts-size-border-width-medium, 4px);
     align-self: stretch;
 
-    border-radius: var(--esnet-size-radius-large);
-    background: var(--esnet-color-light-copy-alt, #6e6e70);
+    border-radius: var(--pkts-size-radius-large);
+    background: var(--pkts-color-light-copy-alt, #6e6e70);
   }
 */
diff --git a/packages/ui-css/src/components/tabs.css b/packages/ui-css/src/components/tabs.css
index 363c04f0..f392b87b 100644
--- a/packages/ui-css/src/components/tabs.css
+++ b/packages/ui-css/src/components/tabs.css
@@ -1,12 +1,12 @@
 .pkts-tabs {
-  --tabGaps: var(--esnet-size-spacing-xxsmall, 4px);
+  --tabGaps: var(--pkts-size-spacing-xxsmall, 4px);
 
   display: block;
-  padding: var(--esnet-size-spacing-xxsmall, 4px);
+  padding: var(--pkts-size-spacing-xxsmall, 4px);
   width: fit-content;
 
-  background: var(--esnet-color-light-surface-1, #e3e3e3);
-  border-radius: var(--esnet-size-spacing-xsmall, 8px);
+  background: var(--pkts-color-light-surface-1, #e3e3e3);
+  border-radius: var(--pkts-size-spacing-xsmall, 8px);
 
   list-style: none;
   margin: 0;
@@ -17,7 +17,7 @@
 }
 
 .dark .pkts-tabs {
-  background: var(--esnet-color-dark-surface-1, #3d3d3d);
+  background: var(--pkts-color-dark-surface-1, #3d3d3d);
 }
 
 .pkts-tabs > .tab-list {
@@ -31,13 +31,13 @@
 }
 
 .pkts-tabs.pkts-has-border {
-  border-radius: var(--esnet-size-spacing-xsmall, 8px);
-  border: var(--esnet-size-border-width-small, 2px) solid
-    var(--esnet-color-core-white-200, #f2f2f2);
+  border-radius: var(--pkts-size-spacing-xsmall, 8px);
+  border: var(--pkts-size-border-width-small, 2px) solid
+    var(--pkts-color-core-white-200, #f2f2f2);
 }
 
 .dark .pkts-tabs.pkts-has-border {
-  border-color: var(--esnet-color-core-black-400, #565657);
+  border-color: var(--pkts-color-core-black-400, #565657);
 }
 
 .pkts-tabs.pkts-no-padding {
diff --git a/packages/ui-css/src/components/title-section.css b/packages/ui-css/src/components/title-section.css
index 64e69572..95b284d8 100644
--- a/packages/ui-css/src/components/title-section.css
+++ b/packages/ui-css/src/components/title-section.css
@@ -1,21 +1,21 @@
 .titleLayout {
-  margin-bottom: var(--esnet-size-spacing-large);
+  margin-bottom: var(--pkts-size-spacing-large);
 }
 
   .titleLayout .title {
     display: flex;
     align-items: center;
-    gap: var(--esnet-size-spacing-xsmall, 9px);
+    gap: var(--pkts-size-spacing-xsmall, 9px);
 
-    font: var(--esnet-typography-header-1-display-font);
+    font: var(--pkts-typography-header-1-display-font);
   }
 
   .titleLayout .subtitle {
     display: flex;
     align-items: center;
-    gap: var(--esnet-size-spacing-xsmall, 9px);
+    gap: var(--pkts-size-spacing-xsmall, 9px);
 
-    font: var(--esnet-typography-header-4-sans-font);
+    font: var(--pkts-typography-header-4-sans-font);
     padding: 0;
   }
 
diff --git a/packages/ui-css/src/components/tooltip.css b/packages/ui-css/src/components/tooltip.css
index 2b951da2..51768830 100644
--- a/packages/ui-css/src/components/tooltip.css
+++ b/packages/ui-css/src/components/tooltip.css
@@ -3,8 +3,8 @@
 }
 
 .pkts-tooltip .pkts-tooltip-popup {
-  padding: var(--esnet-size-spacing-xsmall, 0.5rem);
-  border-radius: var(--esnet-size-radius-large);
+  padding: var(--pkts-size-spacing-xsmall, 0.5rem);
+  border-radius: var(--pkts-size-radius-large);
   width: max-content;
   max-width: 240px;
 }
@@ -17,15 +17,15 @@
 
 .pkts-tooltip .pkts-tooltip-title {
   display: block;
-  font: var(--esnet-typography-header-6-sans-font);
-  margin-bottom: var(--esnet-size-spacing-xxsmall, 0.25rem);
+  font: var(--pkts-typography-header-6-sans-font);
+  margin-bottom: var(--pkts-size-spacing-xxsmall, 0.25rem);
 }
 
 .pkts-tooltip .pkts-tooltip-close {
   cursor: pointer;
-  width: var(--esnet-size-spacing-medium, 16px);
-  height: var(--esnet-size-spacing-medium, 16px);
-  margin-left: var(--esnet-size-spacing-xsmall, 8px);
+  width: var(--pkts-size-spacing-medium, 16px);
+  height: var(--pkts-size-spacing-medium, 16px);
+  margin-left: var(--pkts-size-spacing-xsmall, 8px);
 }
 
 .pkts-tooltip .pkts-tooltip-text {
diff --git a/packages/ui-css/src/utilities.css b/packages/ui-css/src/utilities.css
index b8191295..96116b01 100644
--- a/packages/ui-css/src/utilities.css
+++ b/packages/ui-css/src/utilities.css
@@ -71,11 +71,11 @@ es-input-text {
 a.pkts-button.pkts-primary,
 .pkts-icon-button.pkts-primary,
 a.pkts-icon-button.pkts-primary {
-  --primary-color: var(--esnet-color-core-blue-700, #0075a2);
+  --primary-color: var(--pkts-color-core-blue-700, #0075a2);
 
-  color: var(--esnet-color-light-surface-2, #f2f2f2);
-  border-color: var(--esnet-color-core-slate-200, #acb0bf);
-  background-color: var(--esnet-color-core-blue-700, #0075a2);
+  color: var(--pkts-color-light-surface-2, #f2f2f2);
+  border-color: var(--pkts-color-core-slate-200, #acb0bf);
+  background-color: var(--pkts-color-core-blue-700, #0075a2);
 }
 
 .pkts-button.pkts-primary:hover,
@@ -86,16 +86,16 @@ a.pkts-button.pkts-primary:focus,
 .pkts-icon-button.pkts-primary:focus,
 a.pkts-icon-button.pkts-primary:hover,
 a.pkts-icon-button.pkts-primary:focus {
-  border-color: var(--esnet-color-core-slate-100, #c3c7d9);
-  background-color: var(--esnet-color-core-blue-500, #00a0d6);
+  border-color: var(--pkts-color-core-slate-100, #c3c7d9);
+  background-color: var(--pkts-color-core-blue-500, #00a0d6);
 }
 
 .pkts-button.pkts-primary:active,
 a.pkts-button.pkts-primary:active,
 .pkts-icon-button.pkts-primary:active,
 a.pkts-icon-button.pkts-primary:active {
-  border-color: var(--esnet-color-core-slate-200, #acb0bf);
-  background-color: var(--esnet-color-core-blue-700, #0075a2);
+  border-color: var(--pkts-color-core-slate-200, #acb0bf);
+  background-color: var(--pkts-color-core-blue-700, #0075a2);
 }
 
 .pkts-button.pkts-primary:disabled,
@@ -111,8 +111,8 @@ a.pkts-icon-button.pkts-primary:disabled {
 .dark a.pkts-button.pkts-primary,
 .dark .pkts-icon-button.pkts-primary,
 .dark a.pkts-icon-button.pkts-primary {
-  border-color: var(--esnet-color-core-teal-900, #0a4854);
-  background-color: var(--esnet-color-core-blue-600, #0088b5);
+  border-color: var(--pkts-color-core-teal-900, #0a4854);
+  background-color: var(--pkts-color-core-blue-600, #0088b5);
 }
 
 .dark .pkts-button.pkts-primary:hover,
@@ -123,16 +123,16 @@ a.pkts-icon-button.pkts-primary:disabled {
 .dark .pkts-icon-button.pkts-primary:focus,
 .dark a.pkts-icon-button.pkts-primary:hover,
 .dark a.pkts-icon-button.pkts-primary:focus {
-  background-color: var(--esnet-color-core-blue-500, #00a0d6);
-  border-color: var(--esnet-color-core-slate-100, #C3C7D9);
+  background-color: var(--pkts-color-core-blue-500, #00a0d6);
+  border-color: var(--pkts-color-core-slate-100, #C3C7D9);
 }
 
 .dark .pkts-button.pkts-primary:active,
 .dark a.pkts-button.pkts-primary:active,
 .dark .pkts-icon-button.pkts-primary:active,
 .dark a.pkts-icon-button.pkts-primary:active {
-  border-color: var(--esnet-color-core-slate-200, #acb0bf);
-  background-color: var(--esnet-color-core-blue-700, #0075a2);
+  border-color: var(--pkts-color-core-slate-200, #acb0bf);
+  background-color: var(--pkts-color-core-blue-700, #0075a2);
 }
 
 .dark .pkts-button.pkts-primary:disabled,
@@ -148,8 +148,8 @@ a.pkts-icon-button.pkts-primary:disabled {
 a.pkts-button.pkts-secondary,
 .pkts-icon-button.pkts-secondary,
 a.pkts-icon-button.pkts-secondary {
-  border-color: var(--esnet-color-core-blue-900, #004573);
-  background: var(--esnet-color-light-surface-2, #f2f2f2);
+  border-color: var(--pkts-color-core-blue-900, #004573);
+  background: var(--pkts-color-light-surface-2, #f2f2f2);
 }
 
 .pkts-button.pkts-secondary:hover,
@@ -160,25 +160,25 @@ a.pkts-button.pkts-secondary:focus,
 .pkts-icon-button.pkts-secondary:focus,
 a.pkts-icon-button.pkts-secondary:hover,
 a.pkts-icon-button.pkts-secondary:focus {
-  border-color: var(--esnet-color-core-blue-600, #0088b5);
-  background-color: var(--esnet-color-light-surface-2, #f2f2f2);
+  border-color: var(--pkts-color-core-blue-600, #0088b5);
+  background-color: var(--pkts-color-light-surface-2, #f2f2f2);
 }
 
 .pkts-button.pkts-secondary:active,
 a.pkts-button.pkts-secondary:active,
 .pkts-icon-button.pkts-secondary:active,
 a.pkts-icon-button.pkts-secondary:active {
-  border-color: var(--esnet-color-core-blue-800, #00608c);
-  background-color: var(--esnet-color-light-surface-1, #e3e3e3);
+  border-color: var(--pkts-color-core-blue-800, #00608c);
+  background-color: var(--pkts-color-light-surface-1, #e3e3e3);
 }
 
 .pkts-button.pkts-secondary:disabled,
 a.pkts-button.pkts-secondary:disabled,
 .pkts-icon-button.pkts-secondary:disabled,
 a.pkts-icon-button.pkts-secondary:disabled {
-  color: var(--esnet-color-core-slate-300, #9699a8);
+  color: var(--pkts-color-core-slate-300, #9699a8);
   border-color: rgba(63, 66, 77, 0.2);
-  background-color: var(--esnet-color-light-surface-1, #e3e3e3);
+  background-color: var(--pkts-color-light-surface-1, #e3e3e3);
 }
 
 /* Dark Mode */
@@ -186,10 +186,10 @@ a.pkts-icon-button.pkts-secondary:disabled {
 .dark a.pkts-button.pkts-secondary,
 .dark .pkts-icon-button.pkts-secondary,
 .dark a.pkts-icon-button.pkts-secondary {
-  color: var(--esnet-color-dark-copy, #e6e6e6);
-  border: var(--esnet-size-border-width-small, 2px) solid
-    var(--esnet-color-dark-primary, #64d2ff);
-  background: var(--esnet-color-dark-surface-1, #3d3d3d);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
+  border: var(--pkts-size-border-width-small, 2px) solid
+    var(--pkts-color-dark-primary, #64d2ff);
+  background: var(--pkts-color-dark-surface-1, #3d3d3d);
 }
 
 .dark .pkts-button.pkts-secondary:hover,
@@ -200,26 +200,26 @@ a.pkts-icon-button.pkts-secondary:disabled {
 .dark .pkts-icon-button.pkts-secondary:focus,
 .dark a.pkts-icon-button.pkts-secondary:hover,
 .dark a.pkts-icon-button.pkts-secondary:focus {
-  border-color: var(--esnet-color-core-blue-200, #9ce2ff);
-  background: var(--esnet-color-dark-surface-2, #4d4d4f);
+  border-color: var(--pkts-color-core-blue-200, #9ce2ff);
+  background: var(--pkts-color-dark-surface-2, #4d4d4f);
 }
 
 .dark .pkts-button.pkts-secondary:active,
 .dark a.pkts-button.pkts-secondary:active,
 .dark .pkts-icon-button.pkts-secondary:active,
 .dark a.pkts-icon-button.pkts-secondary:active {
-  border-color: var(--esnet-color-core-blue-400, #00b6f2);
-  background-color: var(--esnet-color-dark-background, #19191a);
-  color: var(--esnet-color-core-blue-200, #9ce2ff);
+  border-color: var(--pkts-color-core-blue-400, #00b6f2);
+  background-color: var(--pkts-color-dark-background, #19191a);
+  color: var(--pkts-color-core-blue-200, #9ce2ff);
 }
 
 .dark .pkts-button.pkts-secondary:disabled,
 .dark a.pkts-button.pkts-secondary:disabled,
 .dark .pkts-icon-button.pkts-secondary:disabled,
 .dark a.pkts-icon-button.pkts-secondary:disabled {
-  color: var(--esnet-color-dark-copy-alt, #a8a8a8);
-  border-color: var(--esnet-color-dark-copy-alt, #a8a8a8);
-  background-color: var(--esnet-color-dark-surface-1, #3d3d3d);
+  color: var(--pkts-color-dark-copy-alt, #a8a8a8);
+  border-color: var(--pkts-color-dark-copy-alt, #a8a8a8);
+  background-color: var(--pkts-color-dark-surface-1, #3d3d3d);
 }
 
 /* TERTIARY - Minimal styling */
@@ -229,7 +229,7 @@ a.pkts-button.pkts-tertiary,
 a.pkts-icon-button.pkts-tertiary {
   background-color: rgba(0, 0, 0, 0);
   border-color: transparent;
-  box-shadow: var(--esnet-box-shadow-core-none);
+  box-shadow: var(--pkts-box-shadow-core-none);
 }
 
 .pkts-button.pkts-tertiary:hover,
@@ -240,23 +240,23 @@ a.pkts-button.pkts-tertiary:focus,
 .pkts-icon-button.pkts-tertiary:focus,
 a.pkts-icon-button.pkts-tertiary:hover,
 a.pkts-icon-button.pkts-tertiary:focus {
-  background-color: var(--esnet-color-light-surface-2, #f2f2f2);
-  box-shadow: var(--esnet-box-shadow-core-medium);
+  background-color: var(--pkts-color-light-surface-2, #f2f2f2);
+  box-shadow: var(--pkts-box-shadow-core-medium);
 }
 
 .pkts-button.pkts-tertiary:active,
 a.pkts-button.pkts-tertiary:active,
 .pkts-icon-button.pkts-tertiary:active,
 a.pkts-icon-button.pkts-tertiary:active {
-  background-color: var(--esnet-color-light-surface-1, #e3e3e3);
-  box-shadow: var(--esnet-box-shadow-core-medium-inset);
+  background-color: var(--pkts-color-light-surface-1, #e3e3e3);
+  box-shadow: var(--pkts-box-shadow-core-medium-inset);
 }
 
 .pkts-button.pkts-tertiary:disabled,
 a.pkts-button.pkts-tertiary:disabled,
 .pkts-icon-button.pkts-tertiary:disabled,
 a.pkts-icon-button.pkts-tertiary:disabled {
-  color: var(--esnet-color-core-slate-300, #9699a8);
+  color: var(--pkts-color-core-slate-300, #9699a8);
   background-color: rgba(0, 0, 0, 0) !important;
   border-color: transparent !important;
 }
@@ -266,7 +266,7 @@ a.pkts-icon-button.pkts-tertiary:disabled {
 .dark a.pkts-button.pkts-tertiary,
 .dark .pkts-icon-button.pkts-tertiary,
 .dark a.pkts-icon-button.pkts-tertiary {
-  color: var(--esnet-color-dark-copy, #e6e6e6);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
 }
 
 .dark .pkts-button.pkts-tertiary:hover,
@@ -277,23 +277,23 @@ a.pkts-icon-button.pkts-tertiary:disabled {
 .dark .pkts-icon-button.pkts-tertiary:focus,
 .dark a.pkts-icon-button.pkts-tertiary:hover,
 .dark a.pkts-icon-button.pkts-tertiary:focus {
-  background-color: var(--esnet-color-dark-surface-2, #4d4d4f);
+  background-color: var(--pkts-color-dark-surface-2, #4d4d4f);
 }
 
 .dark .pkts-button.pkts-tertiary:active,
 .dark a.pkts-button.pkts-tertiary:active,
 .dark .pkts-icon-button.pkts-tertiary:active,
 .dark a.pkts-icon-button.pkts-tertiary:active {
-  background-color: var(--esnet-color-dark-surface-1, #3d3d3d);
+  background-color: var(--pkts-color-dark-surface-1, #3d3d3d);
 }
 
 .dark .pkts-button.pkts-tertiary:disabled,
 .dark a.pkts-button.pkts-tertiary:disabled,
 .dark .pkts-icon-button.pkts-tertiary:disabled,
 .dark a.pkts-icon-button.pkts-tertiary:disabled {
-  color: var(--esnet-color-dark-copy-alt, #a8a8a8);
-  border-color: var(--esnet-color-dark-copy-alt, #a8a8a8);
-  background-color: var(--esnet-color-dark-surface-1, #3d3d3d);
+  color: var(--pkts-color-dark-copy-alt, #a8a8a8);
+  border-color: var(--pkts-color-dark-copy-alt, #a8a8a8);
+  background-color: var(--pkts-color-dark-surface-1, #3d3d3d);
 }
 
 /* DESTRUCTIVE - Red dangerous actions */
@@ -301,9 +301,9 @@ a.pkts-icon-button.pkts-tertiary:disabled {
 a.pkts-button.pkts-destructive,
 .pkts-icon-button.pkts-destructive,
 a.pkts-icon-button.pkts-destructive {
-  color: var(--esnet-color-core-white-200, #f2f2f2);
-  border-color: var(--esnet-color-core-red-800, #8a0416);
-  background-color: var(--esnet-color-core-red-600, #d61200);
+  color: var(--pkts-color-core-white-200, #f2f2f2);
+  border-color: var(--pkts-color-core-red-800, #8a0416);
+  background-color: var(--pkts-color-core-red-600, #d61200);
 }
 
 .pkts-button.pkts-destructive:hover,
@@ -314,25 +314,25 @@ a.pkts-button.pkts-destructive:focus,
 .pkts-icon-button.pkts-destructive:focus,
 a.pkts-icon-button.pkts-destructive:hover,
 a.pkts-icon-button.pkts-destructive:focus {
-  border-color: var(--esnet-color-core-red-700, #a6111b);
-  background-color: var(--esnet-color-core-red-500, #eb3321);
+  border-color: var(--pkts-color-core-red-700, #a6111b);
+  background-color: var(--pkts-color-core-red-500, #eb3321);
 }
 
 .pkts-button.pkts-destructive:active,
 a.pkts-button.pkts-destructive:active,
 .pkts-icon-button.pkts-destructive:active,
 a.pkts-icon-button.pkts-destructive:active {
-  border-color: var(--esnet-color-core-red-1000, #4d000d);
-  background-color: var(--esnet-color-core-red-700, #a6111b);
+  border-color: var(--pkts-color-core-red-1000, #4d000d);
+  background-color: var(--pkts-color-core-red-700, #a6111b);
 }
 
 .pkts-button.pkts-destructive:disabled,
 a.pkts-button.pkts-destructive:disabled,
 .pkts-icon-button.pkts-destructive:disabled,
 a.pkts-icon-button.pkts-destructive:disabled {
-  color: var(--esnet-color-core-red-900, #6b0012);
-  border-color: var(--esnet-color-core-red-700, #a6111b);
-  background-color: var(--esnet-color-core-red-500, #eb3321);
+  color: var(--pkts-color-core-red-900, #6b0012);
+  border-color: var(--pkts-color-core-red-700, #a6111b);
+  background-color: var(--pkts-color-core-red-500, #eb3321);
 }
 
 /* BRANDED - Brand-specific gradient theming */
@@ -341,17 +341,17 @@ a.pkts-button.pkts-branded,
 .pkts-icon-button.pkts-branded,
 a.pkts-icon-button.pkts-branded {
   font: var(
-    --esnet-typography-button-1-display-font,
-    700 16px/100% var(--esnet-font-family-body-display)
+    --pkts-typography-button-1-display-font,
+    700 16px/100% var(--pkts-font-family-body-display)
   );
 
   line-height: 100%;
 
-  --bg-gradient-1: var(--esnet-color-core-blue-400, #00b6f2);
-  --bg-gradient-2: var(--esnet-color-core-blue-600, #0088b5);
+  --bg-gradient-1: var(--pkts-color-core-blue-400, #00b6f2);
+  --bg-gradient-2: var(--pkts-color-core-blue-600, #0088b5);
 
-  color: var(--esnet-color-light-surface-2, #f2f2f2);
-  border-color: var(--esnet-color-core-slate-100, #c3c7d9);
+  color: var(--pkts-color-light-surface-2, #f2f2f2);
+  border-color: var(--pkts-color-core-slate-100, #c3c7d9);
   background: linear-gradient(
     180deg,
     var(--bg-gradient-1) 0%,
@@ -367,18 +367,18 @@ a.pkts-button.pkts-branded:focus,
 .pkts-icon-button.pkts-branded:focus,
 a.pkts-icon-button.pkts-branded:hover,
 a.pkts-icon-button.pkts-branded:focus {
-  border-color: var(--esnet-color-core-slate-100, #c3c7d9);
-  --bg-gradient-1: var(--esnet-color-core-blue-300, #64d2ff);
-  --bg-gradient-2: var(--esnet-color-core-blue-500, #00a0d6);
+  border-color: var(--pkts-color-core-slate-100, #c3c7d9);
+  --bg-gradient-1: var(--pkts-color-core-blue-300, #64d2ff);
+  --bg-gradient-2: var(--pkts-color-core-blue-500, #00a0d6);
 }
 
 .pkts-button.pkts-branded:active,
 a.pkts-button.pkts-branded:active,
 .pkts-icon-button.pkts-branded:active,
 a.pkts-icon-button.pkts-branded:active {
-  border-color: var(--esnet-color-core-slate-200, #acb0bf);
-  --bg-gradient-1: var(--esnet-color-core-blue-700, #0075a2);
-  --bg-gradient-2: var(--esnet-color-core-blue-500, #00a0d6);
+  border-color: var(--pkts-color-core-slate-200, #acb0bf);
+  --bg-gradient-1: var(--pkts-color-core-blue-700, #0075a2);
+  --bg-gradient-2: var(--pkts-color-core-blue-500, #00a0d6);
 }
 
 .pkts-button.pkts-branded:disabled,
@@ -436,19 +436,19 @@ a.pkts-icon-button.pkts-square {
    ============================================ */
 
 .pkts-avatar.pkts-grape {
-  background-color: var(--esnet-color-core-purple-500, #a350ff);
+  background-color: var(--pkts-color-core-purple-500, #a350ff);
 }
 
 .pkts-avatar.pkts-lime {
-  background-color: var(--esnet-color-core-green-500, #11ad2b);
+  background-color: var(--pkts-color-core-green-500, #11ad2b);
 }
 
 .pkts-avatar.pkts-berry {
-  background-color: var(--esnet-color-core-berry-500, #ff2377);
+  background-color: var(--pkts-color-core-berry-500, #ff2377);
 }
 
 .pkts-avatar.pkts-orange {
-  background-color: var(--esnet-color-core-orange-500, #ff8000);
+  background-color: var(--pkts-color-core-orange-500, #ff8000);
 }
 
 /* ============================================
@@ -456,30 +456,30 @@ a.pkts-icon-button.pkts-square {
    ============================================ */
 
 .pkts-avatar.pkts-small {
-  --size: var(--esnet-size-spacing-large, 32px);
+  --size: var(--pkts-size-spacing-large, 32px);
   --label-font: var(
-    --esnet-typography-label-1-sans-font,
-    400 12px/120% var(--esnet-font-family-body-sans)
+    --pkts-typography-label-1-sans-font,
+    400 12px/120% var(--pkts-font-family-body-sans)
   );
   --border-radius: 10px;
 }
 
 .pkts-avatar.pkts-medium {
-  --size: var(--esnet-size-spacing-xlarge, 40px);
+  --size: var(--pkts-size-spacing-xlarge, 40px);
   --label-font: var(
-    --esnet-typography-header-5-sans-font,
-    600 20px/140% var(--esnet-font-family-header-sans)
+    --pkts-typography-header-5-sans-font,
+    600 20px/140% var(--pkts-font-family-header-sans)
   );
   --border-radius: 14px;
 }
 
 .pkts-avatar.pkts-large {
-  --size: var(--esnet-size-spacing-xxlarge, 64px);
+  --size: var(--pkts-size-spacing-xxlarge, 64px);
   --label-font: var(
-    --esnet-typography-header-4-sans-font,
-    500 24px/140% var(--esnet-font-family-header-sans)
+    --pkts-typography-header-4-sans-font,
+    500 24px/140% var(--pkts-font-family-header-sans)
   );
-  --border-radius: var(--esnet-size-radius-xxlarge, 18px);
+  --border-radius: var(--pkts-size-radius-xxlarge, 18px);
 }
 
 /* ============================================
@@ -492,12 +492,12 @@ a.pkts-icon-button.pkts-square {
 .pkts-input-number.pkts-error,
 .pkts-input-search.pkts-error,
 .pkts-input-text-area.pkts-error {
-  border-color: var(--esnet-color-core-red-700, #a6111b);
-  border-width: var(--esnet-size-border-width-small, 0.125rem);
-  box-shadow: 0 0 0 var(--esnet-size-border-width-small)
+  border-color: var(--pkts-color-core-red-700, #a6111b);
+  border-width: var(--pkts-size-border-width-small, 0.125rem);
+  box-shadow: 0 0 0 var(--pkts-size-border-width-small)
     color-mix(
       in srgb,
-      var(--esnet-color-light-error, #a6111b) 26%,
+      var(--pkts-color-light-error, #a6111b) 26%,
       transparent
     );
 }
@@ -508,7 +508,7 @@ a.pkts-icon-button.pkts-square {
 .dark .pkts-input-number.pkts-error,
 .dark .pkts-input-search.pkts-error,
 .dark .pkts-input-text-area.pkts-error {
-  border-color: var(--esnet-color-core-red-500, #eb3321);
+  border-color: var(--pkts-color-core-red-500, #eb3321);
 }
 
 .pkts-input-text.pkts-branded,
@@ -517,7 +517,7 @@ a.pkts-icon-button.pkts-square {
 .pkts-input-number.pkts-branded,
 .pkts-input-search.pkts-branded,
 .pkts-input-text-area.pkts-branded {
-  border-radius: var(--esnet-size-radius-circle, 999px);
+  border-radius: var(--pkts-size-radius-circle, 999px);
 }
 
 .dark .pkts-input-text.pkts-branded,
@@ -534,12 +534,12 @@ a.pkts-icon-button.pkts-square {
    ============================================ */
 
 .pkts-alert.pkts-error {
-  background-color: var(--esnet-color-light-error, #d61200);
-  color: var(--esnet-color-dark-copy, #e6e6e6);
+  background-color: var(--pkts-color-light-error, #d61200);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
 }
 
 .dark .pkts-alert.pkts-error {
-  background-color: var(--esnet-color-dark-error, #d61200);
+  background-color: var(--pkts-color-dark-error, #d61200);
 }
 
 .pkts-alert.pkts-error label,
@@ -550,12 +550,12 @@ a.pkts-icon-button.pkts-square {
 .pkts-alert.pkts-error h4,
 .pkts-alert.pkts-error h5,
 .pkts-alert.pkts-error h6 {
-  color: var(--esnet-color-dark-copy, #e6e6e6);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
 }
 
 .pkts-alert.pkts-warning {
-  background-color: var(--esnet-color-light-warning, #cc9e16);
-  color: var(--esnet-color-light-copy, #000);
+  background-color: var(--pkts-color-light-warning, #cc9e16);
+  color: var(--pkts-color-light-copy, #000);
 }
 
 .pkts-alert.pkts-warning label,
@@ -566,26 +566,26 @@ a.pkts-icon-button.pkts-square {
 .pkts-alert.pkts-warning h4,
 .pkts-alert.pkts-warning h5,
 .pkts-alert.pkts-warning h6 {
-  color: var(--esnet-color-light-copy, #000);
+  color: var(--pkts-color-light-copy, #000);
 }
 
 .dark .pkts-alert.pkts-warning {
-  background-color: var(--esnet-color-dark-warning, #cc9e16);
+  background-color: var(--pkts-color-dark-warning, #cc9e16);
 }
 
 .pkts-alert.pkts-info {
-  background-color: var(--esnet-color-light-surface-2, #f2f2f2);
-  border-left: var(--esnet-size-border-width-large, 8px) solid
-    var(--esnet-color-core-blue-600, #0088b5);
+  background-color: var(--pkts-color-light-surface-2, #f2f2f2);
+  border-left: var(--pkts-size-border-width-large, 8px) solid
+    var(--pkts-color-core-blue-600, #0088b5);
 }
 
 .dark .pkts-alert.pkts-info {
-  background-color: var(--esnet-color-dark-surface-2, #4d4d4f);
+  background-color: var(--pkts-color-dark-surface-2, #4d4d4f);
 }
 
 .pkts-alert.pkts-success {
-  background-color: var(--esnet-color-light-success, #0e8a0e);
-  color: var(--esnet-color-dark-copy, #e6e6e6);
+  background-color: var(--pkts-color-light-success, #0e8a0e);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
 }
 
 .pkts-alert.pkts-success label,
@@ -596,11 +596,11 @@ a.pkts-icon-button.pkts-square {
 .pkts-alert.pkts-success h4,
 .pkts-alert.pkts-success h5,
 .pkts-alert.pkts-success h6 {
-  color: var(--esnet-color-dark-copy, #e6e6e6);
+  color: var(--pkts-color-dark-copy, #e6e6e6);
 }
 
 .dark .pkts-alert.pkts-success {
-  background-color: var(--esnet-color-dark-success, #0e8a0e);
+  background-color: var(--pkts-color-dark-success, #0e8a0e);
 }
 
 /* ============================================
@@ -609,15 +609,15 @@ a.pkts-icon-button.pkts-square {
 
 .pkts-spacer.pkts-horizontal {
   width: 100%;
-  height: var(--esnet-size-spacing-medium, 16px);
+  height: var(--pkts-size-spacing-medium, 16px);
 }
 
 .pkts-spacer.pkts-vertical {
-  width: var(--esnet-size-spacing-medium, 16px);
+  width: var(--pkts-size-spacing-medium, 16px);
   height: 100%;
 }
 
 .pkts-spacer.pkts-square {
-  width: var(--esnet-size-spacing-medium, 16px);
-  height: var(--esnet-size-spacing-medium, 16px);
+  width: var(--pkts-size-spacing-medium, 16px);
+  height: var(--pkts-size-spacing-medium, 16px);
 }

From b608ea598ac4a64be2539715324f9997d7f00b7e Mon Sep 17 00:00:00 2001
From: Ethan Chennault <ethanolchennault@gmail.com>
Date: Fri, 17 Apr 2026 17:54:23 -0700
Subject: [PATCH 4/8] Rename --esnet prefix for CSS variables to --pkts in
 ui-web

---
 .../components/PktsIcon/PktsIcon.module.css   |  4 +-
 packages/ui-web/src/style/grid.css            |  4 +-
 packages/ui-web/src/style/surfaces.css        | 24 ++---
 packages/ui-web/src/style/tokens.css          |  2 +-
 packages/ui-web/src/style/typography.css      | 88 +++++++++----------
 5 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/packages/ui-web/src/components/PktsIcon/PktsIcon.module.css b/packages/ui-web/src/components/PktsIcon/PktsIcon.module.css
index 8f45eb24..b2497b19 100644
--- a/packages/ui-web/src/components/PktsIcon/PktsIcon.module.css
+++ b/packages/ui-web/src/components/PktsIcon/PktsIcon.module.css
@@ -3,9 +3,9 @@
     justify-content: center;
     align-items: center;
     
-    color: var(--esnet-color-light-surface-2) currentColor;
+    color: var(--pkts-color-light-surface-2) currentColor;
 
     :global(.dark) & {
-        color: var(--esnet-color-dark-surface-2) currentColor;
+        color: var(--pkts-color-dark-surface-2) currentColor;
     }
 }
\ No newline at end of file
diff --git a/packages/ui-web/src/style/grid.css b/packages/ui-web/src/style/grid.css
index cbbb8fcd..a39899a3 100644
--- a/packages/ui-web/src/style/grid.css
+++ b/packages/ui-web/src/style/grid.css
@@ -1,6 +1,6 @@
 .packets-grid {
-  --grid-gap: var(--esnet-size-spacing-xsmall, 8px);
-  --bottom-margin: var(--esnet-size-spacing-xsmall, 8px);
+  --grid-gap: var(--pkts-size-spacing-xsmall, 8px);
+  --bottom-margin: var(--pkts-size-spacing-xsmall, 8px);
 
   display: grid;
   grid-gap: var(--grid-gap);
diff --git a/packages/ui-web/src/style/surfaces.css b/packages/ui-web/src/style/surfaces.css
index d35b39e8..98d5dd6a 100644
--- a/packages/ui-web/src/style/surfaces.css
+++ b/packages/ui-web/src/style/surfaces.css
@@ -1,49 +1,49 @@
 body,
 .packets-ui {
-  background-color: var(--esnet-color-light-background, #cccccc);
+  background-color: var(--pkts-color-light-background, #cccccc);
 
   :global(.dark) & {
-    background-color: var(--esnet-color-dark-background, #19191a);
+    background-color: var(--pkts-color-dark-background, #19191a);
   }
 }
 
 .packets {
   /* dark/light overide classes */
   &.light {
-    background-color: var(--esnet-color-light-background, #cccccc) !important;
+    background-color: var(--pkts-color-light-background, #cccccc) !important;
   }
 
   &.dark {
-    background-color: var(--esnet-color-dark-background, #19191a) !important;
+    background-color: var(--pkts-color-dark-background, #19191a) !important;
   }
 
   /* Nested Surface Layers using just surface class */
   .surface {
-    background-color: var(--esnet-color-light-surface-1, #e3e3e3);
+    background-color: var(--pkts-color-light-surface-1, #e3e3e3);
     .dark & {
-      background-color: var(--esnet-color-dark-surface-1, #3d3d3d);
+      background-color: var(--pkts-color-dark-surface-1, #3d3d3d);
     }
 
     .surface {
-      background-color: var(--esnet-color-light-surface-2, #f2f2f2);
+      background-color: var(--pkts-color-light-surface-2, #f2f2f2);
       .dark & {
-        background-color: var(--esnet-color-dark-surface-2, #4d4d4f);
+        background-color: var(--pkts-color-dark-surface-2, #4d4d4f);
       }
     }
   }
 
   /* Bespoke instances of surface layers */
   .surface1 {
-    background-color: var(--esnet-color-light-surface-1, #e3e3e3);
+    background-color: var(--pkts-color-light-surface-1, #e3e3e3);
     .dark & {
-      background-color: var(--esnet-color-dark-surface-1, #3d3d3d);
+      background-color: var(--pkts-color-dark-surface-1, #3d3d3d);
     }
   }
 
   .surface2 {
-    background-color: var(--esnet-color-light-surface-2, #f2f2f2);
+    background-color: var(--pkts-color-light-surface-2, #f2f2f2);
     .dark & {
-      background-color: var(--esnet-color-dark-surface-2, #4d4d4f);
+      background-color: var(--pkts-color-dark-surface-2, #4d4d4f);
     }
   }
 }
diff --git a/packages/ui-web/src/style/tokens.css b/packages/ui-web/src/style/tokens.css
index 23cec305..e2ddeece 100644
--- a/packages/ui-web/src/style/tokens.css
+++ b/packages/ui-web/src/style/tokens.css
@@ -1 +1 @@
-@import "@esnet/esnet-tokens/dist/esnet-tokens.css";
\ No newline at end of file
+@import "@esnet/pkts-tokens/dist/pkts-tokens.css";
\ No newline at end of file
diff --git a/packages/ui-web/src/style/typography.css b/packages/ui-web/src/style/typography.css
index 63d85b26..5a9183c6 100644
--- a/packages/ui-web/src/style/typography.css
+++ b/packages/ui-web/src/style/typography.css
@@ -1,9 +1,9 @@
 /* TODO: New Common Look and Feel Values */
 
 .packets {
-  color: var(--esnet-color-light-copy, #3d3d3d);
+  color: var(--pkts-color-light-copy, #3d3d3d);
   .dark & {
-    color: var(--esnet-color-dark-copy, #e6e6e6);
+    color: var(--pkts-color-dark-copy, #e6e6e6);
   }
 
   /* General Typography overrides */
@@ -17,12 +17,12 @@
   p {
     width: 100%;
     margin: 0;
-    padding: 0 0 var(--esnet-size-spacing-xsmall, 0.5rem);
+    padding: 0 0 var(--pkts-size-spacing-xsmall, 0.5rem);
 
-    color: var(--esnet-color-light-copy, #3d3d3d);
+    color: var(--pkts-color-light-copy, #3d3d3d);
 
     .dark & {
-      color: var(--esnet-color-dark-copy, #e6e6e6);
+      color: var(--pkts-color-dark-copy, #e6e6e6);
     }
   }
 
@@ -30,30 +30,30 @@
   .h1,
   .header1 {
     font: var(
-      --esnet-typography-header-1-sans-font,
-      600 48px/110% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-1-sans-font,
+      600 48px/110% var(--pkts-font-family-header-sans)
     );
-    letter-spacing: var(--esnet-typography-header-1-sans-letterspacing, 0.49px);
+    letter-spacing: var(--pkts-typography-header-1-sans-letterspacing, 0.49px);
 
     &.display {
       font: var(
-        --esnet-typography-header-1-display-font,
-        700 49px/110% var(--esnet-font-family-header-display)
+        --pkts-typography-header-1-display-font,
+        700 49px/110% var(--pkts-font-family-header-display)
       );
 
       letter-spacing: var(
-        --esnet-typography-header-1-display-letterspacing,
+        --pkts-typography-header-1-display-letterspacing,
         0.49px
       );
     }
 
     &.sans {
       font: var(
-        --esnet-typography-header-1-sans-font,
-        700 49px/110% var(--esnet-font-family-header-sans)
+        --pkts-typography-header-1-sans-font,
+        700 49px/110% var(--pkts-font-family-header-sans)
       );
       letter-spacing: var(
-        --esnet-typography-header-1-sans-letterspacing,
+        --pkts-typography-header-1-sans-letterspacing,
         0.49px
       );
     }
@@ -63,8 +63,8 @@
   .h2,
   .header2 {
     font: var(
-      --esnet-typography-header-2-sans-font,
-      700 39px/130% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-2-sans-font,
+      700 39px/130% var(--pkts-font-family-header-sans)
     );
   }
 
@@ -72,8 +72,8 @@
   .h3,
   .header3 {
     font: var(
-      --esnet-typography-header-3-sans-font,
-      700 31px/140% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-3-sans-font,
+      700 31px/140% var(--pkts-font-family-header-sans)
     );
   }
 
@@ -81,14 +81,14 @@
   .h4,
   .header4 {
     font: var(
-      --esnet-typography-header-4-sans-font,
-      700 25px/140% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-4-sans-font,
+      700 25px/140% var(--pkts-font-family-header-sans)
     );
 
     &.mono {
       font: var(
-        --esnet-typography-header-4-mono-font,
-        500 25px/140% var(--esnet-font-family-header-mono)
+        --pkts-typography-header-4-mono-font,
+        500 25px/140% var(--pkts-font-family-header-mono)
       );
     }
   }
@@ -97,14 +97,14 @@
   .h5,
   .header5 {
     font: var(
-      --esnet-typography-header-5-sans-font,
-      600 20px/140% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-5-sans-font,
+      600 20px/140% var(--pkts-font-family-header-sans)
     );
 
     &.mono {
       font: var(
-        --esnet-typography-header-5-mono-font,
-        500 20px/140% var(--esnet-font-family-header-mono)
+        --pkts-typography-header-5-mono-font,
+        500 20px/140% var(--pkts-font-family-header-mono)
       );
     }
   }
@@ -113,14 +113,14 @@
   .h6,
   .header6 {
     font: var(
-      --esnet-typography-header-6-sans-font,
-      600 16px/140% var(--esnet-font-family-header-sans)
+      --pkts-typography-header-6-sans-font,
+      600 16px/140% var(--pkts-font-family-header-sans)
     );
 
     &.mono {
       font: var(
-        --esnet-typography-header-6-mono-font,
-        500 16px/140% var(--esnet-font-family-header-mono)
+        --pkts-typography-header-6-mono-font,
+        500 16px/140% var(--pkts-font-family-header-mono)
       );
     }
   }
@@ -131,14 +131,14 @@
   li,
   .copy-1 {
     font: var(
-      --esnet-typography-copy-1-sans-font,
-      400 16px/120% var(--esnet-font-family-body-sans)
+      --pkts-typography-copy-1-sans-font,
+      400 16px/120% var(--pkts-font-family-body-sans)
     );
 
     &.mono {
       font: var(
-        --esnet-typography-copy-1-mono-font,
-        400 16px/120% var(--esnet-font-family-body-mono)
+        --pkts-typography-copy-1-mono-font,
+        400 16px/120% var(--pkts-font-family-body-mono)
       );
     }
   }
@@ -147,21 +147,21 @@
     display: inline-block;
     margin: 0;
     font: var(
-      --esnet-typography-label-1-sans-font,
-      400 12px/120% var(--esnet-font-family-body-sans)
+      --pkts-typography-label-1-sans-font,
+      400 12px/120% var(--pkts-font-family-body-sans)
     );
     letter-spacing: -0.18px;
 
-    color: var(--esnet-color-light-copy, #3d3d3d);
+    color: var(--pkts-color-light-copy, #3d3d3d);
 
     .dark & {
-      color: var(--esnet-color-dark-copy, #e6e6e6);
+      color: var(--pkts-color-dark-copy, #e6e6e6);
     }
 
     &.mono {
       font: var(
-        --esnet-typography-label-1-mono-font,
-        400 12px/120% var(--esnet-font-family-body-mono)
+        --pkts-typography-label-1-mono-font,
+        400 12px/120% var(--pkts-font-family-body-mono)
       );
     }
   }
@@ -171,14 +171,14 @@
     margin: 0;
 
     font: var(
-      --esnet-typography-label-2-sans-font,
-      600 12px/120% var(--esnet-font-family-body-sans)
+      --pkts-typography-label-2-sans-font,
+      600 12px/120% var(--pkts-font-family-body-sans)
     );
 
-    color: var(--esnet-color-light-copy, #3d3d3d);
+    color: var(--pkts-color-light-copy, #3d3d3d);
 
     .dark & {
-      color: var(--esnet-color-dark-copy, #e6e6e6);
+      color: var(--pkts-color-dark-copy, #e6e6e6);
     }
   }
 }

From 03753791a01e3f0c680f36965574b8912e23fc2a Mon Sep 17 00:00:00 2001
From: Ethan Chennault <ethanolchennault@gmail.com>
Date: Fri, 17 Apr 2026 17:54:26 -0700
Subject: [PATCH 5/8] Rename --esnet prefix for CSS variables to --pkts in
 ui-react

---
 .../PacketsDesignTokenProvider.tsx                        | 2 +-
 .../PacketsDesignTokenProviderContext.ts                  | 2 +-
 .../PktsSkeletonSurface/PktsSkeletonSurface.tsx           | 8 ++++----
 .../ui-react/src/components/PktsSpacer/PktsSpacer.tsx     | 6 +++---
 .../src/components/PktsSpacer/PktsSpacer.types.ts         | 4 ++--
 packages/ui-react/src/lib/hooks/usePopupState.ts          | 4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/ui-react/src/components/PacketsDesignTokenProvider/PacketsDesignTokenProvider.tsx b/packages/ui-react/src/components/PacketsDesignTokenProvider/PacketsDesignTokenProvider.tsx
index 91545573..268b4fc4 100644
--- a/packages/ui-react/src/components/PacketsDesignTokenProvider/PacketsDesignTokenProvider.tsx
+++ b/packages/ui-react/src/components/PacketsDesignTokenProvider/PacketsDesignTokenProvider.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import PacketsDesignTokenProviderContext from "./PacketsDesignTokenProviderContext";
 
 // @ts-ignore
-import * as designTokens from "@esnet/esnet-tokens";
+import * as designTokens from "@esnet/pkts-tokens";
 
 const PacketsDesignTokenProvider = ({
   children,
diff --git a/packages/ui-react/src/components/PacketsDesignTokenProvider/PacketsDesignTokenProviderContext.ts b/packages/ui-react/src/components/PacketsDesignTokenProvider/PacketsDesignTokenProviderContext.ts
index 7df9fe2b..b308d130 100644
--- a/packages/ui-react/src/components/PacketsDesignTokenProvider/PacketsDesignTokenProviderContext.ts
+++ b/packages/ui-react/src/components/PacketsDesignTokenProvider/PacketsDesignTokenProviderContext.ts
@@ -1,7 +1,7 @@
 import React from "react";
 
 // @ts-ignore
-import * as designTokens from "@esnet/esnet-tokens";
+import * as designTokens from "@esnet/pkts-tokens";
 
 const PacketsDesignTokenProviderContext =
   React.createContext<object>(designTokens);
diff --git a/packages/ui-react/src/components/PktsSkeletonSurface/PktsSkeletonSurface.tsx b/packages/ui-react/src/components/PktsSkeletonSurface/PktsSkeletonSurface.tsx
index 754021a4..24c2aa9e 100644
--- a/packages/ui-react/src/components/PktsSkeletonSurface/PktsSkeletonSurface.tsx
+++ b/packages/ui-react/src/components/PktsSkeletonSurface/PktsSkeletonSurface.tsx
@@ -3,7 +3,7 @@ import React, { CSSProperties, FC } from "react";
 import { PktsSkeletonSurfaceProps } from "./PktsSkeletonSurfaceProps";
 
 /**
- * ESSkeletonSurface Component
+ * PktsSkeletonSurface Component
  *
  * Visual representation of a Pill/Chip loading.
  *
@@ -13,9 +13,9 @@ import { PktsSkeletonSurfaceProps } from "./PktsSkeletonSurfaceProps";
 const PktsSkeletonSurface: FC<PktsSkeletonSurfaceProps> = ({
   isSquare = false,
   className = "",
-  strokeSize = "var(--esnet-size-border-width-medium, 3px)",
-  strokeRadius = "var(--esnet-size-spacing-large, 2rem)",
-  height = "var(--esnet-size-touchtarget-min, 2rem)",
+  strokeSize = "var(--pkts-size-border-width-medium, 3px)",
+  strokeRadius = "var(--pkts-size-spacing-large, 2rem)",
+  height = "var(--pkts-size-touchtarget-min, 2rem)",
 }) => {
   const inlineStyles = {
     "--stroke-size": strokeSize,
diff --git a/packages/ui-react/src/components/PktsSpacer/PktsSpacer.tsx b/packages/ui-react/src/components/PktsSpacer/PktsSpacer.tsx
index f762d6a1..409040fc 100644
--- a/packages/ui-react/src/components/PktsSpacer/PktsSpacer.tsx
+++ b/packages/ui-react/src/components/PktsSpacer/PktsSpacer.tsx
@@ -1,9 +1,9 @@
 import React, { FC, useMemo } from "react";
 import clsx from "clsx";
-import { PktsSpacerProps, getESSpacerSizesCSS } from "./PktsSpacer.types";
+import { PktsSpacerProps, getPktsSpacerSizesCSS } from "./PktsSpacer.types";
 
 /**
- * ESSpacer Component
+ * PktsSpacer Component
  *
  * Spacer component adds a design tokens worth of spacing on a axis/type specified.
  * The distance of the spacing is regulated by the sizing token passed to it.
@@ -17,7 +17,7 @@ const PktsSpacer: FC<PktsSpacerProps> = ({
   className,
 }) => {
   const sizeCSS = useMemo(() => {
-    return getESSpacerSizesCSS(size);
+    return getPktsSpacerSizesCSS(size);
   }, [size]);
 
   return (
diff --git a/packages/ui-react/src/components/PktsSpacer/PktsSpacer.types.ts b/packages/ui-react/src/components/PktsSpacer/PktsSpacer.types.ts
index 9bf2df93..4b270d1b 100644
--- a/packages/ui-react/src/components/PktsSpacer/PktsSpacer.types.ts
+++ b/packages/ui-react/src/components/PktsSpacer/PktsSpacer.types.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
-export const getESSpacerSizesCSS = (size: string) => {
-  return `var(--esnet-size-spacing-${size})`;
+export const getPktsSpacerSizesCSS = (size: string) => {
+  return `var(--pkts-size-spacing-${size})`;
 };
 
 export type PktsSpacerProps = {
diff --git a/packages/ui-react/src/lib/hooks/usePopupState.ts b/packages/ui-react/src/lib/hooks/usePopupState.ts
index 1be025dd..ef1d692d 100644
--- a/packages/ui-react/src/lib/hooks/usePopupState.ts
+++ b/packages/ui-react/src/lib/hooks/usePopupState.ts
@@ -1,12 +1,12 @@
 /* eslint-disable no-unused-vars */
 import { useEffect, RefObject, useState, useRef, useCallback } from "react";
-import { ESNET_TIME_DURATION_MEDIUM } from "@esnet/esnet-tokens";
+import { PKTS_TIME_DURATION_MEDIUM } from "@esnet/pkts-tokens";
 
 // 0 represents not opened, 1 represents opened due to hover/focus, 2 represents open due to click, which supercedes hovering
 type OpenType = 0 | 1 | 2;
 
 // the amount of time the popup stays open for after hovering
-const persistDuration = parseInt(ESNET_TIME_DURATION_MEDIUM);
+const persistDuration = parseInt(PKTS_TIME_DURATION_MEDIUM);
 
 /**
  * Custom React hook that adds accessibility handling and open/close behavior to components with an anchor and popup.

From efbc288d7fb26e6a43a2b3ab254fa34d9e52a38c Mon Sep 17 00:00:00 2001
From: Ethan Chennault <ethanolchennault@gmail.com>
Date: Fri, 17 Apr 2026 17:54:29 -0700
Subject: [PATCH 6/8] Rename --esnet prefix for CSS variables to --pkts in
 doc-ui

---
 .../BorderDocBlock/BorderDocBlock.module.scss |  6 ++---
 packages/doc-ui/src/Datum/Datum.module.scss   |  4 ++--
 .../src/DatumList/DatumList.module.scss       |  2 +-
 .../DurationDocBlock.module.scss              | 20 ++++++++---------
 .../RadiusDocBlock/RadiusDocBlock.module.scss |  6 ++---
 .../ShadowDocBlock/ShadowDocBlock.module.scss |  6 ++---
 .../SpacingDocBlock.module.scss               | 22 +++++++++----------
 .../SpacingDocSquare.module.scss              | 12 +++++-----
 .../TypographyDocBlock.module.scss            |  2 +-
 .../TypographyDocBlock/TypographyDocBlock.tsx |  2 +-
 10 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/packages/doc-ui/src/BorderDocBlock/BorderDocBlock.module.scss b/packages/doc-ui/src/BorderDocBlock/BorderDocBlock.module.scss
index 23916846..9d58dbce 100644
--- a/packages/doc-ui/src/BorderDocBlock/BorderDocBlock.module.scss
+++ b/packages/doc-ui/src/BorderDocBlock/BorderDocBlock.module.scss
@@ -1,14 +1,14 @@
 .borderDocBlock {
   --border-border: 3px;
   display: block;
-  padding: var(--esnet-size-spacing-xsmall);
+  padding: var(--pkts-size-spacing-xsmall);
 
   .previewblock {
     display: block;
     aspect-ratio: 1/1;
     width: 32px;
-    background-color: var(--esnet-color-core-white-500);
-    border: var(--border-border) solid var(--esnet-color-light-primary);
+    background-color: var(--pkts-color-core-white-500);
+    border: var(--border-border) solid var(--pkts-color-light-primary);
   }
 }
 
diff --git a/packages/doc-ui/src/Datum/Datum.module.scss b/packages/doc-ui/src/Datum/Datum.module.scss
index 4ab5ab3b..53accaa6 100644
--- a/packages/doc-ui/src/Datum/Datum.module.scss
+++ b/packages/doc-ui/src/Datum/Datum.module.scss
@@ -3,13 +3,13 @@
 
   .label {
     display: block;
-    font: var(--esnet-typography-label);
+    font: var(--pkts-typography-label);
     color: black;
     font-weight: 700;
   }
 
   .value {
-    font: var(--esnet-typography-copy);
+    font: var(--pkts-typography-copy);
     color: black;
   }
 }
diff --git a/packages/doc-ui/src/DatumList/DatumList.module.scss b/packages/doc-ui/src/DatumList/DatumList.module.scss
index 0b57d547..a08ed6f3 100644
--- a/packages/doc-ui/src/DatumList/DatumList.module.scss
+++ b/packages/doc-ui/src/DatumList/DatumList.module.scss
@@ -3,7 +3,7 @@
 
     display: grid;
     grid-template-columns: repeat(var(--column-count), 1fr);
-    gap: var(--esnet-size-spacing-medium);
+    gap: var(--pkts-size-spacing-medium);
 
 
     > :last-child {
diff --git a/packages/doc-ui/src/DurationDocBlock/DurationDocBlock.module.scss b/packages/doc-ui/src/DurationDocBlock/DurationDocBlock.module.scss
index b1a942d5..bf8d7ac5 100644
--- a/packages/doc-ui/src/DurationDocBlock/DurationDocBlock.module.scss
+++ b/packages/doc-ui/src/DurationDocBlock/DurationDocBlock.module.scss
@@ -1,31 +1,31 @@
 .durationDocBlock {
   --duration: 1000ms;
   display: block;
-  border-radius: var(--esnet-size-radius-medium);
-  transition: all var(--esnet-time-duration-medium) ease-in;
-  padding: var(--esnet-size-spacing-xsmall);
+  border-radius: var(--pkts-size-radius-medium);
+  transition: all var(--pkts-time-duration-medium) ease-in;
+  padding: var(--pkts-size-spacing-xsmall);
 
   .previewAnimation {
     flex: 1;
   }
 
   .preview {
-    margin-top: var(--esnet-size-spacing-xsmall);
-    background-color: var(--esnet-color-core-white-500);
+    margin-top: var(--pkts-size-spacing-xsmall);
+    background-color: var(--pkts-color-core-white-500);
     height: 12px;
-    border-radius: var(--esnet-size-radius-large);
+    border-radius: var(--pkts-size-radius-large);
     display: flex;
     align-items: center;
 
     .indicator {
-      height: var(--esnet-size-spacing-xsmall);
-      background-color: var(--esnet-color-core-orange-500);
-      border-radius: var(--esnet-size-radius-large);
+      height: var(--pkts-size-spacing-xsmall);
+      background-color: var(--pkts-color-core-orange-500);
+      border-radius: var(--pkts-size-radius-large);
     }
   }
 
   &:hover {
-    background-color: var(--esnet-color-core-white-200);
+    background-color: var(--pkts-color-core-white-200);
 
     .indicator {
       animation: indicatorPreview var(--duration) linear 0ms infinite;
diff --git a/packages/doc-ui/src/RadiusDocBlock/RadiusDocBlock.module.scss b/packages/doc-ui/src/RadiusDocBlock/RadiusDocBlock.module.scss
index f50e95df..bc4ad580 100644
--- a/packages/doc-ui/src/RadiusDocBlock/RadiusDocBlock.module.scss
+++ b/packages/doc-ui/src/RadiusDocBlock/RadiusDocBlock.module.scss
@@ -1,14 +1,14 @@
 .radiusDocBlock {
   --border-radius-preview: 16px;
   display: block;
-  padding: var(--esnet-size-spacing-xsmall);
+  padding: var(--pkts-size-spacing-xsmall);
 
   .previewblock {
     display: block;
     aspect-ratio: 1/1;
     width: 32px;
-    background-color: var(--esnet-color-core-white-500);
-    border: 1px solid var(--esnet-color-light-primary);
+    background-color: var(--pkts-color-core-white-500);
+    border: 1px solid var(--pkts-color-light-primary);
     border-radius: var(--border-radius-preview);
   }
 }
diff --git a/packages/doc-ui/src/ShadowDocBlock/ShadowDocBlock.module.scss b/packages/doc-ui/src/ShadowDocBlock/ShadowDocBlock.module.scss
index b1986820..fac2eade 100644
--- a/packages/doc-ui/src/ShadowDocBlock/ShadowDocBlock.module.scss
+++ b/packages/doc-ui/src/ShadowDocBlock/ShadowDocBlock.module.scss
@@ -1,14 +1,14 @@
 .shadowDocBlock {
   --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
   display: block;
-  padding: var(--esnet-size-spacing-xsmall);
+  padding: var(--pkts-size-spacing-xsmall);
 
   .previewblock {
     display: block;
     aspect-ratio: 1/1;
     width: 32px;
-    background-color: var(--esnet-color-core-white-500);
-    border: var(--esnet-size-border-xsmall) solid var(--esnet-color-light-primary);
+    background-color: var(--pkts-color-core-white-500);
+    border: var(--pkts-size-border-xsmall) solid var(--pkts-color-light-primary);
     box-shadow: var(--box-shadow);
   }
 }
diff --git a/packages/doc-ui/src/SpacingDocBlock/SpacingDocBlock.module.scss b/packages/doc-ui/src/SpacingDocBlock/SpacingDocBlock.module.scss
index 0592dcf3..0dafb4b1 100644
--- a/packages/doc-ui/src/SpacingDocBlock/SpacingDocBlock.module.scss
+++ b/packages/doc-ui/src/SpacingDocBlock/SpacingDocBlock.module.scss
@@ -1,27 +1,27 @@
 .spacingDocBlock {
   --border-border: 3px;
   display: block;
-  padding: var(--esnet-size-spacing-xsmall);
+  padding: var(--pkts-size-spacing-xsmall);
 
   .previewblock {
     display: block;
     width: var(--spacing-preview);
     height: 32px;
-    background-color: var(--esnet-color-core-white-500);
-    border-left: var(--esnet-size-border-xsmall) solid
-      var(--esnet-color-light-primary);
-    border-right: var(--esnet-size-border-xsmall) solid
-      var(--esnet-color-light-primary);
+    background-color: var(--pkts-color-core-white-500);
+    border-left: var(--pkts-size-border-xsmall) solid
+      var(--pkts-color-light-primary);
+    border-right: var(--pkts-size-border-xsmall) solid
+      var(--pkts-color-light-primary);
   }
 
   .previewVerticalblock {
     display: block;
     width: 32px;
     height: var(--spacing-preview);
-    background-color: var(--esnet-color-core-white-500);
-    border-top: var(--esnet-size-border-xsmall) solid
-      var(--esnet-color-light-primary);
-    border-bottom: var(--esnet-size-border-xsmall) solid
-      var(--esnet-color-light-primary);
+    background-color: var(--pkts-color-core-white-500);
+    border-top: var(--pkts-size-border-xsmall) solid
+      var(--pkts-color-light-primary);
+    border-bottom: var(--pkts-size-border-xsmall) solid
+      var(--pkts-color-light-primary);
   }
 }
\ No newline at end of file
diff --git a/packages/doc-ui/src/SpacingDocSquare/SpacingDocSquare.module.scss b/packages/doc-ui/src/SpacingDocSquare/SpacingDocSquare.module.scss
index 99620b40..91d8be75 100644
--- a/packages/doc-ui/src/SpacingDocSquare/SpacingDocSquare.module.scss
+++ b/packages/doc-ui/src/SpacingDocSquare/SpacingDocSquare.module.scss
@@ -2,14 +2,14 @@
   display: block;
   width: 32px;
   height: 32px;
-  background-color: var(--esnet-color-light-surface-1, #e3e3e3);
-  border-left: var(--esnet-size-border-xsmall) solid
-    var(--esnet-color-light-primary);
-  border-right: var(--esnet-size-border-xsmall) solid
-    var(--esnet-color-light-primary);
+  background-color: var(--pkts-color-light-surface-1, #e3e3e3);
+  border-left: var(--pkts-size-border-xsmall) solid
+    var(--pkts-color-light-primary);
+  border-right: var(--pkts-size-border-xsmall) solid
+    var(--pkts-color-light-primary);
 
   .dark & {
-    background-color: var(--esnet-color-dark-surface-1, #3d3d3d);
+    background-color: var(--pkts-color-dark-surface-1, #3d3d3d);
   }
 
   &.fill {
diff --git a/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.module.scss b/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.module.scss
index 43972e08..5aee1424 100644
--- a/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.module.scss
+++ b/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.module.scss
@@ -2,7 +2,7 @@
   --font: "Source Sans 3";
 
   display: block;
-  padding: var(--esnet-size-spacing-xsmall);
+  padding: var(--pkts-size-spacing-xsmall);
 
   .previewblock {
     display: inline-block;
diff --git a/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.tsx b/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.tsx
index 314f3a15..9e91b5b5 100644
--- a/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.tsx
+++ b/packages/doc-ui/src/TypographyDocBlock/TypographyDocBlock.tsx
@@ -29,7 +29,7 @@ const TypographyDocBlock: React.FC<TypographyDocBlockProps> = ({
           name="Preview"
           value={
             <div className={styles.previewblock}>
-              ESNet: The Energy Science Network
+              Packets: The Design System
             </div>
           }
         />

From 2816406ad7c6235b0535da1ec03c61290b662833 Mon Sep 17 00:00:00 2001
From: Ethan Chennault <ethanolchennault@gmail.com>
Date: Fri, 17 Apr 2026 17:54:33 -0700
Subject: [PATCH 7/8] Update docs and stories to reference pkts token prefix

---
 apps/host-docs/src/breakpoints-tokens.mdx            |  4 ++--
 apps/host-docs/src/color-tokens.mdx                  |  6 +++---
 apps/host-docs/src/design-tokens.mdx                 |  4 ++--
 apps/host-docs/src/elevation-and-shadows-tokens.mdx  |  4 ++--
 apps/host-docs/src/icon-tokens.mdx                   |  2 +-
 apps/host-docs/src/motion-tokens.mdx                 |  4 ++--
 apps/host-docs/src/radius-and-borders-tokens.mdx     |  6 +++---
 apps/host-docs/src/spacing-tokens.mdx                |  4 ++--
 apps/host-docs/src/typography.mdx                    | 12 ++++++------
 .../src/stories/PktsTitleSection.stories.tsx         |  2 +-
 apps/web-docs/src/getting-started.mdx                |  6 +++---
 11 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/apps/host-docs/src/breakpoints-tokens.mdx b/apps/host-docs/src/breakpoints-tokens.mdx
index 1dfdb06c..d2c444bc 100644
--- a/apps/host-docs/src/breakpoints-tokens.mdx
+++ b/apps/host-docs/src/breakpoints-tokens.mdx
@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { SpacingDocBlock, Datum, DatumList } from "doc-ui";
 
 <Meta title="Design Tokens/Breakpoints" />
@@ -17,7 +17,7 @@ return (
 <>
 
 <Datum
-name={`--esnet-size-breakpoints-width-${widthBreakpointKey}`}
+name={`--pkts-size-breakpoints-width-${widthBreakpointKey}`}
 value={tokens.size.breakpoints.width[widthBreakpointKey].value || 0}
 />
 <br />
diff --git a/apps/host-docs/src/color-tokens.mdx b/apps/host-docs/src/color-tokens.mdx
index 5c2910b8..4c52a22f 100644
--- a/apps/host-docs/src/color-tokens.mdx
+++ b/apps/host-docs/src/color-tokens.mdx
@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 
 <Meta title="Design Tokens/Colors" />
 
@@ -21,7 +21,7 @@ Here are the inital set of color ramps and color alias tokens
           const formattedColorGroups = {};
 
           Object.keys(currentColorRamp).forEach(color => {
-            formattedColorGroups[`--esnet-color-core-${colorRamp}-${color}`] = currentColorRamp[color].value
+            formattedColorGroups[`--pkts-color-core-${colorRamp}-${color}`] = currentColorRamp[color].value
           })
 
           return (<ColorItem
@@ -34,7 +34,7 @@ Here are the inital set of color ramps and color alias tokens
           const formattedColorGroups = {};
 
           Object.keys(currentColorGroup).forEach(color => {
-            formattedColorGroups[`--esnet-color-${colorGroup}-${color}`] = currentColorGroup[color].value
+            formattedColorGroups[`--pkts-color-${colorGroup}-${color}`] = currentColorGroup[color].value
           })
 
           return (<ColorItem
diff --git a/apps/host-docs/src/design-tokens.mdx b/apps/host-docs/src/design-tokens.mdx
index 4e924ab3..24366fee 100644
--- a/apps/host-docs/src/design-tokens.mdx
+++ b/apps/host-docs/src/design-tokens.mdx
@@ -30,7 +30,7 @@ import { Meta } from "@storybook/blocks";
 
 ```javascript
 // tailwind.config.js
-import tokens from '@esnet/esnet-tokens/tokens.json';
+import tokens from '@esnet/pkts-tokens/tokens.json';
 
 export default {
   theme: {
@@ -56,7 +56,7 @@ export default {
     Use design tokens directly in your custom components:
 
 ```typescript
-import tokens from '@esnet/esnet-tokens/tokens.json';
+import tokens from '@esnet/pkts-tokens/tokens.json';
 
 const CustomButton = styled.button`
   background-color: ${tokens.color.primary.base.value};
diff --git a/apps/host-docs/src/elevation-and-shadows-tokens.mdx b/apps/host-docs/src/elevation-and-shadows-tokens.mdx
index a5e9e96f..2f8c6851 100644
--- a/apps/host-docs/src/elevation-and-shadows-tokens.mdx
+++ b/apps/host-docs/src/elevation-and-shadows-tokens.mdx
@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { ShadowDocBlock } from "doc-ui";
 
 <Meta title="Design Tokens/Elevation and Shadows" />
@@ -15,6 +15,6 @@ import { ShadowDocBlock } from "doc-ui";
 ### Tokens
 {
     Object.keys(tokens.default["box-shadow"].core).map(shadowTokenKey => {
-        return(<ShadowDocBlock name={`--esnet-box-shadow-core-${shadowTokenKey}`} value={tokens.default["box-shadow"].core[shadowTokenKey].value || 0} />)
+        return(<ShadowDocBlock name={`--pkts-box-shadow-core-${shadowTokenKey}`} value={tokens.default["box-shadow"].core[shadowTokenKey].value || 0} />)
     })
 }
\ No newline at end of file
diff --git a/apps/host-docs/src/icon-tokens.mdx b/apps/host-docs/src/icon-tokens.mdx
index 9254a59b..6ada58f8 100644
--- a/apps/host-docs/src/icon-tokens.mdx
+++ b/apps/host-docs/src/icon-tokens.mdx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Meta, IconGallery, IconItem, Title } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { icons, Network } from "lucide-react";
 
 <Meta title="Design Tokens/Icons" />
diff --git a/apps/host-docs/src/motion-tokens.mdx b/apps/host-docs/src/motion-tokens.mdx
index fca3e2c9..b88d1fed 100644
--- a/apps/host-docs/src/motion-tokens.mdx
+++ b/apps/host-docs/src/motion-tokens.mdx
@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { DurationDocBlock } from "doc-ui";
 
 <Meta title="Design Tokens/Motion" />
@@ -18,6 +18,6 @@ Our design tokens provide a set of semantic speeds for motion.
 
 {
 Object.keys(tokens.time.duration).map(durationKey => {
-return(<DurationDocBlock name={`--esnet-time-duration-${durationKey}`} duration={tokens.time.duration[durationKey].value || 0} />)
+return(<DurationDocBlock name={`--pkts-time-duration-${durationKey}`} duration={tokens.time.duration[durationKey].value || 0} />)
 })
 }
diff --git a/apps/host-docs/src/radius-and-borders-tokens.mdx b/apps/host-docs/src/radius-and-borders-tokens.mdx
index d84d1cc4..cd946c9e 100644
--- a/apps/host-docs/src/radius-and-borders-tokens.mdx
+++ b/apps/host-docs/src/radius-and-borders-tokens.mdx
@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { BorderDocBlock, RadiusDocBlock } from "doc-ui";
 
 <Meta title="Design Tokens/Radiuses and Borders" />
@@ -17,7 +17,7 @@ They can also be used to create circles with a 1/1 aspect ratio.
 
 {
     Object.keys(tokens.size.radius).map(raidusTokenKey => {
-        return(<RadiusDocBlock name={`--esnet-size-radius-${raidusTokenKey}`} value={tokens.size.radius[raidusTokenKey].value || 0} />)
+        return(<RadiusDocBlock name={`--pkts-size-radius-${raidusTokenKey}`} value={tokens.size.radius[raidusTokenKey].value || 0} />)
     })
 }
 
@@ -29,6 +29,6 @@ Borders are the layer just inside the margin layer in the box model.
 
 {
     Object.keys(tokens.size["border-width"]).map(borderTokenKey => {
-        return(<BorderDocBlock name={`--esnet-size-border-width-${borderTokenKey}`} value={tokens.size["border-width"][borderTokenKey].value || 0} />)
+        return(<BorderDocBlock name={`--pkts-size-border-width-${borderTokenKey}`} value={tokens.size["border-width"][borderTokenKey].value || 0} />)
     })
 }
\ No newline at end of file
diff --git a/apps/host-docs/src/spacing-tokens.mdx b/apps/host-docs/src/spacing-tokens.mdx
index a7445695..31c6c048 100644
--- a/apps/host-docs/src/spacing-tokens.mdx
+++ b/apps/host-docs/src/spacing-tokens.mdx
@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { SpacingDocBlock } from "doc-ui";
 
 <Meta title="Design Tokens/Spacing" />
@@ -14,6 +14,6 @@ Spacing tokens can be used to represent the values inbetween elements (padding,
 
 {
     Object.keys(tokens.size.spacing).map(spacingTokenKey => {
-        return(<SpacingDocBlock name={`--esnet-size-spacing-${spacingTokenKey}`} value={tokens.size.spacing[spacingTokenKey].value || 0} />)
+        return(<SpacingDocBlock name={`--pkts-size-spacing-${spacingTokenKey}`} value={tokens.size.spacing[spacingTokenKey].value || 0} />)
     })
 }
diff --git a/apps/host-docs/src/typography.mdx b/apps/host-docs/src/typography.mdx
index f1f40ec2..c6f7dfac 100644
--- a/apps/host-docs/src/typography.mdx
+++ b/apps/host-docs/src/typography.mdx
@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import * as tokens from "@esnet/esnet-tokens/tokens.json";
+import * as tokens from "@esnet/pkts-tokens/tokens.json";
 import { TypographyDocBlock } from "doc-ui";
 
 {
@@ -13,7 +13,7 @@ console.log("tokens", tokens)
 
 {
 Object.keys(tokens.font.family).map(familyKey => {
-const rampKey = ` --esnet-font-family-${familyKey}`;
+const rampKey = ` --pkts-font-family-${familyKey}`;
 const familyOptions = tokens.font.family[familyKey];
 
         const result = Object.keys(familyOptions).map(familyOptionKey => {
@@ -32,7 +32,7 @@ const familyOptions = tokens.font.family[familyKey];
 
 {
 Object.keys(tokens.typography.header).map(headerRampKey => {
-const rampKey = `--esnet-typography-header-${headerRampKey}`;
+const rampKey = `--pkts-typography-header-${headerRampKey}`;
 const headerOptions = tokens.typography.header[headerRampKey];
 
         const result = Object.keys(headerOptions).map(headerOptionKey => {
@@ -51,7 +51,7 @@ const headerOptions = tokens.typography.header[headerRampKey];
 
 {
 Object.keys(tokens.typography.copy).map(copyRampKey => {
-const rampKey = `--esnet-typography-copy-${copyRampKey}`;
+const rampKey = `--pkts-typography-copy-${copyRampKey}`;
 const copyOptions = tokens.typography.copy[copyRampKey];
 
         const result = Object.keys(copyOptions).map(copyOptionKey => {
@@ -70,7 +70,7 @@ const copyOptions = tokens.typography.copy[copyRampKey];
 
 {
 Object.keys(tokens.typography.label).map(labelRampKey => {
-const rampKey = `--esnet-typography-label-${labelRampKey}`;
+const rampKey = `--pkts-typography-label-${labelRampKey}`;
 const labelOptions = tokens.typography.label[labelRampKey];
 
         const result = Object.keys(labelOptions).map(labelOptionKey => {
@@ -90,7 +90,7 @@ const labelOptions = tokens.typography.label[labelRampKey];
 
 {
 Object.keys(tokens.typography.button).map(buttonRampKey => {
-const rampKey = `--esnet-typography-button-${buttonRampKey}`;
+const rampKey = `--pkts-typography-button-${buttonRampKey}`;
 const buttonOptions = tokens.typography.button[buttonRampKey];
 
         const result = Object.keys(buttonOptions).map(buttonOptionKey => {
diff --git a/apps/react-docs/src/stories/PktsTitleSection.stories.tsx b/apps/react-docs/src/stories/PktsTitleSection.stories.tsx
index ff2da2ba..bce45dee 100644
--- a/apps/react-docs/src/stories/PktsTitleSection.stories.tsx
+++ b/apps/react-docs/src/stories/PktsTitleSection.stories.tsx
@@ -33,7 +33,7 @@ export const WithIcons: Story = {
   args: {
     title: (
       <>
-        ESNet <ZapIcon size={24} />
+        Accelerating Science <ZapIcon size={24} />
       </>
     ),
     subtitle: (
diff --git a/apps/web-docs/src/getting-started.mdx b/apps/web-docs/src/getting-started.mdx
index 0cb543de..8298c9f6 100644
--- a/apps/web-docs/src/getting-started.mdx
+++ b/apps/web-docs/src/getting-started.mdx
@@ -31,9 +31,9 @@ import { Meta } from "@storybook/blocks";
 ```
 
     4. Run <br />
-    `npm i @esnet/esnet-tokens @esnet/packets-ui-react`, <br />
-    `pnpm i @esnet/esnet-tokens @esnet/packets-ui-react`, or <br />
-    `yarn add @esnet/esnet-tokens @esnet/packets-ui-react`
+    `npm i @esnet/pkts-tokens @esnet/packets-ui-react`, <br />
+    `pnpm i @esnet/pkts-tokens @esnet/packets-ui-react`, or <br />
+    `yarn add @esnet/pkts-tokens @esnet/packets-ui-react`
     5. Add the `packets-ui` class to the body or root level tag of your project.
     6. (Optional) Add `dark` or `light` classes to the `packets-ui` node to force light or dark mode only.
     7. Add the following to your header element to fetch our fonts from Google's CDN

From 99fae9503c769818c1cf47ded1abd5129818d209 Mon Sep 17 00:00:00 2001
From: Ethan Chennault <ethanolchennault@gmail.com>
Date: Fri, 17 Apr 2026 18:11:31 -0700
Subject: [PATCH 8/8] Rename esnetspinner.riv assets to pkts-spinner.riv

---
 ...etspinner_easing.riv => pkts-spinner-easing.riv} | Bin
 .../riv/{esnetspinner.riv => pkts-spinner.riv}      | Bin
 ...etspinner_easing.riv => pkts-spinner-easing.riv} | Bin
 .../riv/{esnetspinner.riv => pkts-spinner.riv}      | Bin
 ...etspinner_easing.riv => pkts-spinner-easing.riv} | Bin
 .../riv/{esnetspinner.riv => pkts-spinner.riv}      | Bin
 apps/react-docs/src/stories/PktsSpinner.stories.tsx |   4 ++--
 ...etspinner_easing.riv => pkts-spinner-easing.riv} | Bin
 .../riv/{esnetspinner.riv => pkts-spinner.riv}      | Bin
 9 files changed, 2 insertions(+), 2 deletions(-)
 rename apps/css-docs/public/riv/{esnetspinner_easing.riv => pkts-spinner-easing.riv} (100%)
 rename apps/css-docs/public/riv/{esnetspinner.riv => pkts-spinner.riv} (100%)
 rename apps/host-docs/public/riv/{esnetspinner_easing.riv => pkts-spinner-easing.riv} (100%)
 rename apps/host-docs/public/riv/{esnetspinner.riv => pkts-spinner.riv} (100%)
 rename apps/react-docs/public/riv/{esnetspinner_easing.riv => pkts-spinner-easing.riv} (100%)
 rename apps/react-docs/public/riv/{esnetspinner.riv => pkts-spinner.riv} (100%)
 rename apps/web-docs/public/riv/{esnetspinner_easing.riv => pkts-spinner-easing.riv} (100%)
 rename apps/web-docs/public/riv/{esnetspinner.riv => pkts-spinner.riv} (100%)

diff --git a/apps/css-docs/public/riv/esnetspinner_easing.riv b/apps/css-docs/public/riv/pkts-spinner-easing.riv
similarity index 100%
rename from apps/css-docs/public/riv/esnetspinner_easing.riv
rename to apps/css-docs/public/riv/pkts-spinner-easing.riv
diff --git a/apps/css-docs/public/riv/esnetspinner.riv b/apps/css-docs/public/riv/pkts-spinner.riv
similarity index 100%
rename from apps/css-docs/public/riv/esnetspinner.riv
rename to apps/css-docs/public/riv/pkts-spinner.riv
diff --git a/apps/host-docs/public/riv/esnetspinner_easing.riv b/apps/host-docs/public/riv/pkts-spinner-easing.riv
similarity index 100%
rename from apps/host-docs/public/riv/esnetspinner_easing.riv
rename to apps/host-docs/public/riv/pkts-spinner-easing.riv
diff --git a/apps/host-docs/public/riv/esnetspinner.riv b/apps/host-docs/public/riv/pkts-spinner.riv
similarity index 100%
rename from apps/host-docs/public/riv/esnetspinner.riv
rename to apps/host-docs/public/riv/pkts-spinner.riv
diff --git a/apps/react-docs/public/riv/esnetspinner_easing.riv b/apps/react-docs/public/riv/pkts-spinner-easing.riv
similarity index 100%
rename from apps/react-docs/public/riv/esnetspinner_easing.riv
rename to apps/react-docs/public/riv/pkts-spinner-easing.riv
diff --git a/apps/react-docs/public/riv/esnetspinner.riv b/apps/react-docs/public/riv/pkts-spinner.riv
similarity index 100%
rename from apps/react-docs/public/riv/esnetspinner.riv
rename to apps/react-docs/public/riv/pkts-spinner.riv
diff --git a/apps/react-docs/src/stories/PktsSpinner.stories.tsx b/apps/react-docs/src/stories/PktsSpinner.stories.tsx
index d331c397..cf30d571 100644
--- a/apps/react-docs/src/stories/PktsSpinner.stories.tsx
+++ b/apps/react-docs/src/stories/PktsSpinner.stories.tsx
@@ -31,7 +31,7 @@ export const BrandedESSpinnerRive: Story = {
         height: size,
       }}
     >
-      <Rive src="/riv/esnetspinner.riv" />
+      <Rive src="/riv/pkts-spinner.riv" />
     </div>
   ),
   name: "PktsSpinner Branded RIVE",
@@ -48,7 +48,7 @@ export const BrandedESSpinnerRiveEasing: Story = {
         height: size,
       }}
     >
-      <Rive src="/riv/esnetspinner_easing.riv" />
+      <Rive src="/riv/pkts-spinner-easing.riv" />
     </div>
   ),
   name: "PktsSpinner Branded RIVE with Easing",
diff --git a/apps/web-docs/public/riv/esnetspinner_easing.riv b/apps/web-docs/public/riv/pkts-spinner-easing.riv
similarity index 100%
rename from apps/web-docs/public/riv/esnetspinner_easing.riv
rename to apps/web-docs/public/riv/pkts-spinner-easing.riv
diff --git a/apps/web-docs/public/riv/esnetspinner.riv b/apps/web-docs/public/riv/pkts-spinner.riv
similarity index 100%
rename from apps/web-docs/public/riv/esnetspinner.riv
rename to apps/web-docs/public/riv/pkts-spinner.riv