@eightshift/ui-components 1.9.0 → 2.0.0

package/dist/components/container-panel/container-panel.js

@@ -37,7 +37,7 @@ const ContainerPanel = (props) => {
   const { children, className, title, icon, subtitle, use, onUseChange, closable, startOpen = false, actions } = props;
   const [open, setOpen] = useState(startOpen);
   if (!title && typeof use === "undefined") {
-    return /* @__PURE__ */ jsx("div", { className: "es-uic-space-y-2 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-4", children });
+    return /* @__PURE__ */ jsx("div", { className: "es:space-y-2 es:border-t es:border-t-secondary-200 es:p-4", children });
   }
   const justUse = !closable && typeof onUseChange !== "undefined";
   const justClosable = closable && typeof onUseChange === "undefined";
@@ -54,7 +54,7 @@ const ContainerPanel = (props) => {
           HStack,
           {
             hidden: !closable && !onUseChange,
-            className: "es-uic-ml-auto",
+            className: "es:ml-auto",
             children: [
               onUseChange && /* @__PURE__ */ jsx(
                 Switch,
@@ -75,7 +75,7 @@ const ContainerPanel = (props) => {
                   icon: (typeof use !== "undefined" ? open && use : open) ? icons.caretDownFill : icons.caretDown,
                   type: "ghost",
                   size: "small",
-                  className: clsx("[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform", (typeof use !== "undefined" ? open && use : open) && "[&>svg]:-es-uic-scale-y-100"),
+                  className: clsx("es:icon:size-5 es:icon:transition-transform", (typeof use !== "undefined" ? open && use : open) && "es:icon:-scale-y-100"),
                   disabled: typeof use !== "undefined" && !use
                 }
               )
@@ -84,26 +84,26 @@ const ContainerPanel = (props) => {
         )
       ] }),
       className: clsx(
-        "es-uic-border-t es-uic-border-t-gray-200",
-        !closable && typeof use === "undefined" && "es-uic-space-y-2",
-        justClosable && open && "es-uic-pb-4",
-        justUse && use && "es-uic-pb-4",
-        useAndClosable && use && open && "es-uic-pb-4",
-        !justClosable && !justUse && !useAndClosable && "es-uic-pb-4",
-        !closable && !onUseChange && typeof use === "undefined" && "es-uic-px-4",
+        "es:border-t es:border-t-secondary-200",
+        !closable && typeof use === "undefined" && "es:space-y-2",
+        justClosable && open && "es:pb-4",
+        justUse && use && "es:pb-4",
+        useAndClosable && use && open && "es:pb-4",
+        !justClosable && !justUse && !useAndClosable && "es:pb-4",
+        !closable && !onUseChange && typeof use === "undefined" && "es:px-4",
         className
       ),
-      labelContainerClassName: clsx((closable || onUseChange) && "es-uic-pl-4 es-uic-pr-3 es-uic-min-h-12", !(closable || onUseChange) && "es-uic-mt-3", "!es-uic-pb-0"),
-      controlContainerClassName: "es-uic-px-4",
-      labelClassName: "!es-uic-text-gray-600",
+      labelContainerClassName: clsx((closable || onUseChange) && "es:pl-4 es:pr-3 es:min-h-12", !(closable || onUseChange) && "es:mt-3", "es:pb-0!"),
+      controlContainerClassName: "es:px-4",
+      labelClassName: "es:text-secondary-600!",
       children: [
         !closable && !onUseChange && typeof use === "undefined" && children,
         closable && typeof use === "undefined" && /* @__PURE__ */ jsx(
           AnimatedVisibility,
           {
             visible: open,
-            className: "es-uic-space-y-2 es-uic-px-4",
-            transition: "scaleSlideFade",
+            className: "es:space-y-2 es:px-4",
+            transition: "slideFadeDownSlight",
             children
           }
         ),
@@ -111,8 +111,8 @@ const ContainerPanel = (props) => {
           AnimatedVisibility,
           {
             visible: closable ? use && open : use,
-            className: "es-uic-space-y-2 es-uic-px-4",
-            transition: "scaleSlideFade",
+            className: "es:space-y-2 es:px-4",
+            transition: "slideFadeDownSlight",
             children
           }
         )

package/dist/components/draggable/draggable-handle.js

@@ -26,12 +26,12 @@ const DraggableHandle = (props) => {
     "div",
     {
       className: clsx(
-        "es-uic-flex es-uic-h-5 es-uic-w-4 es-uic-cursor-pointer es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-text-gray-400 es-uic-transition",
-        "[&>svg]:es-uic-size-4 [&>svg]:es-uic-shrink-0",
-        "active:es-uic-border-teal-500/30 active:es-uic-bg-teal-50 active:es-uic-text-teal-500",
-        "focus:es-uic-outline-none focus-visible:es-uic-border-teal-500 focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
-        "hover:es-uic-text-teal-500",
-        status === "dragging" && "!es-uic-border-teal-600 !es-uic-bg-teal-500 !es-uic-text-white es-uic-shadow-sm es-uic-shadow-teal-500/30",
+        "es:flex es:h-5 es:w-4 es:cursor-pointer es:items-center es:justify-center es:rounded es:border es:border-secondary-200 es:bg-white es:text-secondary-400 es:transition",
+        "es:icon:size-4 es:icon:shrink-0",
+        "es:active:border-accent-500/30 es:active:bg-accent-50 es:active:text-accent-500",
+        "es:focus:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:outline-hidden es:focus-visible:ring es:focus-visible:ring-accent-500/50",
+        "es:hover:text-accent-500",
+        status === "dragging" && "es:border-accent-600! es:bg-accent-500! es:text-white! es:shadow-sm es:shadow-accent-500/30",
         className
       ),
       ref: handleRef,