@eightshift/ui-components 1.9.1 → 2.0.1

package/dist/assets/wp-font-enhancements.css

@@ -1 +1,8 @@
-.edit-post-header,.components-popover,.edit-post-sidebar,.wp-block-post-title,.components-select-control__input,.components-base-control__field,.components-base-control__label,.components-combobox-control__suggestions-container,.components-input-control__label,.components-input-control__input,.components-checkbox-control__label,.components-menu-group__label,.components-menu-item__button,.components-notice .components-notice__content,.components-tooltip,.components-modal__header,.preferences-modal__section-title,.preferences-modal__section-description,.block-editor-inserter__tabs,.editor-list-view-sidebar,.edit-post-layout__footer,.components-snackbar,.components-text-control__input{font-family:Geist,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body.wp-admin{font-family:Geist,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji!important}
+/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
+.edit-post-header, .components-popover, .edit-post-sidebar, .wp-block-post-title, .components-select-control__input, .components-base-control__field, .components-base-control__label, .components-combobox-control__suggestions-container, .components-input-control__label, .components-input-control__input, .components-checkbox-control__label, .components-menu-group__label, .components-menu-item__button, .components-notice .components-notice__content, .components-tooltip, .components-modal__header, .preferences-modal__section-title, .preferences-modal__section-description, .block-editor-inserter__tabs, .editor-list-view-sidebar, .edit-post-layout__footer, .components-snackbar, .components-text-control__input {
+  font-family: var(--es-font-sans);
+}
+
+body.wp-admin {
+  font-family: var(--es-font-sans) !important;
+}

package/dist/assets/wp-ui-enhancements.css

@@ -1 +1,299 @@
-.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.editor-document-tools__left .components-button,.editor-header__center .components-button,.editor-header__settings .components-button,.edit-post-sidebar .components-button:not(:-webkit-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input,.media-modal-content,.media-modal-content .components-button,.components-guide__container .components-button,.components-notice__content .components-button,.editor-post-featured-image__toggle.components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.editor-document-tools__left .components-button,.editor-header__center .components-button,.editor-header__settings .components-button,.edit-post-sidebar .components-button:not(:-moz-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input,.media-modal-content,.media-modal-content .components-button,.components-guide__container .components-button,.components-notice__content .components-button,.editor-post-featured-image__toggle.components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.editor-document-tools__left .components-button,.editor-header__center .components-button,.editor-header__settings .components-button,.edit-post-sidebar .components-button:not(:is(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input,.media-modal-content,.media-modal-content .components-button,.components-guide__container .components-button,.components-notice__content .components-button,.editor-post-featured-image__toggle.components-button{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content,.components-guide{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.media-menu-item.active{border-top-left-radius:.375rem!important;border-top-right-radius:.375rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:400!important}.edit-post-sidebar,.interface-interface-skeleton__sidebar:not(:empty)>.interface-complementary-area__fill[style="width: 280px;"],.interface-complementary-area.editor-sidebar{width:20rem!important}.block-editor-block-list__block-crash-warning{--tw-shadow:var(--tw-shadow-colored)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color:#b91c1c1a!important;border-color:#b91c1c26!important;border-radius:.5rem!important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity:1!important;color:rgb(69 10 10/var(--tw-text-opacity,1))!important}.wp-block-missing div.block-editor-warning{--tw-border-opacity:1!important;border-color:rgb(212 212 216/var(--tw-border-opacity,1))!important;--tw-shadow:var(--tw-shadow-colored)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color:#3f3f4633!important;background-color:#fafafabf!important;border-radius:.5rem!important}.wp-block-missing div.block-editor-warning .block-editor-warning__message{--tw-text-opacity:1!important;color:rgb(9 9 11/var(--tw-text-opacity,1))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-editor-inserter__toggle{border-radius:.375rem!important}:is(.edit-post-header__toolbar,.edit-post-header__settings,.editor-document-tools__left,.editor-header__center,.editor-header__settings) .components-button{min-height:2.25rem!important}:is(.edit-post-header__toolbar,.edit-post-header__settings,.editor-document-tools__left,.editor-header__center,.editor-header__settings) .components-button{min-width:2.25rem!important}.editor-styles-wrapper .wp-block:not(:-webkit-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:-moz-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:is(.editor-post-title,.block-list-appender)){max-width:100%!important}.components-tooltip{--tw-border-opacity:1;border-width:1px;border-color:rgb(31 41 55/var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);--tw-backdrop-brightness:brightness(1.05);--tw-backdrop-saturate:saturate(1.5);-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);background-color:#030712b3;padding:.125rem .25rem;border-radius:.375rem!important}.components-tooltip:has(>:first-child){--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1));background-color:#fffc}
+/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
+.edit-post-header__toolbar .components-button, .edit-post-header__settings .components-button, .editor-document-tools__left .components-button, .editor-header__center .components-button, .editor-header__settings .components-button, .edit-post-sidebar .components-button:not(.components-panel__body-toggle, .editor-post-last-revision__title), .components-snackbar, .components-toggle-group-control, .editor-post-publish-panel .components-button, .edit-post-text-editor__toolbar .components-button, .edit-post-text-editor__body .components-textarea-control__input, .media-modal-content, .media-modal-content .components-button, .components-guide__container .components-button, .components-notice__content .components-button, .editor-post-featured-image__toggle.components-button {
+  border-radius: var(--es-radius-md) !important;
+}
+
+.components-input-control__container, .components-combobox-control__suggestions-container, .components-checkbox-control__input, button.components-toggle-group-control-option-base, .editor-post-visibility__password-input {
+  border-radius: .25rem !important;
+}
+
+.components-button-group .components-button:first-child {
+  border-top-left-radius: var(--es-radius-md) !important;
+  border-bottom-left-radius: var(--es-radius-md) !important;
+}
+
+.components-button-group .components-button:last-child {
+  border-top-right-radius: var(--es-radius-md) !important;
+  border-bottom-right-radius: var(--es-radius-md) !important;
+}
+
+.components-popover__content, .components-guide {
+  border-radius: var(--es-radius-lg) !important;
+}
+
+.block-editor-inserter__search {
+  border-top-left-radius: var(--es-radius-lg) !important;
+  border-top-right-radius: var(--es-radius-lg) !important;
+}
+
+.media-menu-item.active {
+  border-top-left-radius: var(--es-radius-md) !important;
+  border-top-right-radius: var(--es-radius-md) !important;
+}
+
+.components-base-control__label, .components-input-control__label, .components-custom-select-control__label {
+  --tw-font-weight: var(--es-font-weight-normal) !important;
+  font-size: 13px !important;
+  font-weight: var(--es-font-weight-normal) !important;
+  --tw-tracking: var(--es-tracking-normal) !important;
+  letter-spacing: var(--es-tracking-normal) !important;
+  text-transform: none !important;
+}
+
+.edit-post-sidebar, .interface-interface-skeleton__sidebar:not(:empty) > .interface-complementary-area__fill[style="width: 280px;"], .interface-complementary-area.editor-sidebar {
+  width: calc(var(--es-spacing) * 80) !important;
+}
+
+.block-editor-block-list__block-crash-warning {
+  border-radius: var(--es-radius-lg) !important;
+  border-color: color-mix(in oklab, var(--es-color-red-700) 15%, transparent) !important;
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a) !important;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  --tw-shadow-color: color-mix(in oklab, var(--es-color-red-700) 10%, transparent) !important;
+}
+
+.block-editor-block-list__block-crash-warning .block-editor-warning__message {
+  color: var(--es-color-red-950) !important;
+}
+
+.wp-block-missing div.block-editor-warning {
+  border-radius: var(--es-radius-lg) !important;
+  border-color: var(--es-color-zinc-300) !important;
+  background-color: color-mix(in oklab, var(--es-color-zinc-50) 75%, transparent) !important;
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a) !important;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  --tw-shadow-color: color-mix(in oklab, var(--es-color-zinc-700) 20%, transparent) !important;
+}
+
+.wp-block-missing div.block-editor-warning .block-editor-warning__message {
+  color: var(--es-color-zinc-950) !important;
+}
+
+.block-editor-block-contextual-toolbar, .block-editor-block-parent-selector__button {
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-radius: var(--es-radius-lg) !important;
+}
+
+.block-editor-block-types-list .block-editor-block-types-list__item {
+  border-radius: var(--es-radius-lg) !important;
+}
+
+.block-editor-block-types-list .block-editor-block-types-list__item:after {
+  content: var(--tw-content);
+  border-radius: var(--es-radius-lg) !important;
+}
+
+.block-editor-block-types-list .block-editor-block-types-list__item svg {
+  --tw-scale-x: 125%;
+  --tw-scale-y: 125%;
+  --tw-scale-z: 125%;
+  scale: var(--tw-scale-x) var(--tw-scale-y);
+}
+
+.block-editor-list-view-tree .block-editor-block-icon {
+  border-radius: .25rem !important;
+}
+
+.block-editor-list-view-tree .block-editor-list-view-leaf > :first-child {
+  border-top-left-radius: var(--es-radius-lg) !important;
+  border-bottom-left-radius: var(--es-radius-lg) !important;
+}
+
+.block-editor-list-view-tree .block-editor-list-view-leaf > :last-child {
+  border-top-right-radius: var(--es-radius-lg) !important;
+  border-bottom-right-radius: var(--es-radius-lg) !important;
+}
+
+.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon {
+  border-radius: .25rem !important;
+}
+
+.block-editor-inserter__toggle {
+  border-radius: var(--es-radius-md) !important;
+}
+
+:is(.edit-post-header__toolbar, .edit-post-header__settings, .editor-document-tools__left, .editor-header__center, .editor-header__settings) .components-button {
+  min-height: calc(var(--es-spacing) * 9) !important;
+  min-width: calc(var(--es-spacing) * 9) !important;
+}
+
+.editor-styles-wrapper .wp-block:not(.editor-post-title, .block-list-appender) {
+  max-width: 100% !important;
+}
+
+.components-tooltip {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--es-color-gray-800);
+  background-color: color-mix(in oklab, var(--es-color-gray-950) 70%, transparent);
+  padding-inline: calc(var(--es-spacing) * 1);
+  padding-block: calc(var(--es-spacing) * .5);
+  color: var(--es-color-white);
+  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-backdrop-blur: blur(var(--es-blur-xl));
+  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  --tw-backdrop-brightness: brightness(105%);
+  --tw-backdrop-saturate: saturate(150%);
+  border-radius: var(--es-radius-md) !important;
+}
+
+.components-tooltip:has( > :first-child) {
+  border-color: var(--es-color-gray-200);
+  background-color: color-mix(in oklab, var(--es-color-white) 80%, transparent);
+  color: var(--es-color-gray-700);
+}
+
+@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-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+
+@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;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}

package/dist/components/animated-visibility/animated-visibility.js

@@ -27,7 +27,6 @@ import { useState, useEffect } from "react";
  * @preserve
  */
 const AnimatedVisibility = (props) => {
-  var _a;
   const { visible, className, children, noInitial = false, transition = "slideFade", noExitAnimation, noEnterAnimation, ...other } = props;
   const [isVisibleInner, setIsVisibleInner] = useState(false);
   const [canAnimate, setCanAnimate] = useState(true);
@@ -46,38 +45,36 @@ const AnimatedVisibility = (props) => {
   }, []);
   const transitions = {
     fade: {
-      inClassName: "es-uic-animate-in es-uic-fade-in",
-      outClassName: "es-uic-animate-out es-uic-fade-out"
+      inClassName: "es:motion-opacity-in es:motion-duration-300",
+      outClassName: "es:motion-opacity-out es:motion-duration-200"
     },
     slideFade: {
-      inClassName: "es-uic-animate-in es-uic-fade-in es-uic-slide-in-from-top-3",
-      outClassName: "es-uic-animate-out es-uic-fade-out es-uic-slide-out-to-top-3"
+      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     slideInFadeOut: {
-      inClassName: "es-uic-animate-in es-uic-fade-in es-uic-slide-in-from-bottom-3",
-      outClassName: "es-uic-animate-out es-uic-fade-out"
+      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-opacity-out es:motion-duration-200"
     },
     slideFadeUpSlight: {
-      inClassName: "es-uic-animate-in es-uic-fade-in es-uic-slide-in-from-bottom-1",
-      outClassName: "es-uic-animate-out es-uic-fade-out es-uic-slide-out-to-bottom-1"
+      inClassName: "es:motion-safe:motion-translate-y-in-[0.25rem] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-translate-y-out-[0.25rem] es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     slideFadeDownSlight: {
-      inClassName: "es-uic-animate-in es-uic-fade-in es-uic-slide-in-from-top-1",
-      outClassName: "es-uic-animate-out es-uic-fade-out es-uic-slide-out-to-top-1"
+      inClassName: "es:motion-safe:motion-translate-y-in-[-0.25rem] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-translate-y-out-[-0.25rem] es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     scaleFade: {
-      inClassName: "es-uic-animate-in es-uic-fade-in es-uic-zoom-in-90",
-      outClassName: "es-uic-animate-out es-uic-fade-out es-uic-zoom-out-90"
+      inClassName: "es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     scaleSlideFade: {
-      inClassName: "es-uic-animate-in es-uic-fade-in es-uic-zoom-in-[98%] es-uic-slide-in-from-top-3",
-      outClassName: "es-uic-animate-out es-uic-fade-out es-uic-zoom-out-[98%] es-uic-slide-out-to-top-3",
-      durationClassName: "es-uic-duration-300"
+      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     scaleRotateFade: {
-      inClassName: "es-uic-animate-in es-uic-fade-in es-uic-zoom-in-90 es-uic-spin-in-12",
-      outClassName: "es-uic-animate-out es-uic-fade-out es-uic-zoom-out-90 es-uic-spin-out-12",
-      durationClassName: "es-uic-duration-300"
+      inClassName: "es:motion-rotate-in es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-rotate-out es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     }
   };
   return /* @__PURE__ */ jsx(Fragment, { children: isVisibleInner && /* @__PURE__ */ jsx(
@@ -87,8 +84,7 @@ const AnimatedVisibility = (props) => {
         !noEnterAnimation && visible && noInitial && visible && canAnimate && transitions[transition].inClassName,
         !noEnterAnimation && visible && !noInitial && transitions[transition].inClassName,
         !noExitAnimation && !visible && transitions[transition].outClassName,
-        ((_a = transitions == null ? void 0 : transitions[transition]) == null ? void 0 : _a.durationClassName) ?? "es-uic-duration-300",
-        "es-uic-fill-mode-forwards",
+        "es:fill-mode-forwards",
         className
       ),
       onAnimationEnd: () => {

package/dist/components/base-control/base-control.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-Cld9rkzJ.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-aOUPPvTO.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
@@ -53,8 +53,8 @@ const BaseControl = (props) => {
   if (!(label || icon || subtitle)) {
     return children;
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-space-y-1", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-1", !inline && !icon && "es-uic-pb-0.5", labelContainerClassName), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es:space-y-1", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-1", !inline && !icon && "es:pb-0.5", labelContainerClassName), children: [
       (label || icon || subtitle) && /* @__PURE__ */ jsx(
         RichLabel,
         {
@@ -66,15 +66,15 @@ const BaseControl = (props) => {
           className: labelClassName
         }
       ),
-      inline && /* @__PURE__ */ jsx("div", { className: clsx("es-uic-ml-auto es-uic-flex es-uic-items-center es-uic-gap-1", controlContainerClassName), children }),
-      !inline && actions && /* @__PURE__ */ jsx("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-1", !inline && "es-uic-ml-auto"), children: actions })
+      inline && /* @__PURE__ */ jsx("div", { className: clsx("es:ml-auto es:flex es:items-center es:gap-1", controlContainerClassName), children }),
+      !inline && actions && /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:items-center es:gap-1", !inline && "es:ml-auto"), children: actions })
     ] }),
-    !inline && Array.isArray(children) && children.filter(Boolean).length > 1 && /* @__PURE__ */ jsx("div", { className: clsx("es-uic-space-y-1", controlContainerClassName), children }),
+    !inline && Array.isArray(children) && children.filter(Boolean).length > 1 && /* @__PURE__ */ jsx("div", { className: clsx("es:space-y-1", controlContainerClassName), children }),
     !inline && (!Array.isArray(children) || children.filter(Boolean).length < 2) && children,
     help && /* @__PURE__ */ jsx(
       $514c0188e459b4c0$export$5f1af8db9871e1d6,
       {
-        className: "es-uic-inline-block es-uic-text-sm es-uic-text-gray-400",
+        className: "es:inline-block es:text-sm es:text-secondary-500",
         slot: "description",
         children: help
       }

package/dist/components/breakpoint-preview/breakpoint-preview.js

@@ -54,105 +54,105 @@ const BreakpointPreview = (props) => {
   const hasActive = (blocks == null ? void 0 : blocks.some(({ active }) => active)) ?? false;
   const activeColors = {
     blue: {
-      text: "es-uic-text-blue-500",
-      bg: "es-uic-bg-blue-500"
+      text: "es:text-blue-500",
+      bg: "es:bg-blue-500"
     },
     green: {
-      text: "es-uic-text-lime-500",
-      bg: "es-uic-bg-lime-500"
+      text: "es:text-lime-500",
+      bg: "es:bg-lime-500"
     },
     yellow: {
-      text: "es-uic-text-yellow-400",
-      bg: "es-uic-bg-yellow-400"
+      text: "es:text-yellow-400",
+      bg: "es:bg-yellow-400"
     },
     red: {
-      text: "es-uic-text-red-500",
-      bg: "es-uic-bg-red-500"
+      text: "es:text-red-500",
+      bg: "es:bg-red-500"
     },
     indigo: {
-      text: "es-uic-text-indigo-500",
-      bg: "es-uic-bg-indigo-500"
+      text: "es:text-indigo-500",
+      bg: "es:bg-indigo-500"
     },
     orange: {
-      text: "es-uic-text-orange-500",
-      bg: "es-uic-bg-orange-500"
+      text: "es:text-orange-500",
+      bg: "es:bg-orange-500"
     },
     cyan: {
-      text: "es-uic-text-cyan-500",
-      bg: "es-uic-bg-cyan-500"
+      text: "es:text-cyan-500",
+      bg: "es:bg-cyan-500"
     },
     teal: {
-      text: "es-uic-text-teal-500",
-      bg: "es-uic-bg-teal-500"
+      text: "es:text-accent-500",
+      bg: "es:bg-accent-500"
     },
     fuchsia: {
-      text: "es-uic-text-fuchsia-500",
-      bg: "es-uic-bg-fuchsia-500"
+      text: "es:text-fuchsia-500",
+      bg: "es:bg-fuchsia-500"
     },
     black: {
-      text: "es-uic-text-black",
-      bg: "es-uic-bg-black"
+      text: "es:text-black",
+      bg: "es:bg-black"
     },
     default: {
-      text: "es-uic-text-slate-600",
-      bg: "es-uic-bg-slate-600"
+      text: "es:text-secondary-600",
+      bg: "es:bg-secondary-600"
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-mx-auto es-uic-grid es-uic-w-fit es-uic-shrink-0 es-uic-auto-cols-auto es-uic-grid-rows-[auto,_auto] es-uic-gap-x-2 es-uic-gap-y-0.5"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es:mx-auto es:grid es:w-fit es:shrink-0 es:auto-cols-auto es:grid-rows-[auto_auto] es:gap-x-2 es:gap-y-0.5"), children: [
     dotsStart && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-shrink-0 es-uic-translate-x-1 es-uic-items-center es-uic-gap-1 es-uic-justify-self-end es-uic-text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-text-gray-300", children: [
-        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+      /* @__PURE__ */ jsx("div", { className: "es:row-start-1 es:flex es:shrink-0 es:translate-x-1 es:items-center es:gap-1 es:justify-self-end es:text-secondary-400", children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-0.5 es:text-secondary-300", children: [
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-2 es-uic-size-px es-uic-justify-self-end" })
+      /* @__PURE__ */ jsx("div", { className: "es:row-start-2 es:size-px es:justify-self-end" })
     ] }),
     blocks.map(({ width, widthEnd, breakpoint, value, dotsStart: dotsStart2 = false, dotsEnd: dotsEnd2 = false, active = false, alignEnd = false, color }, i) => {
       var _a, _b;
       const activeTextColor = ((_a = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _a.text) ?? activeColors.default.text;
       const activeBgColor = ((_b = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _b.bg) ?? activeColors.default.bg;
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-min-w-28 es-uic-items-center es-uic-gap-1 es-uic-font-mono es-uic-font-medium es-uic-text-gray-400", children: [
-          dotsStart2 && /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-gap-0.5", active ? activeTextColor : "text-gray-300"), children: [
-            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+        /* @__PURE__ */ jsxs("div", { className: "es:row-start-1 es:flex es:min-w-28 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400", children: [
+          dotsStart2 && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "text-secondary-300"), children: [
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
           ] }),
           width && /* @__PURE__ */ jsx("span", { children: width }),
-          /* @__PURE__ */ jsx("div", { className: clsx("es-uic-grow es-uic-rounded", active ? "es-uic-h-0.5" : "es-uic-h-px es-uic-bg-gray-300", active && activeBgColor) }),
+          /* @__PURE__ */ jsx("div", { className: clsx("es:grow es:rounded", active ? "es:h-0.5" : "es:h-px es:bg-secondary-300", active && activeBgColor) }),
           widthEnd && /* @__PURE__ */ jsx("span", { children: widthEnd }),
-          dotsEnd2 && /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-gap-0.5", active ? activeTextColor : "es-uic-text-gray-300"), children: [
-            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+          dotsEnd2 && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "es:text-secondary-300"), children: [
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "es-uic-row-start-2 es-uic-flex es-uic-w-full es-uic-min-w-28 es-uic-flex-col es-uic-items-start es-uic-gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "es:row-start-2 es:flex es:w-full es:min-w-28 es:flex-col es:items-start es:gap-1", children: [
           /* @__PURE__ */ jsx(
             "span",
             {
               className: clsx(
-                "es-uic-rounded es-uic-px-1 es-uic-py-0.5",
-                hasActive && active && "es-uic-text-white",
+                "es:rounded es:px-1 es:py-0.5",
+                hasActive && active && "es:text-white",
                 hasActive && active && activeBgColor,
-                hasActive && !active && "es-uic-bg-gray-200 es-uic-text-gray-500",
-                !hasActive && "es-uic-bg-gray-600 es-uic-text-white",
-                alignEnd && "es-uic-ml-auto"
+                hasActive && !active && "es:bg-secondary-200 es:text-secondary-500",
+                !hasActive && "es:bg-secondary-600 es:text-white",
+                alignEnd && "es:ml-auto"
               ),
               children: upperFirst(breakpoint)
             }
           ),
-          value && /* @__PURE__ */ jsx("span", { className: clsx("-es-uic-mt-0.5 es-uic-px-1", active ? "es-uic-text-gray-400" : "es-uic-text-gray-400", alignEnd && "es-uic-ml-auto"), children: value })
+          value && /* @__PURE__ */ jsx("span", { className: clsx("es:-mt-0.5 es:px-1", active ? "es:text-secondary-400" : "es:text-secondary-400", alignEnd && "es:ml-auto"), children: value })
         ] })
       ] }, i);
     }),
     dotsEnd && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-shrink-0 -es-uic-translate-x-1 es-uic-items-center es-uic-gap-1 es-uic-font-mono es-uic-font-medium es-uic-text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-text-gray-300", children: [
-        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+      /* @__PURE__ */ jsx("div", { className: "es:row-start-1 es:flex es:shrink-0 es:-translate-x-1 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400", children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-0.5 es:text-secondary-300", children: [
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-2 es-uic-size-px" })
+      /* @__PURE__ */ jsx("div", { className: "es:row-start-2 es:size-px" })
     ] })
   ] });
 };