@eightshift/ui-components 1.5.1 → 1.6.0

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

@@ -244,11 +244,11 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     isProcessing: false
   };
   const flagRunNextFrame = () => runNextFrame = true;
-  const steps2 = stepsOrder.reduce((acc, key) => {
+  const steps = stepsOrder.reduce((acc, key) => {
     acc[key] = createRenderStep(flagRunNextFrame);
     return acc;
   }, {});
-  const { read, resolveKeyframes, update, preRender, render, postRender } = steps2;
+  const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
   const processBatch = () => {
     const timestamp = performance.now();
     runNextFrame = false;
@@ -275,7 +275,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     }
   };
   const schedule = stepsOrder.reduce((acc, key) => {
-    const step = steps2[key];
+    const step = steps[key];
     acc[key] = (process2, keepAlive = false, immediate = false) => {
       if (!runNextFrame)
         wake();
@@ -285,12 +285,45 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   }, {});
   const cancel = (process2) => {
     for (let i = 0; i < stepsOrder.length; i++) {
-      steps2[stepsOrder[i]].cancel(process2);
+      steps[stepsOrder[i]].cancel(process2);
     }
   };
-  return { schedule, cancel, state, steps: steps2 };
+  return { schedule, cancel, state, steps };
 }
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+const calcBezier = (t, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t + (3 * a2 - 6 * a1)) * t + 3 * a1) * t;
+const subdivisionPrecision = 1e-7;
+const subdivisionMaxIterations = 12;
+function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+  let currentX;
+  let currentT;
+  let i = 0;
+  do {
+    currentT = lowerBound + (upperBound - lowerBound) / 2;
+    currentX = calcBezier(currentT, mX1, mX2) - x;
+    if (currentX > 0) {
+      upperBound = currentT;
+    } else {
+      lowerBound = currentT;
+    }
+  } while (Math.abs(currentX) > subdivisionPrecision && ++i < subdivisionMaxIterations);
+  return currentT;
+}
+function cubicBezier(mX1, mY1, mX2, mY2) {
+  if (mX1 === mY1 && mX2 === mY2)
+    return noop;
+  const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+  return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
+const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
+const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+const backOut = /* @__PURE__ */ cubicBezier(0.33, 1.53, 0.69, 0.99);
+const backIn = /* @__PURE__ */ reverseEasing(backOut);
+const backInOut = /* @__PURE__ */ mirrorEasing(backIn);
+const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+const circIn = (p) => 1 - Math.sin(Math.acos(p));
+const circOut = reverseEasing(circIn);
+const circInOut = mirrorEasing(circIn);
 const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
 function isNone(value) {
   if (typeof value === "number") {
@@ -974,6 +1007,9 @@ function memo(callback) {
     return result;
   };
 }
+function isGenerator(type) {
+  return typeof type === "function";
+}
 let now;
 function clearTime() {
   now = void 0;
@@ -1024,7 +1060,7 @@ function canAnimate(keyframes2, name, type, velocity) {
   if (!isOriginAnimatable || !isTargetAnimatable) {
     return false;
   }
-  return hasKeyframesChanged(keyframes2) || type === "spring" && velocity;
+  return hasKeyframesChanged(keyframes2) || (type === "spring" || isGenerator(type)) && velocity;
 }
 const MAX_RESOLVE_DELAY = 40;
 class BaseAnimation {
@@ -1077,8 +1113,8 @@ class BaseAnimation {
   onKeyframesResolved(keyframes2, finalKeyframe) {
     this.resolvedAt = time.now();
     this.hasAttemptedResolve = true;
-    const { name, type, velocity, delay: delay2, onComplete, onUpdate, isGenerator } = this.options;
-    if (!isGenerator && !canAnimate(keyframes2, name, type, velocity)) {
+    const { name, type, velocity, delay: delay2, onComplete, onUpdate, isGenerator: isGenerator2 } = this.options;
+    if (!isGenerator2 && !canAnimate(keyframes2, name, type, velocity)) {
       if (!delay2) {
         onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
         onComplete === null || onComplete === void 0 ? void 0 : onComplete();
@@ -1333,45 +1369,12 @@ function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstan
     }
   };
 }
-const calcBezier = (t, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t + (3 * a2 - 6 * a1)) * t + 3 * a1) * t;
-const subdivisionPrecision = 1e-7;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-  let currentX;
-  let currentT;
-  let i = 0;
-  do {
-    currentT = lowerBound + (upperBound - lowerBound) / 2;
-    currentX = calcBezier(currentT, mX1, mX2) - x;
-    if (currentX > 0) {
-      upperBound = currentT;
-    } else {
-      lowerBound = currentT;
-    }
-  } while (Math.abs(currentX) > subdivisionPrecision && ++i < subdivisionMaxIterations);
-  return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-  if (mX1 === mY1 && mX2 === mY2)
-    return noop;
-  const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-  return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-}
 const easeIn = /* @__PURE__ */ cubicBezier(0.42, 0, 1, 1);
 const easeOut = /* @__PURE__ */ cubicBezier(0, 0, 0.58, 1);
 const easeInOut = /* @__PURE__ */ cubicBezier(0.42, 0, 0.58, 1);
 const isEasingArray = (ease2) => {
   return Array.isArray(ease2) && typeof ease2[0] !== "number";
 };
-const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
-const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
-const circIn = (p) => 1 - Math.sin(Math.acos(p));
-const circOut = reverseEasing(circIn);
-const circInOut = mirrorEasing(circIn);
-const backOut = /* @__PURE__ */ cubicBezier(0.33, 1.53, 0.69, 0.99);
-const backIn = /* @__PURE__ */ reverseEasing(backOut);
-const backInOut = /* @__PURE__ */ mirrorEasing(backIn);
-const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 const easingLookup = {
   linear: noop,
   easeIn,
@@ -1701,7 +1704,7 @@ class MainThreadAnimation extends BaseAnimation {
   }
   initPlayback(keyframes$1) {
     const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = this.options;
-    const generatorFactory = generators[type] || keyframes;
+    const generatorFactory = isGenerator(type) ? type : generators[type] || keyframes;
     let mapPercentToKeyframes;
     let mirroredGenerator;
     if (generatorFactory !== keyframes && typeof keyframes$1[0] !== "number") {
@@ -1930,8 +1933,35 @@ const acceleratedValues = /* @__PURE__ */ new Set([
   // "background-color"
 ]);
 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+const resolution = 10;
+const generateLinearEasing = (easing, duration) => {
+  let points = "";
+  const numPoints = Math.max(Math.round(duration / resolution), 2);
+  for (let i = 0; i < numPoints; i++) {
+    points += easing(progress(0, numPoints - 1, i)) + ", ";
+  }
+  return `linear(${points.substring(0, points.length - 2)})`;
+};
+const supportsFlags = {
+  linearEasing: void 0
+};
+function memoSupports(callback, supportsFlag) {
+  const memoized = memo(callback);
+  return () => {
+    var _a;
+    return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized();
+  };
+}
+const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
+  try {
+    document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+  } catch (e) {
+    return false;
+  }
+  return true;
+}, "linearEasing");
 function isWaapiSupportedEasing(easing) {
-  return Boolean(!easing || typeof easing === "string" && easing in supportedWaapiEasing || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
+  return Boolean(typeof easing === "function" && supportsLinearEasing() || !easing || typeof easing === "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
 }
 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
 const supportedWaapiEasing = {
@@ -1945,16 +1975,15 @@ const supportedWaapiEasing = {
   backIn: /* @__PURE__ */ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
   backOut: /* @__PURE__ */ cubicBezierAsString([0.33, 1.53, 0.69, 0.99])
 };
-function mapEasingToNativeEasingWithDefault(easing) {
-  return mapEasingToNativeEasing(easing) || supportedWaapiEasing.easeOut;
-}
-function mapEasingToNativeEasing(easing) {
+function mapEasingToNativeEasing(easing, duration) {
   if (!easing) {
     return void 0;
+  } else if (typeof easing === "function" && supportsLinearEasing()) {
+    return generateLinearEasing(easing, duration);
   } else if (isBezierDefinition(easing)) {
     return cubicBezierAsString(easing);
   } else if (Array.isArray(easing)) {
-    return easing.map(mapEasingToNativeEasingWithDefault);
+    return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || supportedWaapiEasing.easeOut);
   } else {
     return supportedWaapiEasing[easing];
   }
@@ -1963,7 +1992,7 @@ function animateStyle(element, valueName, keyframes2, { delay: delay2 = 0, durat
   const keyframeOptions = { [valueName]: keyframes2 };
   if (times)
     keyframeOptions.offset = times;
-  const easing = mapEasingToNativeEasing(ease2);
+  const easing = mapEasingToNativeEasing(ease2, duration);
   if (Array.isArray(easing))
     keyframeOptions.easing = easing;
   return element.animate(keyframeOptions, {
@@ -1979,7 +2008,7 @@ const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Elem
 const sampleDelta = 10;
 const maxDuration = 2e4;
 function requiresPregeneratedKeyframes(options) {
-  return options.type === "spring" || !isWaapiSupportedEasing(options.ease);
+  return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
 }
 function pregenerateKeyframes(keyframes2, options) {
   const sampleAnimation = new MainThreadAnimation({
@@ -2004,6 +2033,14 @@ function pregenerateKeyframes(keyframes2, options) {
     ease: "linear"
   };
 }
+const unsupportedEasingFunctions = {
+  anticipate,
+  backInOut,
+  circInOut
+};
+function isUnsupportedEase(key) {
+  return key in unsupportedEasingFunctions;
+}
 class AcceleratedAnimation extends BaseAnimation {
   constructor(options) {
     super(options);
@@ -2017,6 +2054,9 @@ class AcceleratedAnimation extends BaseAnimation {
     if (!((_a = motionValue2.owner) === null || _a === void 0 ? void 0 : _a.current)) {
       return false;
     }
+    if (typeof ease2 === "string" && supportsLinearEasing() && isUnsupportedEase(ease2)) {
+      ease2 = unsupportedEasingFunctions[ease2];
+    }
     if (requiresPregeneratedKeyframes(this.options)) {
       const { onComplete, onUpdate, motionValue: motionValue3, element, ...options } = this.options;
       const pregeneratedAnimation = pregenerateKeyframes(keyframes2, options);
@@ -2281,7 +2321,7 @@ class GroupPlaybackControls {
     this.runAll("complete");
   }
 }
-const animateMotionValue = (name, value, target, transition = {}, element, isHandoff, onEnd) => (onComplete) => {
+const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
   const valueTransition = getValueTransition(transition, name) || {};
   const delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
@@ -2299,9 +2339,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     onComplete: () => {
       onComplete();
       valueTransition.onComplete && valueTransition.onComplete();
-      onEnd && onEnd();
     },
-    onStop: onEnd,
     name,
     motionValue: value,
     element: isHandoff ? void 0 : element
@@ -2401,7 +2439,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.5.4";
+    this.version = "11.8.0";
     this.canTrackVelocity = null;
     this.events = {};
     this.updateAndNotify = (v, render = true) => {
@@ -2685,34 +2723,17 @@ function getWillChangeName(name) {
 class WillChangeMotionValue extends MotionValue {
   constructor() {
     super(...arguments);
-    this.output = [];
-    this.counts = /* @__PURE__ */ new Map();
+    this.values = [];
   }
   add(name) {
     const styleName = getWillChangeName(name);
-    if (!styleName)
-      return;
-    const prevCount = this.counts.get(styleName) || 0;
-    this.counts.set(styleName, prevCount + 1);
-    if (prevCount === 0) {
-      this.output.push(styleName);
+    if (styleName) {
+      addUniqueItem(this.values, styleName);
       this.update();
     }
-    let hasRemoved = false;
-    return () => {
-      if (hasRemoved)
-        return;
-      hasRemoved = true;
-      const newCount = this.counts.get(styleName) - 1;
-      this.counts.set(styleName, newCount);
-      if (newCount === 0) {
-        removeItem(this.output, styleName);
-        this.update();
-      }
-    };
   }
   update() {
-    this.set(this.output.length ? this.output.join(", ") : "auto");
+    this.set(this.values.length ? this.values.join(", ") : "auto");
   }
 }
 const isMotionValue = (value) => Boolean(value && value.getVelocity);
@@ -2765,7 +2786,8 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
         }
       }
     }
-    value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key) ? { type: false } : valueTransition, visualElement, isHandoff, addValueToWillChange(visualElement, key)));
+    addValueToWillChange(visualElement, key);
+    value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key) ? { type: false } : valueTransition, visualElement, isHandoff));
     const animation = value.animation;
     if (animation) {
       animations2.push(animation);
@@ -2832,6 +2854,27 @@ function animateVisualElement(visualElement, definition, options = {}) {
     visualElement.notify("AnimationComplete", definition);
   });
 }
+const numVariantProps = variantProps.length;
+function getVariantContext(visualElement) {
+  if (!visualElement)
+    return void 0;
+  if (!visualElement.isControllingVariants) {
+    const context2 = visualElement.parent ? getVariantContext(visualElement.parent) || {} : {};
+    if (visualElement.props.initial !== void 0) {
+      context2.initial = visualElement.props.initial;
+    }
+    return context2;
+  }
+  const context = {};
+  for (let i = 0; i < numVariantProps; i++) {
+    const name = variantProps[i];
+    const prop = visualElement.props[name];
+    if (isVariantLabel(prop) || prop === false) {
+      context[name] = prop;
+    }
+  }
+  return context;
+}
 const reversePriorityOrder = [...variantPriorityOrder].reverse();
 const numAnimationTypes = variantPriorityOrder.length;
 function animateList(visualElement) {
@@ -2854,8 +2897,8 @@ function createAnimationState(visualElement) {
     animate = makeAnimator(visualElement);
   }
   function animateChanges(changedActiveType) {
-    const props = visualElement.getProps();
-    const context = visualElement.getVariantContext(true) || {};
+    const { props } = visualElement;
+    const context = getVariantContext(visualElement.parent) || {};
     const animations2 = [];
     const removedKeys = /* @__PURE__ */ new Set();
     let encounteredKeys = {};
@@ -2937,7 +2980,9 @@ function createAnimationState(visualElement) {
       if (isInitialRender && visualElement.blockInitialAnimation) {
         shouldAnimateType = false;
       }
-      if (shouldAnimateType && (!isInherited || handledRemovedValues)) {
+      const willAnimateViaParent = isInherited && variantDidChange;
+      const needsAnimating = !willAnimateViaParent || handledRemovedValues;
+      if (shouldAnimateType && needsAnimating) {
         animations2.push(...definitionList.map((animation) => ({
           animation,
           options: { type }
@@ -3574,7 +3619,6 @@ class VisualElementDragControls {
       }
     };
     const onStart = (event, info) => {
-      var _a;
       const { drag: drag2, dragPropagation, onDragStart } = this.getProps();
       if (drag2 && !dragPropagation) {
         if (this.openGlobalLock)
@@ -3607,8 +3651,7 @@ class VisualElementDragControls {
       if (onDragStart) {
         frame.postRender(() => onDragStart(event, info));
       }
-      (_a = this.removeWillChange) === null || _a === void 0 ? void 0 : _a.call(this);
-      this.removeWillChange = addValueToWillChange(this.visualElement, "transform");
+      addValueToWillChange(this.visualElement, "transform");
       const { animationState } = this.visualElement;
       animationState && animationState.setActive("whileDrag", true);
     };
@@ -3648,8 +3691,6 @@ class VisualElementDragControls {
     });
   }
   stop(event, info) {
-    var _a;
-    (_a = this.removeWillChange) === null || _a === void 0 ? void 0 : _a.call(this);
     const isDragging = this.isDragging;
     this.cancel();
     if (!isDragging)
@@ -3761,7 +3802,8 @@ class VisualElementDragControls {
   }
   startAxisValueAnimation(axis, transition) {
     const axisValue = this.getAxisMotionValue(axis);
-    return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false, addValueToWillChange(this.visualElement, axis)));
+    addValueToWillChange(this.visualElement, axis);
+    return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false));
   }
   stopAnimation() {
     eachAxis((axis) => this.getAxisMotionValue(axis).stop());
@@ -4693,9 +4735,9 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
       frameData.delta = clamp(0, 1e3 / 60, now2 - frameData.timestamp);
       frameData.timestamp = now2;
       frameData.isProcessing = true;
-      steps.update.process(frameData);
-      steps.preRender.process(frameData);
-      steps.render.process(frameData);
+      frameSteps.update.process(frameData);
+      frameSteps.preRender.process(frameData);
+      frameSteps.render.process(frameData);
       frameData.isProcessing = false;
     }
     didUpdate() {
@@ -6561,7 +6603,7 @@ function updateMotionValuesFromProps(element, next, prev) {
     if (isMotionValue(nextValue)) {
       element.addValue(key, nextValue);
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "11.5.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.5.4 may not work as expected.`);
+        warnOnce(nextValue.version === "11.8.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.8.0 may not work as expected.`);
       }
     } else if (isMotionValue(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));
@@ -6597,7 +6639,6 @@ const propEventHandlers = [
   "LayoutAnimationStart",
   "LayoutAnimationComplete"
 ];
-const numVariantProps = variantProps.length;
 class VisualElement {
   /**
    * This method takes React props and returns found MotionValues. For example, HTML
@@ -6625,16 +6666,16 @@ class VisualElement {
     this.propEventSubscriptions = {};
     this.notifyUpdate = () => this.notify("Update", this.latestValues);
     this.render = () => {
-      this.isRenderScheduled = false;
       if (!this.current)
         return;
       this.triggerBuild();
       this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
     };
-    this.isRenderScheduled = false;
+    this.renderScheduledAt = 0;
     this.scheduleRender = () => {
-      if (!this.isRenderScheduled) {
-        this.isRenderScheduled = true;
+      const now2 = time.now();
+      if (this.renderScheduledAt < now2) {
+        this.renderScheduledAt = now2;
         frame.render(this.render, false, true);
       }
     };
@@ -6826,27 +6867,6 @@ class VisualElement {
   getClosestVariantNode() {
     return this.isVariantNode ? this : this.parent ? this.parent.getClosestVariantNode() : void 0;
   }
-  getVariantContext(startAtParent = false) {
-    if (startAtParent) {
-      return this.parent ? this.parent.getVariantContext() : void 0;
-    }
-    if (!this.isControllingVariants) {
-      const context2 = this.parent ? this.parent.getVariantContext() || {} : {};
-      if (this.props.initial !== void 0) {
-        context2.initial = this.props.initial;
-      }
-      return context2;
-    }
-    const context = {};
-    for (let i = 0; i < numVariantProps; i++) {
-      const name = variantProps[i];
-      const prop = this.props[name];
-      if (isVariantLabel(prop) || prop === false) {
-        context[name] = prop;
-      }
-    }
-    return context;
-  }
   /**
    * Add a child visual element to our set of children.
    */
@@ -7281,9 +7301,9 @@ const AnimatedVisibility = (props) => {
       exit: { opacity: 0, scale: 0.9 }
     },
     scaleRotateFade: {
-      initial: { opacity: 0, scale: 0.95, rotate: "-25deg" },
+      initial: { opacity: 0, scale: 0.95, rotate: "-10deg" },
       animate: { opacity: 1, scale: 1, rotate: "0deg" },
-      exit: { opacity: 0, scale: 0.95, rotate: "-25deg" }
+      exit: { opacity: 0, scale: 0.95, rotate: "-10deg" }
     }
   };
   return /* @__PURE__ */ jsx(AnimatePresence, { initial: !noInitial, children: visible && /* @__PURE__ */ jsx(
@@ -7292,6 +7312,7 @@ const AnimatedVisibility = (props) => {
       initial: transitions[transition].initial,
       animate: transitions[transition].animate,
       exit: transitions[transition].exit,
+      transition: { type: "spring", damping: 15, stiffness: 225 },
       className,
       ...other,
       children

package/dist/components/checkbox/checkbox.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-DQtGvvpM.js";
+import { a as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-2lR5GG9p.js";
 import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-Du2x3YVu.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";

package/dist/components/color-pickers/color-picker.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-BqWys-1G.js";
-import { Menu, MenuSection, MenuItem } from "../menu/menu.js";
+import { Menu, MenuItem, MenuSeparator, MenuSection } from "../menu/menu.js";
 import { ColorSwatch } from "./color-swatch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -24,10 +24,11 @@ import { icons } from "../../icons/icons.js";
  * @param {boolean} [props.showColorCode] - If `true`, the HEX color code is shown below the color name.
  * @param {boolean} [props.noColorGroups] - If `true`, colors won't be grouped by shades.
  * @param {ColorPickerType} props.type - Type of the color picker. Affects the icon and tooltip.
- * @param {boolean} [props.clearable] - If `true`, the color can be deselected.
+ * @param {boolean} [props.clearable] - If `true`, the picked color can be removed.
  * @param {boolean} [props.stacked] - If `true`, the control is not rendered inline.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  * @param {string} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip.
+ * @param {string} [props.clearItemLabel] - Label for the "None" item, if `clearable` is enabled.
  *
  * @returns {JSX.Element} The ColorPicker component.
  *
@@ -64,6 +65,7 @@ const ColorPicker = (props) => {
     type = "default",
     stacked,
     clearable,
+    clearItemLabel = __("None", "eightshift-ui-components"),
     hidden,
     tooltip,
     ...rest
@@ -117,15 +119,8 @@ const ColorPicker = (props) => {
           color
         }
       ),
-      onClick: () => {
-        if (clearable && value === slug) {
-          onChange(void 0);
-          return;
-        }
-        onChange(slug);
-      },
-      checked: clearable ? value === slug : null,
-      selected: !clearable ? value === slug : null,
+      onClick: () => onChange(slug),
+      selected: value === slug,
       children: [
         !showColorCode && name,
         showColorCode && /* @__PURE__ */ jsx(
@@ -215,6 +210,18 @@ const ColorPicker = (props) => {
           },
           ...rest,
           children: [
+            clearable && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onClick: () => onChange(void 0),
+                  selected: typeof value === "undefined",
+                  endIcon: /* @__PURE__ */ jsx(ColorSwatch, { className: "!es-uic-size-5.5" }),
+                  children: clearItemLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(MenuSeparator, {})
+            ] }),
             (noColorGroups || !hasColorGroups) && colors.map((color) => /* @__PURE__ */ jsx(
               SingleItem,
               {

package/dist/components/color-pickers/solid-color-picker.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { forwardRef, useContext, createContext, useMemo, useRef, useState, useCallback } from "react";
-import { b as $4e85f108e88277b8$export$ebe63fadcdce34ed, c as $4e85f108e88277b8$export$44644b8a16031b5b, d as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-DQtGvvpM.js";
+import { b as $4e85f108e88277b8$export$ebe63fadcdce34ed, c as $4e85f108e88277b8$export$44644b8a16031b5b, d as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-2lR5GG9p.js";
 import { b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-Du2x3YVu.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-rz8eyzby.js";

package/dist/components/component-toggle/component-toggle.js

@@ -125,6 +125,7 @@ const ComponentToggle = (props) => {
             {
               visible: useComponent,
               className: contentClassName,
+              noInitial: true,
               children
             }
           )

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

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import "../../default-i18n-BqWys-1G.js";
+import { DraggableContext } from "./draggable-context.js";
+import { useContext } from "react";
+import { icons } from "../../icons/icons.js";
+import "../../react-jsx-parser.min-sPC96O_U.js";
+/**
+ * A Draggable item handle.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the handle.
+ *
+ * @returns {JSX.Element} The DraggableHandle component.
+ *
+ * @example
+ * <DraggableHandle />
+ *
+ * @preserve
+ */
+const DraggableHandle = (props) => {
+  const { className, children, ...rest } = props;
+  const { handleRef, status } = useContext(DraggableContext);
+  return /* @__PURE__ */ jsx(
+    "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",
+        className
+      ),
+      ref: handleRef,
+      ...rest,
+      children: children ?? icons.reorderGrabberV
+    }
+  );
+};
+export {
+  DraggableHandle
+};