@agrada_digital/pbm 0.0.112 → 0.0.114

package/dist/index.css

@@ -22,24 +22,40 @@
         "Liberation Mono",
         "Courier New",
         monospace;
+      --color-red-50: oklch(97.1% 0.013 17.38);
+      --color-red-300: oklch(80.8% 0.114 19.571);
       --color-red-400: oklch(70.4% 0.191 22.216);
       --color-red-500: oklch(63.7% 0.237 25.331);
       --color-red-600: oklch(57.7% 0.245 27.325);
       --color-yellow-500: oklch(79.5% 0.184 86.047);
+      --color-green-100: oklch(96.2% 0.044 156.743);
       --color-green-400: oklch(79.2% 0.209 151.711);
       --color-green-500: oklch(72.3% 0.219 149.579);
+      --color-emerald-50: oklch(97.9% 0.021 166.113);
+      --color-emerald-200: oklch(90.5% 0.093 164.15);
       --color-emerald-500: oklch(69.6% 0.17 162.48);
+      --color-emerald-600: oklch(59.6% 0.145 163.225);
       --color-emerald-700: oklch(50.8% 0.118 165.612);
+      --color-blue-300: oklch(80.9% 0.105 251.813);
       --color-blue-400: oklch(70.7% 0.165 254.624);
       --color-blue-500: oklch(62.3% 0.214 259.815);
       --color-blue-600: oklch(54.6% 0.245 262.881);
+      --color-gray-50: oklch(98.5% 0.002 247.839);
       --color-gray-100: oklch(96.7% 0.003 264.542);
+      --color-gray-200: oklch(92.8% 0.006 264.531);
       --color-gray-300: oklch(87.2% 0.01 258.338);
+      --color-gray-400: oklch(70.7% 0.022 261.325);
       --color-gray-500: oklch(55.1% 0.027 264.364);
       --color-gray-600: oklch(44.6% 0.03 256.802);
+      --color-gray-800: oklch(27.8% 0.033 256.848);
+      --color-zinc-50: oklch(98.5% 0 0);
+      --color-zinc-100: oklch(96.7% 0.001 286.375);
+      --color-zinc-200: oklch(92% 0.004 286.32);
       --color-zinc-300: oklch(87.1% 0.006 286.286);
       --color-zinc-400: oklch(70.5% 0.015 286.067);
+      --color-zinc-500: oklch(55.2% 0.016 285.938);
       --color-zinc-600: oklch(44.2% 0.017 285.786);
+      --color-zinc-700: oklch(37% 0.013 285.805);
       --color-zinc-800: oklch(27.4% 0.006 286.033);
       --color-zinc-900: oklch(21% 0.006 285.885);
       --color-black: #000;
@@ -62,6 +78,8 @@
       --font-weight-medium: 500;
       --font-weight-semibold: 600;
       --font-weight-bold: 700;
+      --tracking-wide: 0.025em;
+      --leading-snug: 1.375;
       --radius-lg: 0.5rem;
       --radius-xl: 0.75rem;
       --radius-2xl: 1rem;
@@ -273,6 +291,17 @@
     .visible {
       visibility: visible;
     }
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+    }
     .absolute {
       position: absolute;
     }
@@ -300,18 +329,27 @@
     .-top-4 {
       top: calc(var(--spacing) * -4);
     }
-    .-top-6 {
-      top: calc(var(--spacing) * -6);
+    .top-1\/2 {
+      top: calc(1 / 2 * 100%);
+    }
+    .top-3\.5 {
+      top: calc(var(--spacing) * 3.5);
     }
     .-right-3 {
       right: calc(var(--spacing) * -3);
     }
+    .right-3 {
+      right: calc(var(--spacing) * 3);
+    }
     .-bottom-3 {
       bottom: calc(var(--spacing) * -3);
     }
     .left-2 {
       left: calc(var(--spacing) * 2);
     }
+    .left-17 {
+      left: calc(var(--spacing) * 17);
+    }
     .z-10 {
       z-index: 10;
     }
@@ -336,14 +374,26 @@
         max-width: 96rem;
       }
     }
+    .mx-4 {
+      margin-inline: calc(var(--spacing) * 4);
+    }
+    .mt-0\.5 {
+      margin-top: calc(var(--spacing) * 0.5);
+    }
+    .mt-1 {
+      margin-top: calc(var(--spacing) * 1);
+    }
+    .mt-2 {
+      margin-top: calc(var(--spacing) * 2);
+    }
     .mt-5 {
       margin-top: calc(var(--spacing) * 5);
     }
     .mr-1 {
       margin-right: calc(var(--spacing) * 1);
     }
-    .mb-0 {
-      margin-bottom: calc(var(--spacing) * 0);
+    .mb-1 {
+      margin-bottom: calc(var(--spacing) * 1);
     }
     .mb-2 {
       margin-bottom: calc(var(--spacing) * 2);
@@ -351,9 +401,15 @@
     .mb-4 {
       margin-bottom: calc(var(--spacing) * 4);
     }
+    .mb-6 {
+      margin-bottom: calc(var(--spacing) * 6);
+    }
     .mb-8 {
       margin-bottom: calc(var(--spacing) * 8);
     }
+    .ml-1 {
+      margin-left: calc(var(--spacing) * 1);
+    }
     .ml-auto {
       margin-left: auto;
     }
@@ -363,6 +419,9 @@
     .flex {
       display: flex;
     }
+    .grid {
+      display: grid;
+    }
     .hidden {
       display: none;
     }
@@ -375,6 +434,27 @@
     .aspect-auto {
       aspect-ratio: auto;
     }
+    .h-0 {
+      height: calc(var(--spacing) * 0);
+    }
+    .h-0\.5 {
+      height: calc(var(--spacing) * 0.5);
+    }
+    .h-2\.5 {
+      height: calc(var(--spacing) * 2.5);
+    }
+    .h-3\.5 {
+      height: calc(var(--spacing) * 3.5);
+    }
+    .h-4 {
+      height: calc(var(--spacing) * 4);
+    }
+    .h-5 {
+      height: calc(var(--spacing) * 5);
+    }
+    .h-7 {
+      height: calc(var(--spacing) * 7);
+    }
     .h-8 {
       height: calc(var(--spacing) * 8);
     }
@@ -387,6 +467,9 @@
     .h-12 {
       height: calc(var(--spacing) * 12);
     }
+    .h-16 {
+      height: calc(var(--spacing) * 16);
+    }
     .h-\[60vh\] {
       height: 60vh;
     }
@@ -396,20 +479,41 @@
     .h-full {
       height: 100%;
     }
+    .max-h-\[90vh\] {
+      max-height: 90vh;
+    }
     .w-1\/5 {
       width: calc(1 / 5 * 100%);
     }
+    .w-2\.5 {
+      width: calc(var(--spacing) * 2.5);
+    }
+    .w-3\.5 {
+      width: calc(var(--spacing) * 3.5);
+    }
     .w-3xs {
       width: var(--container-3xs);
     }
+    .w-4 {
+      width: calc(var(--spacing) * 4);
+    }
     .w-4\/5 {
       width: calc(4 / 5 * 100%);
     }
+    .w-5 {
+      width: calc(var(--spacing) * 5);
+    }
+    .w-7 {
+      width: calc(var(--spacing) * 7);
+    }
     .w-8 {
       width: calc(var(--spacing) * 8);
     }
-    .w-11\/12 {
-      width: calc(11 / 12 * 100%);
+    .w-10 {
+      width: calc(var(--spacing) * 10);
+    }
+    .w-16 {
+      width: calc(var(--spacing) * 16);
     }
     .w-\[90\%\] {
       width: 90%;
@@ -426,21 +530,37 @@
     .max-w-\[var\(--max-container\)\] {
       max-width: var(--max-container);
     }
+    .max-w-max {
+      max-width: max-content;
+    }
     .max-w-md {
       max-width: var(--container-md);
     }
     .min-w-\(--min-container\) {
       min-width: var(--min-container);
     }
+    .min-w-0 {
+      min-width: calc(var(--spacing) * 0);
+    }
     .min-w-20 {
       min-width: calc(var(--spacing) * 20);
     }
     .min-w-\[var\(--min-container\)\] {
       min-width: var(--min-container);
     }
+    .flex-1 {
+      flex: 1;
+    }
+    .flex-2 {
+      flex: 2;
+    }
     .shrink-0 {
       flex-shrink: 0;
     }
+    .-translate-y-1\/2 {
+      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
     .rotate-0 {
       rotate: 0deg;
     }
@@ -462,6 +582,12 @@
     .cursor-pointer {
       cursor: pointer;
     }
+    .grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
     .flex-col {
       flex-direction: column;
     }
@@ -510,9 +636,18 @@
     .gap-4\.5 {
       gap: calc(var(--spacing) * 4.5);
     }
+    .gap-5 {
+      gap: calc(var(--spacing) * 5);
+    }
     .overflow-hidden {
       overflow: hidden;
     }
+    .overflow-y-auto {
+      overflow-y: auto;
+    }
+    .rounded {
+      border-radius: 0.25rem;
+    }
     .rounded-2xl {
       border-radius: var(--radius-2xl);
     }
@@ -529,10 +664,6 @@
       border-start-start-radius: var(--radius-lg);
       border-end-start-radius: var(--radius-lg);
     }
-    .rounded-e-lg {
-      border-start-end-radius: var(--radius-lg);
-      border-end-end-radius: var(--radius-lg);
-    }
     .rounded-t-2xl {
       border-top-left-radius: var(--radius-2xl);
       border-top-right-radius: var(--radius-2xl);
@@ -572,12 +703,33 @@
     .border-\(--pbm-border\) {
       border-color: var(--pbm-border);
     }
+    .border-\(--pbm-primary\) {
+      border-color: var(--pbm-primary);
+    }
+    .border-blue-500 {
+      border-color: var(--color-blue-500);
+    }
+    .border-emerald-200 {
+      border-color: var(--color-emerald-200);
+    }
     .border-emerald-700 {
       border-color: var(--color-emerald-700);
     }
+    .border-gray-100 {
+      border-color: var(--color-gray-100);
+    }
+    .border-gray-200 {
+      border-color: var(--color-gray-200);
+    }
     .border-gray-300 {
       border-color: var(--color-gray-300);
     }
+    .border-red-300 {
+      border-color: var(--color-red-300);
+    }
+    .border-red-400 {
+      border-color: var(--color-red-400);
+    }
     .border-white\/5 {
       border-color: color-mix(in srgb, #fff 5%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
@@ -590,12 +742,27 @@
         border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
       }
     }
+    .border-zinc-100 {
+      border-color: var(--color-zinc-100);
+    }
+    .border-zinc-300 {
+      border-color: var(--color-zinc-300);
+    }
     .border-zinc-400\/50 {
       border-color: color-mix(in srgb, oklch(70.5% 0.015 286.067) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-zinc-400) 50%, transparent);
       }
     }
+    .bg-\(--pbm-input-background\) {
+      background-color: var(--pbm-input-background);
+    }
+    .bg-\(--pbm-primary\) {
+      background-color: var(--pbm-primary);
+    }
+    .bg-\(--primary-color\) {
+      background-color: var(--primary-color);
+    }
     .bg-black\/40 {
       background-color: color-mix(in srgb, #000 40%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
@@ -608,8 +775,17 @@
     .bg-blue-600 {
       background-color: var(--color-blue-600);
     }
-    .bg-emerald-500 {
-      background-color: var(--color-emerald-500);
+    .bg-emerald-50\/60 {
+      background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-emerald-50) 60%, transparent);
+      }
+    }
+    .bg-emerald-600 {
+      background-color: var(--color-emerald-600);
+    }
+    .bg-gray-50 {
+      background-color: var(--color-gray-50);
     }
     .bg-gray-100 {
       background-color: var(--color-gray-100);
@@ -617,9 +793,21 @@
     .bg-gray-600 {
       background-color: var(--color-gray-600);
     }
+    .bg-green-100 {
+      background-color: var(--color-green-100);
+    }
     .bg-green-500 {
       background-color: var(--color-green-500);
     }
+    .bg-red-50 {
+      background-color: var(--color-red-50);
+    }
+    .bg-red-50\/40 {
+      background-color: color-mix(in srgb, oklch(97.1% 0.013 17.38) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-red-50) 40%, transparent);
+      }
+    }
     .bg-red-500 {
       background-color: var(--color-red-500);
     }
@@ -635,6 +823,18 @@
         background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
       }
     }
+    .bg-zinc-50\/40 {
+      background-color: color-mix(in srgb, oklch(98.5% 0 0) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-zinc-50) 40%, transparent);
+      }
+    }
+    .bg-zinc-100 {
+      background-color: var(--color-zinc-100);
+    }
+    .bg-zinc-200 {
+      background-color: var(--color-zinc-200);
+    }
     .bg-zinc-300\/60 {
       background-color: color-mix(in srgb, oklch(87.1% 0.006 286.286) 60%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
@@ -650,15 +850,24 @@
     .p-0\.5 {
       padding: calc(var(--spacing) * 0.5);
     }
+    .p-3 {
+      padding: calc(var(--spacing) * 3);
+    }
     .p-4 {
       padding: calc(var(--spacing) * 4);
     }
+    .p-6 {
+      padding: calc(var(--spacing) * 6);
+    }
     .p-8 {
       padding: calc(var(--spacing) * 8);
     }
     .px-2 {
       padding-inline: calc(var(--spacing) * 2);
     }
+    .px-3 {
+      padding-inline: calc(var(--spacing) * 3);
+    }
     .px-4 {
       padding-inline: calc(var(--spacing) * 4);
     }
@@ -677,6 +886,9 @@
     .py-2 {
       padding-block: calc(var(--spacing) * 2);
     }
+    .py-2\.5 {
+      padding-block: calc(var(--spacing) * 2.5);
+    }
     .py-3 {
       padding-block: calc(var(--spacing) * 3);
     }
@@ -686,9 +898,15 @@
     .py-6 {
       padding-block: calc(var(--spacing) * 6);
     }
+    .pt-4 {
+      padding-top: calc(var(--spacing) * 4);
+    }
     .pt-\[10\%\] {
       padding-top: 10%;
     }
+    .pl-1 {
+      padding-left: calc(var(--spacing) * 1);
+    }
     .pl-2 {
       padding-left: calc(var(--spacing) * 2);
     }
@@ -724,6 +942,10 @@
     .text-\[11px\] {
       font-size: 11px;
     }
+    .leading-snug {
+      --tw-leading: var(--leading-snug);
+      line-height: var(--leading-snug);
+    }
     .font-bold {
       --tw-font-weight: var(--font-weight-bold);
       font-weight: var(--font-weight-bold);
@@ -744,12 +966,46 @@
       --tw-font-weight: var(--font-weight-semibold);
       font-weight: var(--font-weight-semibold);
     }
+    .tracking-wide {
+      --tw-tracking: var(--tracking-wide);
+      letter-spacing: var(--tracking-wide);
+    }
     .text-nowrap {
       text-wrap: nowrap;
     }
+    .whitespace-nowrap {
+      white-space: nowrap;
+    }
+    .text-\(--pbm-primary\) {
+      color: var(--pbm-primary);
+    }
+    .text-blue-500 {
+      color: var(--color-blue-500);
+    }
+    .text-emerald-600 {
+      color: var(--color-emerald-600);
+    }
+    .text-gray-400 {
+      color: var(--color-gray-400);
+    }
+    .text-gray-500 {
+      color: var(--color-gray-500);
+    }
+    .text-gray-600 {
+      color: var(--color-gray-600);
+    }
+    .text-gray-800 {
+      color: var(--color-gray-800);
+    }
+    .text-green-500 {
+      color: var(--color-green-500);
+    }
     .text-red-400 {
       color: var(--color-red-400);
     }
+    .text-red-500 {
+      color: var(--color-red-500);
+    }
     .text-white {
       color: var(--color-white);
     }
@@ -762,24 +1018,48 @@
     .text-yellow-500 {
       color: var(--color-yellow-500);
     }
+    .text-zinc-400 {
+      color: var(--color-zinc-400);
+    }
+    .text-zinc-500 {
+      color: var(--color-zinc-500);
+    }
     .text-zinc-600 {
       color: var(--color-zinc-600);
     }
+    .text-zinc-700 {
+      color: var(--color-zinc-700);
+    }
     .text-zinc-800 {
       color: var(--color-zinc-800);
     }
     .text-zinc-900 {
       color: var(--color-zinc-900);
     }
+    .uppercase {
+      text-transform: uppercase;
+    }
     .line-through {
       text-decoration-line: line-through;
     }
     .underline {
       text-decoration-line: underline;
     }
+    .underline-offset-2 {
+      text-underline-offset: 2px;
+    }
     .opacity-0 {
       opacity: 0%;
     }
+    .opacity-25 {
+      opacity: 25%;
+    }
+    .opacity-60 {
+      opacity: 60%;
+    }
+    .opacity-75 {
+      opacity: 75%;
+    }
     .opacity-80 {
       opacity: 80%;
     }
@@ -822,16 +1102,34 @@
         var(--tw-ring-shadow),
         var(--tw-shadow);
     }
+    .ring-4 {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow:
+        var(--tw-inset-shadow),
+        var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow),
+        var(--tw-shadow);
+    }
     .shadow-emerald-500\/20 {
       --tw-shadow-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
       }
     }
+    .ring-\(--pbm-primary\)\/15 {
+      --tw-ring-color: var(--pbm-primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--pbm-primary) 15%, transparent);
+      }
+    }
     .outline {
       outline-style: var(--tw-outline-style);
       outline-width: 1px;
     }
+    .outline-\(--pbm-outline-color\) {
+      outline-color: var(--pbm-outline-color);
+    }
     .outline-red-600 {
       outline-color: var(--color-red-600);
     }
@@ -863,6 +1161,10 @@
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
+    .duration-100 {
+      --tw-duration: 100ms;
+      transition-duration: 100ms;
+    }
     .duration-150 {
       --tw-duration: 150ms;
       transition-duration: 150ms;
@@ -871,6 +1173,14 @@
       --tw-duration: 300ms;
       transition-duration: 300ms;
     }
+    .outline-none {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    .select-none {
+      -webkit-user-select: none;
+      user-select: none;
+    }
     .placeholder\:text-sm {
       &::placeholder {
         font-size: var(--text-sm);
@@ -888,6 +1198,116 @@
         color: var(--color-zinc-600);
       }
     }
+    .after\:h-2 {
+      &::after {
+        content: var(--tw-content);
+        height: calc(var(--spacing) * 2);
+      }
+    }
+    .after\:w-2 {
+      &::after {
+        content: var(--tw-content);
+        width: calc(var(--spacing) * 2);
+      }
+    }
+    .after\:scale-0 {
+      &::after {
+        content: var(--tw-content);
+        --tw-scale-x: 0%;
+        --tw-scale-y: 0%;
+        --tw-scale-z: 0%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+    .after\:rounded-full {
+      &::after {
+        content: var(--tw-content);
+        border-radius: calc(infinity * 1px);
+      }
+    }
+    .after\:bg-\(--pbm-primary\) {
+      &::after {
+        content: var(--tw-content);
+        background-color: var(--pbm-primary);
+      }
+    }
+    .after\:transition-transform {
+      &::after {
+        content: var(--tw-content);
+        transition-property:
+          transform,
+          translate,
+          scale,
+          rotate;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+    }
+    .after\:duration-200 {
+      &::after {
+        content: var(--tw-content);
+        --tw-duration: 200ms;
+        transition-duration: 200ms;
+      }
+    }
+    .after\:content-\[\'\'\] {
+      &::after {
+        --tw-content: "";
+        content: var(--tw-content);
+      }
+    }
+    .peer-checked\:after\:scale-100 {
+      &:is(:where(.peer):checked ~ *) {
+        &::after {
+          content: var(--tw-content);
+          --tw-scale-x: 100%;
+          --tw-scale-y: 100%;
+          --tw-scale-z: 100%;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+      }
+    }
+    .hover\:border-blue-300 {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-blue-300);
+        }
+      }
+    }
+    .hover\:border-gray-300 {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-gray-300);
+        }
+      }
+    }
+    .hover\:border-zinc-200 {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-zinc-200);
+        }
+      }
+    }
+    .hover\:bg-\(--pbm-primary\)\/60 {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--pbm-primary);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--pbm-primary) 60%, transparent);
+          }
+        }
+      }
+    }
+    .hover\:bg-\(--primary-color\)\/80 {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--primary-color);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--primary-color) 80%, transparent);
+          }
+        }
+      }
+    }
     .hover\:bg-blue-400 {
       &:hover {
         @media (hover: hover) {
@@ -902,6 +1322,20 @@
         }
       }
     }
+    .hover\:bg-emerald-500 {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-emerald-500);
+        }
+      }
+    }
+    .hover\:bg-gray-100 {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-100);
+        }
+      }
+    }
     .hover\:bg-gray-500 {
       &:hover {
         @media (hover: hover) {
@@ -930,6 +1364,33 @@
         }
       }
     }
+    .hover\:bg-zinc-600\/10 {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(44.2% 0.017 285.786) 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-zinc-600) 10%, transparent);
+          }
+        }
+      }
+    }
+    .hover\:text-\(--pbm-primary\)\/60 {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--pbm-primary);
+          @supports (color: color-mix(in lab, red, red)) {
+            color: color-mix(in oklab, var(--pbm-primary) 60%, transparent);
+          }
+        }
+      }
+    }
+    .hover\:text-gray-600 {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-gray-600);
+        }
+      }
+    }
     .hover\:text-white {
       &:hover {
         @media (hover: hover) {
@@ -951,17 +1412,51 @@
         }
       }
     }
+    .focus\:border-blue-500 {
+      &:focus {
+        border-color: var(--color-blue-500);
+      }
+    }
+    .focus\:bg-\(--pbm-input-focus\) {
+      &:focus {
+        background-color: var(--pbm-input-focus);
+      }
+    }
     .focus\:bg-white {
       &:focus {
         background-color: var(--color-white);
       }
     }
+    .focus\:ring-2 {
+      &:focus {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow:
+          var(--tw-inset-shadow),
+          var(--tw-inset-ring-shadow),
+          var(--tw-ring-offset-shadow),
+          var(--tw-ring-shadow),
+          var(--tw-shadow);
+      }
+    }
+    .focus\:ring-blue-500\/30 {
+      &:focus {
+        --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
+        }
+      }
+    }
     .focus\:outline {
       &:focus {
         outline-style: var(--tw-outline-style);
         outline-width: 1px;
       }
     }
+    .focus\:outline-\(--pbm-outline-focus-color\) {
+      &:focus {
+        outline-color: var(--pbm-outline-focus-color);
+      }
+    }
     .active\:scale-95 {
       &:active {
         --tw-scale-x: 95%;
@@ -970,6 +1465,11 @@
         scale: var(--tw-scale-x) var(--tw-scale-y);
       }
     }
+    .sm\:block {
+      @media (width >= 40rem) {
+        display: block;
+      }
+    }
     .md\:w-4\/5 {
       @media (width >= 48rem) {
         width: calc(4 / 5 * 100%);
@@ -1004,13 +1504,18 @@
 #pbm-library-root *::after {
   box-sizing: border-box;
 }
+@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-rotate-x { syntax: "*"; inherits: false; }
 @property --tw-rotate-y { syntax: "*"; inherits: false; }
 @property --tw-rotate-z { syntax: "*"; inherits: false; }
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-leading { syntax: "*"; inherits: false; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
+@property --tw-tracking { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-shadow-color { syntax: "*"; inherits: false; }
 @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@@ -1049,6 +1554,7 @@
 @property --tw-backdrop-saturate { syntax: "*"; inherits: false; }
 @property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
 @property --tw-duration { syntax: "*"; inherits: false; }
+@property --tw-content { syntax: "*"; initial-value: ""; inherits: false; }
 @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
 @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
 @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
@@ -1068,13 +1574,18 @@
     ::before,
     ::after,
     ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-border-style: solid;
+      --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -1113,6 +1624,7 @@
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
+      --tw-content: "";
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;