@reshape-biotech/design-system 2.7.51 → 2.7.53

package/dist/safelist-source.js

@@ -1,5 +1,5 @@
 // Auto-generated safelist — do not edit manually.
-// Token-derived: 313, Manual: 43 → Total: 356
+// Token-derived: 321, Manual: 43 → Total: 364
 //
 // Consumer usage (one line in your main CSS):
 //   @source "../node_modules/@reshape-biotech/design-system/dist";
@@ -7,4 +7,4 @@
 // TW4 scans compiled components for utility classes automatically.
 // This file adds token-derived classes (bg-*, text-*, border-*, etc.)
 // that consumers can use even if no component references them.
-export const safelist = "-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-blue-inverse bg-dark-blue-inverse-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lilac-inverse bg-dark-lilac-inverse-hover bg-dark-lime bg-dark-lime-hover bg-dark-lime-inverse bg-dark-lime-inverse-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-neutral-inverse bg-dark-neutral-inverse-hover bg-dark-orange bg-dark-orange-hover bg-dark-orange-inverse bg-dark-orange-inverse-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pear-inverse bg-dark-pear-inverse-hover bg-dark-pink bg-dark-pink-hover bg-dark-pink-inverse bg-dark-pink-inverse-hover bg-dark-plum bg-dark-plum-hover bg-dark-plum-inverse bg-dark-plum-inverse-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-sky-inverse bg-dark-sky-inverse-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-axis border-dark-blue-inverse border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-interactive-inverse border-dark-lime-inverse border-dark-orange-inverse border-dark-pink-inverse border-dark-static border-dark-static-inverse border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-blue-inverse-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lilac-inverse-hover hover:bg-dark-lime-hover hover:bg-dark-lime-inverse-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-neutral-inverse-hover hover:bg-dark-orange-hover hover:bg-dark-orange-inverse-hover hover:bg-dark-pear-hover hover:bg-dark-pear-inverse-hover hover:bg-dark-pink-hover hover:bg-dark-pink-inverse-hover hover:bg-dark-plum-hover hover:bg-dark-plum-inverse-hover hover:bg-dark-sky-hover hover:bg-dark-sky-inverse-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-axis ring-dark-blue-inverse ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-interactive-inverse ring-dark-lime-inverse ring-dark-orange-inverse ring-dark-pink-inverse ring-dark-static ring-dark-static-inverse ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-icon-accent text-dark-icon-blue text-dark-icon-danger text-dark-icon-lilac text-dark-icon-lime text-dark-icon-orange text-dark-icon-pear text-dark-icon-pink text-dark-icon-plum text-dark-icon-primary text-dark-icon-primary-inverse text-dark-icon-secondary text-dark-icon-secondary-inverse text-dark-icon-sky text-dark-icon-success text-dark-icon-tertiary text-dark-icon-warning text-dark-icon-white text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]";
+export const safelist = "-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-blue-inverse bg-dark-blue-inverse-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lilac-inverse bg-dark-lilac-inverse-hover bg-dark-lime bg-dark-lime-hover bg-dark-lime-inverse bg-dark-lime-inverse-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-neutral-inverse bg-dark-neutral-inverse-hover bg-dark-orange bg-dark-orange-hover bg-dark-orange-inverse bg-dark-orange-inverse-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pear-inverse bg-dark-pear-inverse-hover bg-dark-pink bg-dark-pink-hover bg-dark-pink-inverse bg-dark-pink-inverse-hover bg-dark-plum bg-dark-plum-hover bg-dark-plum-inverse bg-dark-plum-inverse-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-sky-inverse bg-dark-sky-inverse-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-inverse bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-axis border-dark-blue-inverse border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-input-inverse border-dark-interactive border-dark-interactive-inverse border-dark-lime-inverse border-dark-orange-inverse border-dark-pink-inverse border-dark-static border-dark-static-inverse border-focus border-hover border-input border-input-inverse border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-blue-inverse-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lilac-inverse-hover hover:bg-dark-lime-hover hover:bg-dark-lime-inverse-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-neutral-inverse-hover hover:bg-dark-orange-hover hover:bg-dark-orange-inverse-hover hover:bg-dark-pear-hover hover:bg-dark-pear-inverse-hover hover:bg-dark-pink-hover hover:bg-dark-pink-inverse-hover hover:bg-dark-plum-hover hover:bg-dark-plum-inverse-hover hover:bg-dark-sky-hover hover:bg-dark-sky-inverse-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-axis ring-dark-blue-inverse ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-input-inverse ring-dark-interactive ring-dark-interactive-inverse ring-dark-lime-inverse ring-dark-orange-inverse ring-dark-pink-inverse ring-dark-static ring-dark-static-inverse ring-focus ring-hover ring-input ring-input-inverse ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-button shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-icon-accent text-dark-icon-blue text-dark-icon-danger text-dark-icon-lilac text-dark-icon-lime text-dark-icon-orange text-dark-icon-pear text-dark-icon-pink text-dark-icon-plum text-dark-icon-primary text-dark-icon-primary-inverse text-dark-icon-secondary text-dark-icon-secondary-inverse text-dark-icon-sky text-dark-icon-success text-dark-icon-tertiary text-dark-icon-tertiary-inverse text-dark-icon-warning text-dark-icon-white text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-tertiary-inverse text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]";

package/dist/safelist.css

@@ -1,2 +1,2 @@
 /* Auto-generated safelist — do not edit manually */
-@source inline("-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-blue-inverse bg-dark-blue-inverse-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lilac-inverse bg-dark-lilac-inverse-hover bg-dark-lime bg-dark-lime-hover bg-dark-lime-inverse bg-dark-lime-inverse-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-neutral-inverse bg-dark-neutral-inverse-hover bg-dark-orange bg-dark-orange-hover bg-dark-orange-inverse bg-dark-orange-inverse-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pear-inverse bg-dark-pear-inverse-hover bg-dark-pink bg-dark-pink-hover bg-dark-pink-inverse bg-dark-pink-inverse-hover bg-dark-plum bg-dark-plum-hover bg-dark-plum-inverse bg-dark-plum-inverse-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-sky-inverse bg-dark-sky-inverse-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-axis border-dark-blue-inverse border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-interactive-inverse border-dark-lime-inverse border-dark-orange-inverse border-dark-pink-inverse border-dark-static border-dark-static-inverse border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-blue-inverse-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lilac-inverse-hover hover:bg-dark-lime-hover hover:bg-dark-lime-inverse-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-neutral-inverse-hover hover:bg-dark-orange-hover hover:bg-dark-orange-inverse-hover hover:bg-dark-pear-hover hover:bg-dark-pear-inverse-hover hover:bg-dark-pink-hover hover:bg-dark-pink-inverse-hover hover:bg-dark-plum-hover hover:bg-dark-plum-inverse-hover hover:bg-dark-sky-hover hover:bg-dark-sky-inverse-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-axis ring-dark-blue-inverse ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-interactive-inverse ring-dark-lime-inverse ring-dark-orange-inverse ring-dark-pink-inverse ring-dark-static ring-dark-static-inverse ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-icon-accent text-dark-icon-blue text-dark-icon-danger text-dark-icon-lilac text-dark-icon-lime text-dark-icon-orange text-dark-icon-pear text-dark-icon-pink text-dark-icon-plum text-dark-icon-primary text-dark-icon-primary-inverse text-dark-icon-secondary text-dark-icon-secondary-inverse text-dark-icon-sky text-dark-icon-success text-dark-icon-tertiary text-dark-icon-warning text-dark-icon-white text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]");
+@source inline("-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-blue-inverse bg-dark-blue-inverse-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lilac-inverse bg-dark-lilac-inverse-hover bg-dark-lime bg-dark-lime-hover bg-dark-lime-inverse bg-dark-lime-inverse-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-neutral-inverse bg-dark-neutral-inverse-hover bg-dark-orange bg-dark-orange-hover bg-dark-orange-inverse bg-dark-orange-inverse-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pear-inverse bg-dark-pear-inverse-hover bg-dark-pink bg-dark-pink-hover bg-dark-pink-inverse bg-dark-pink-inverse-hover bg-dark-plum bg-dark-plum-hover bg-dark-plum-inverse bg-dark-plum-inverse-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-sky-inverse bg-dark-sky-inverse-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-inverse bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-axis border-dark-blue-inverse border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-input-inverse border-dark-interactive border-dark-interactive-inverse border-dark-lime-inverse border-dark-orange-inverse border-dark-pink-inverse border-dark-static border-dark-static-inverse border-focus border-hover border-input border-input-inverse border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-blue-inverse-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lilac-inverse-hover hover:bg-dark-lime-hover hover:bg-dark-lime-inverse-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-neutral-inverse-hover hover:bg-dark-orange-hover hover:bg-dark-orange-inverse-hover hover:bg-dark-pear-hover hover:bg-dark-pear-inverse-hover hover:bg-dark-pink-hover hover:bg-dark-pink-inverse-hover hover:bg-dark-plum-hover hover:bg-dark-plum-inverse-hover hover:bg-dark-sky-hover hover:bg-dark-sky-inverse-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-axis ring-dark-blue-inverse ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-input-inverse ring-dark-interactive ring-dark-interactive-inverse ring-dark-lime-inverse ring-dark-orange-inverse ring-dark-pink-inverse ring-dark-static ring-dark-static-inverse ring-focus ring-hover ring-input ring-input-inverse ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-button shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-icon-accent text-dark-icon-blue text-dark-icon-danger text-dark-icon-lilac text-dark-icon-lime text-dark-icon-orange text-dark-icon-pear text-dark-icon-pink text-dark-icon-plum text-dark-icon-primary text-dark-icon-primary-inverse text-dark-icon-secondary text-dark-icon-secondary-inverse text-dark-icon-sky text-dark-icon-success text-dark-icon-tertiary text-dark-icon-tertiary-inverse text-dark-icon-warning text-dark-icon-white text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-tertiary-inverse text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]");

package/dist/tailwind.preset.d.ts

@@ -16,6 +16,7 @@ declare namespace config {
                 'dark-focus': string;
                 'dark-danger': string;
                 'dark-static-inverse': string;
+                'dark-input-inverse': string;
                 'dark-interactive-inverse': string;
                 'dark-blue-inverse': string;
                 'dark-orange-inverse': string;
@@ -29,6 +30,7 @@ declare namespace config {
                 focus: string;
                 danger: string;
                 'static-inverse': string;
+                'input-inverse': string;
                 'interactive-inverse': string;
                 'blue-inverse': string;
                 'orange-inverse': string;

package/dist/tokens/colors.d.ts

@@ -9,6 +9,7 @@ export declare const colors: {
         white: {
             default: string;
             5: string;
+            8: string;
             10: string;
             15: string;
             25: string;

package/dist/tokens/colors.js

@@ -9,6 +9,7 @@ export const colors = {
         white: {
             default: '#FFFFFF',
             5: '#FFFFFF0D',
+            8: '#FFFFFF14',
             10: '#FFFFFF1A',
             15: '#FFFFFF26',
             25: '#FFFFFF40',
@@ -50,15 +51,15 @@ export const colors = {
         3: '#ffa654',
         4: { default: '#ff9533', 10: '#ff95331A', 25: '#ff953340' },
         5: { default: '#ff7a00', 10: '#ff7a001A', 25: '#ff7a0040', 50: '#ff7a0080', 75: '#ff7a00BF' },
-        6: '#cf6300',
+        6: '#B15500',
     },
     sky: {
-        1: '#f3fafc',
-        2: '#D2F0F6',
-        3: '#89D8E6',
-        4: { default: '#65CCDF', 10: '#65CCDF1A', 25: '#65CCDF40' },
-        5: { default: '#43C1D8', 10: '#43C1D81A', 25: '#43C1D840' },
-        6: '#3597a9',
+        1: '#EFF9FA',
+        2: '#BFE8EF',
+        3: '#76CEDC',
+        4: { default: '#5BC5D5', 10: '#5BC5D51A', 25: '#5BC5D540' },
+        5: { default: '#32B6CB', 10: '#32B6CB1A', 25: '#32B6CB40' },
+        6: '#227B8A',
     },
     blue: {
         1: '#e8f4fe',

package/dist/tokens.d.ts

@@ -14,6 +14,7 @@ declare const borderColor: {
     'dark-focus': string;
     'dark-danger': string;
     'dark-static-inverse': string;
+    'dark-input-inverse': string;
     'dark-interactive-inverse': string;
     'dark-blue-inverse': string;
     'dark-orange-inverse': string;
@@ -27,6 +28,7 @@ declare const borderColor: {
     focus: string;
     danger: string;
     'static-inverse': string;
+    'input-inverse': string;
     'interactive-inverse': string;
     'blue-inverse': string;
     'orange-inverse': string;
@@ -41,6 +43,7 @@ declare const textColor: {
     'dark-icon-tertiary': string;
     'dark-icon-primary-inverse': string;
     'dark-icon-secondary-inverse': string;
+    'dark-icon-tertiary-inverse': string;
     'dark-icon-accent': string;
     'dark-icon-success': string;
     'dark-icon-warning': string;
@@ -59,6 +62,7 @@ declare const textColor: {
     'icon-tertiary': string;
     'icon-primary-inverse': string;
     'icon-secondary-inverse': string;
+    'icon-tertiary-inverse': string;
     'icon-accent': string;
     'icon-success': string;
     'icon-warning': string;
@@ -171,6 +175,7 @@ declare const backgroundColor: {
     'dark-overlay': string;
     surface: string;
     'surface-secondary': string;
+    'surface-inverse': string;
     base: string;
     'base-inverse': string;
     overlay: string;
@@ -260,6 +265,7 @@ declare const outlineColor: {
 };
 declare const boxShadow: {
     input: string;
+    button: string;
     container: string;
     menu: string;
     hover: string;
@@ -278,6 +284,7 @@ export declare const tokens: {
             white: {
                 default: string;
                 5: string;
+                8: string;
                 10: string;
                 15: string;
                 25: string;
@@ -571,6 +578,7 @@ export declare const tokens: {
         'dark-focus': string;
         'dark-danger': string;
         'dark-static-inverse': string;
+        'dark-input-inverse': string;
         'dark-interactive-inverse': string;
         'dark-blue-inverse': string;
         'dark-orange-inverse': string;
@@ -584,6 +592,7 @@ export declare const tokens: {
         focus: string;
         danger: string;
         'static-inverse': string;
+        'input-inverse': string;
         'interactive-inverse': string;
         'blue-inverse': string;
         'orange-inverse': string;
@@ -598,6 +607,7 @@ export declare const tokens: {
         'dark-icon-tertiary': string;
         'dark-icon-primary-inverse': string;
         'dark-icon-secondary-inverse': string;
+        'dark-icon-tertiary-inverse': string;
         'dark-icon-accent': string;
         'dark-icon-success': string;
         'dark-icon-warning': string;
@@ -616,6 +626,7 @@ export declare const tokens: {
         'icon-tertiary': string;
         'icon-primary-inverse': string;
         'icon-secondary-inverse': string;
+        'icon-tertiary-inverse': string;
         'icon-accent': string;
         'icon-success': string;
         'icon-warning': string;
@@ -728,6 +739,7 @@ export declare const tokens: {
         'dark-overlay': string;
         surface: string;
         'surface-secondary': string;
+        'surface-inverse': string;
         base: string;
         'base-inverse': string;
         overlay: string;
@@ -788,6 +800,7 @@ export declare const tokens: {
     };
     boxShadow: {
         input: string;
+        button: string;
         container: string;
         menu: string;
         hover: string;

package/dist/tokens.js

@@ -25,6 +25,7 @@ const lightIconColor = {
     'icon-tertiary': colors.gray[4].default,
     'icon-primary-inverse': colors.base.white.default,
     'icon-secondary-inverse': colors.base.white[70],
+    'icon-tertiary-inverse': colors.base.white[50],
     'icon-accent': colors.periwinkle[5].default,
     'icon-success': colors.green[5].default,
     'icon-warning': colors.yellow[5].default,
@@ -46,7 +47,8 @@ const lightBorderColor = {
     hover: colors.periwinkle[5][50],
     focus: colors.periwinkle[5].default,
     danger: colors.red[5].default,
-    'static-inverse': colors.base.white[10],
+    'static-inverse': colors.base.white[8],
+    'input-inverse': colors.base.white[10],
     'interactive-inverse': colors.base.white[15],
     'blue-inverse': colors.blue[5].default,
     'orange-inverse': colors.orange[5].default,
@@ -65,6 +67,7 @@ const lightOutlineColor = {
 const lightBackgroundColor = {
     surface: colors.base.white.default,
     'surface-secondary': colors.base.snow,
+    'surface-inverse': colors.base.midnight.default,
     base: colors.base.mist,
     'base-inverse': colors.gray[6],
     overlay: colors.base.obsidian[50],
@@ -271,6 +274,7 @@ const darkIconColor = {
     'dark-icon-tertiary': colors.gray[4].default,
     'dark-icon-primary-inverse': colors.base.midnight.default,
     'dark-icon-secondary-inverse': colors.base.midnight[70],
+    'dark-icon-tertiary-inverse': colors.base.midnight[50],
     'dark-icon-accent': colors.periwinkle[4].default,
     'dark-icon-success': colors.green[4].default,
     'dark-icon-warning': colors.yellow[4].default,
@@ -286,13 +290,14 @@ const darkIconColor = {
     'dark-icon-white': colors.base.white.default,
 };
 const darkBorderColor = {
-    'dark-static': colors.base.white[10],
+    'dark-static': colors.base.white[8],
     'dark-input': colors.base.white[10],
     'dark-interactive': colors.base.white[15],
     'dark-hover': colors.periwinkle[3][25],
     'dark-focus': colors.periwinkle[4].default,
     'dark-danger': colors.red[4].default,
     'dark-static-inverse': colors.base.midnight[8],
+    'dark-input-inverse': colors.base.midnight[10],
     'dark-interactive-inverse': colors.base.midnight[15],
     'dark-blue-inverse': colors.blue[4].default,
     'dark-orange-inverse': colors.orange[4].default,
@@ -394,6 +399,7 @@ const outlineColor = {
 };
 const boxShadow = {
     input: `0 1px 4px 0 ${colors.shadow[2]}`,
+    button: `0 2px 4px -2px ${colors.shadow[2]}, 0 1px 1px ${colors.shadow[4]}`,
     container: `0 2px 16px 0 ${colors.shadow[2]}`,
     menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 1px ${colors.shadow[8]}`,
     hover: `0 0 0 1px ${colors.periwinkle[5][25]}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.51",
+  "version": "2.7.53",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -390,9 +390,11 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
     "@eslint/compat": "^1.2.3",
+    "@figma/code-connect": "^1.4.3",
     "@storybook/addon-a11y": "^10.2.14",
     "@storybook/addon-docs": "^10.2.0",
     "@storybook/addon-links": "^10.2.0",
+    "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-svelte-csf": "^5.0.11",
     "@storybook/addon-vitest": "^10.2.13",
     "@storybook/svelte": "^10.2.0",