@eightshift/ui-components 7.0.0 → 7.2.0

package/dist/icons/index.js

@@ -755,5 +755,5 @@ import { verticalAlignBetweenAlt } from "./ui-icons/vertical-align-between-alt.j
 import { horizontalAlignAround } from "./ui-icons/horizontal-align-around.js";
 import { horizontalAlignEvenly } from "./ui-icons/horizontal-align-evenly.js";
 import { horizontalAlignBetweenAlt } from "./ui-icons/horizontal-align-between-alt.js";
-import { t as JsxSvg } from "../jsx-svg-OBADs_Qs.js";
+import { t as JsxSvg } from "../jsx-svg-BRJ4n3pD.js";
 export { BlockIcon, GenericColorSwatch, Icon, JsxSvg, Spinner, a11y, a11yWarning, accelerometer, activityLog, add, alert, alignHorizontalVertical, alignHorizontalVerticalAlt, alignHorizontalVerticalAlt2, altText, altTextGeneric, altTextGenericAlt, anchor, anchorPage, angle, animation, animationFile, animationGeneric, animationListGeneric, animationSettingsGeneric, archive, archiveFile, ariaLabel, arrowDown, arrowDownCircle, arrowDownCircleAlt, arrowDownSquare, arrowDownSquareAlt, arrowLeft, arrowLeftCircle, arrowLeftCircleAlt, arrowLeftSquare, arrowLeftSquareAlt, arrowRight, arrowRightCircle, arrowRightCircleAlt, arrowRightSquare, arrowRightSquareAlt, arrowUp, arrowUpCircle, arrowUpCircleAlt, arrowUpSquare, arrowUpSquareAlt, arrowsDown, arrowsHorizontal, arrowsLeft, arrowsLeftDiagonal, arrowsRight, arrowsRightDiagonal, arrowsUp, arrowsVertical, aspectRatio, aspectRatioAuto, aspectRatioNineSixteen, aspectRatioSixteenNine, aspectRatioSquare, aspectRatioThreeTwo, aspectRatioTwentyOneNine, attachment, autoClose, autoPause, autoPauseScroll, automatic, automaticAlt, autoplay, autoplayAlt, autoplayAlt2, award, backgroundBlur, backgroundColorSwatch, backgroundImage, backgroundRepeat, backgroundType, backgroundTypeAlt, backgroundTypeAlt2, blockIcons, blockParts, bold, book, bookmark, booleanExclude, booleanIntersect, booleanSubtract, booleanUnion, border, borderColor, bot, botDeny, box, brain, branch, branchFork, briefcase, browser, buttonDisabled, buttonFilled, buttonGhost, buttonOutline, calculator, calendar, calendarAdd, calendarDownload, calendarRemove, captionGeneric, cardFeatured, caretDown, caretDownFill, caretLeft, caretLeftFill, caretRight, caretRightFill, caretUp, caretUpFill, centerPoint, chat, chatBubble, chatBubbleAlt, check, checkCircle, checkCircleFill, checkCircleFillTransparent, checkSquare, checks, checksCircle, chevronDown, chevronLeft, chevronRight, chevronUp, clear, clearAlt, clipboard, clipboardPlain, clock, closedCaptions, code, codeVariable, color, colorAlt, colorFillSwatch, colorPickerFill, colorPickerListMarker, colorPickerText, colorPickerTextHighlight, colorSelect, columnGuttersLR, columns, columns3366, columns6633, componentGeneric, componentOptions, conditionH, conditionV, conditionalVisibility, containerHeight, containerSpacing, containerSpacingH, containerWidth, contentBottomLeft, contentBottomRight, contentCenter, contentTopLeft, contentTopRight, contrast, contrastAlt, cookie, cookieAlt, copy, currency, currentPage, cursorDisabled, cursorMove, darkMode, data, dateTime, defer, descriptionLink, design, dice, divider, dividerBottom, dividerSide, dividerStatus, dividerTop, door, doorIn, doorOut, download, dropdown, dropdownCaret, dropdownCaretAlt, dropdownClose, dropdownOpen, dummySpacer, edit, editOptions, email, emailRemove, embed, emptyCircle, emptyRect, equalColumns, equalRows, equals, errorCircle, errorCircleFill, errorCircleFillTransparent, exclude, excludeItem, excludeItemAlt, expand, expandXl, experiment, externalLink, extract, extractAlt, eyedropper, fastForward, fastReverse, fieldAfterText, fieldBeforeText, fieldDisabled, fieldHelp, fieldLabel, fieldName, fieldPlaceholder, fieldReadonly, fieldRequired, fieldType, fieldValue, fieldWidth, file, fileDownload, fileError, fileMetadata, filePdf, fileSize, fileSizeMax, fileSizeMin, fileType, fileUpload, files, fillColor, filter, filterAlt, flag, flagAlt, flipH, flipV, focus, folder, folderAdd, folderOpen, folderOpenSolid, folderSolid, folderTopLevel, fontFamily, footer, form, formAlt, fourColumns, frame, fullMaxShield, fullMaxText, fullWidthImage, gears, gearsFill, genericColorSwatch, genericShapes, genericShapesAlt, globe, globeAnchor, globeHash, googleTagManager, gradient, gradientRepeat, gradientStop, gridAlt, gridAutoCols, gridAutoRows, gridCol, gridHeight, gridListToggle, gridManual, gridRow, gridWidth, group, gutter, gyroscope, h1, h2, h3, h4, h5, h6, hamburgerMenu, hardDrive, header, heading, headingLevel, headingLevelAlt, heart, heartFill, heartFillTransparent, height, help, helpFill, hide, highlightedCheckmark, highlightedExclamationMark, history, horizontalAlign, horizontalAlignAlt, horizontalAlignAround, horizontalAlignBetween, horizontalAlignBetweenAlt, horizontalAlignCenter, horizontalAlignEvenly, horizontalAlignLeft, horizontalAlignRight, horizontalAlignStretch, hoverBackgroundGlow, hoverBackgroundType, hoverInvertObject, hoverInvertText, hoverRotate, hoverZoom, hyphenate, hyphenateAlt, hyphenateAlt2, iconGeneric, id, idCard, image, imageBlur, imageCaption, imageError, imageFile, imageLazyLoad, imageOpacity, imageOverlay, imageOverlayAlt, imageOverlayAlt2, imageRemove, info, infoCircle, infoCircleFill, infoCircleFillTransparent, inherit, inlineGradientFormat, inputField, italic, itemLimit, itemSelect, itemWrap, itemsPerPage, itemsPerRow, key, keyboard, large, latestPosts, layer, layerOff, layers, layout, layoutAlt, layoutAlt2, layoutAlt3, layoutAlt4, layoutBentoBox, layoutMasonry, leftPanel, leftPanelAlt, lightBulb, lightBulbAlt, lightMode, limitWidth, lineBreak, lineBreakAlt, lineBreakAltOff, lineBreakOff, lineBreakOffAlt, lineBreaksHyphenation, link, linkAdd, linkNav, linkRemove, listIndent, listOrdered, listOutdent, listUnordered, loader, loaderAlt, location, locationAdd, locationAllow, locationDeny, locationSettings, lock, loopMode, magic, magicAlt, magicAltFill, magicAltFillTransparent, magicFill, magicFillTransparent, mapLayer, mapLayerJson, mapLayerRaster, mapLayerVector, mapPin, matrixAlignControlDotActive, matrixAlignControlDotInactive, media, medium, menuItemCheck, menuItemCircle, microphone, migration, migrationAlt, migrationAltV, module, moneyPaper, moreH, moreHCircle, moreV, moreVCircle, mouseCursor, mouseWheel, multiItemLeftInset, multiItemLeftInsetMobile, multiItemRightInset, multiItemRightInsetMobile, multiple, musicNote, mute, muteCentered, narrowBottom, narrowLeft, narrowRight, narrowTop, navigationButtons, newTab, newspaper, none, notebook, num0Circle, num0CircleAlt, num0Square, num0SquareAlt, num1Circle, num1CircleAlt, num1Square, num1SquareAlt, num2Circle, num2CircleAlt, num2Square, num2SquareAlt, num3Circle, num3CircleAlt, num3Square, num3SquareAlt, num4Circle, num4CircleAlt, num4Square, num4SquareAlt, num5Circle, num5CircleAlt, num5Square, num5SquareAlt, num6Circle, num6CircleAlt, num6Square, num6SquareAlt, num7Circle, num7CircleAlt, num7Square, num7SquareAlt, num8Circle, num8CircleAlt, num8Square, num8SquareAlt, num9Circle, num9CircleAlt, num9Square, num9SquareAlt, officeBuilding, officeBuildings, offset, offsetAuto, optionList, optionListAlt, options, order, padding, paddingBottom, paddingTop, pagination, paletteColor, panelCollapse, panelExpand, paragraph, paste, pause, people, peopleGroup, person, photoCamera, pictureInPicture, play, playReverse, playbackOptions, plusCircle, plusCircleFill, plusCircleFillAlt, plusMinusButtonsH, plusMinusButtonsV, plusSquare, plusSquareFill, plusSquareFillTransparent, pointerHand, pointerHandDisabled, position2x2BottomLeft, position2x2BottomRight, position2x2Empty, position2x2TopLeft, position2x2TopRight, position3x3BottomCenter, position3x3BottomLeft, position3x3BottomRight, position3x3CenterCenter, position3x3CenterLeft, position3x3CenterRight, position3x3Empty, position3x3TopCenter, position3x3TopLeft, position3x3TopRight, positionArrows, positionArrowsH, positionArrowsInverted, positionArrowsInvertedH, positionArrowsInvertedV, positionArrowsV, positionHCenter, positionHEnd, positionHStart, positionLeft, positionRight, positionVCenter, positionVEnd, positionVStart, positioningGuide, positioningGuideAlt, positioningWidthGuide, preload, preview, previewResponsive, progressbar, progressbarIntermittent, range, rangeMax, rangeMid, rangeMin, readOnly, reduceHeightBottom, reduceHeightTop, regex, remove, rename, reorder, reorderGrabberH, reorderGrabberV, required, requiredAlt, reset, resetToZero, responsive, responsiveOverrides, responsiveOverridesAlt, responsiveOverridesAlt2, responsiveOverridesAlt2Fill, responsiveOverridesAlt3Fill, responsiveOverridesAltFill, rightPanel, rightPanelAlt, rotateLeft, rotateRight, roundedCorners, route, row, rowAdd, rowEmpty, rows, ruler, save, screenDesktop, screenLarge, screenMobile, screenTablet, screenTabletLarge, scrollbarH, scrollbarV, scrollbars, search, searchEmpty, separatorH, separatorV, shadow, share, shield, shieldPlus, shieldPlusAlt, shrink, shrinkDiagonalLeft, shrinkDiagonalLeftXl, shrinkDiagonalRight, shrinkDiagonalRightXl, shrinkXl, shuffle, sidebar, sidebarFlip, singleItemLeftInset, singleItemLeftInsetMobile, singleItemRightInset, singleItemRightInsetMobile, size, sizeAlt, slider, sliders, small, solidCircle, solidCircleFillTransparent, solidCircleFilled, solidCircleGradient, solidColor, solidRect, solidRectFillTransparent, solidRectFilled, solidRectGradient, sortAsc, sortDesc, sortGeneric, spacingBottom, spacingBottomIn, spacingLeft, spacingLeftIn, spacingRight, spacingRightIn, spacingTop, spacingTopIn, speed, stagger, star, step, stop, swap, tag, tagAlt, textAbc, textAbove, textAlignCenter, textAlignGeneric, textAlignJustify, textAlignLeft, textAlignRight, textBelow, textBoxEdit, textColorSwatch, textHighlightColorSwatch, textHighlightColorSwatchAlt, textLarger, textLength, textSize, textSizeAlt, textSmaller, textStrikethrough, textUppercase, textWrite, thumbsDown, thumbsUp, titleGeneric, toggleOff, toggleOn, toggleOnAlt, tools, totalItems, trash, trashAlt, tree, treeAlt, treeAlt2, troubleshootAlt, twoCardsLeft, twoCardsRight, twoColumns, typography, typographyOptions, underline, ungroup, upload, vennDiagram, vennDiagramAlt, vennDiagramAlt2, vennDiagramAlt3, vennDiagramAlt4, vennDiagramAlt5, vennDiagramAlt6, vennDiagramAlt7, verticalAlign, verticalAlignAlt, verticalAlignAround, verticalAlignBetween, verticalAlignBetweenAlt, verticalAlignBottom, verticalAlignCenter, verticalAlignEvenly, verticalAlignStretch, verticalAlignTop, verticalSpacing, video, videoChapters, videoControls, videoFile, videoPosterImage, videoSubtitle, videoSubtitleAlt, visibility, visibilityAlt, visibilityAlt2, visible, volume, warning, warningCircle, warningCircleFill, warningCircleFillTransparent, warningFill, warningFillTransparent, webVideo, wideBottom, wideLeft, wideRight, wideTop, width, wordpress, wrapper, wrapperAlt, wrapperConfig, wrapperOffAlt, wrapperOverflow, wrapperSimple, wrapperSimpleAlt, wrench, zap, zapFill };

package/dist/icons/jsx-svg.js

@@ -1,2 +1,2 @@
-import { t as JsxSvg } from "../jsx-svg-OBADs_Qs.js";
+import { t as JsxSvg } from "../jsx-svg-BRJ4n3pD.js";
 export { JsxSvg };

package/dist/index.js

@@ -1,21 +1,19 @@
-import "./proxy-BG7-_Ou3.js";
 import { AnimatedVisibility } from "./components/animated-visibility/animated-visibility.js";
-import { t as LinkInput } from "./link-input-D7iDRpOM.js";
-import { t as Modal } from "./modal-DbVLYMkH.js";
-import { i as Tabs, n as TabList, r as TabPanel, t as Tab } from "./tabs-BrdyBER5.js";
+import { t as LinkInput } from "./link-input-Bh8G7Urm.js";
+import { t as Modal } from "./modal-snrElwty.js";
+import { i as Tabs, n as TabList, r as TabPanel, t as Tab } from "./tabs-DaIUEc0g.js";
 import { n as Tooltip, t as DecorativeTooltip } from "./tooltip-BzJzYlcc.js";
-import { t as ToggleButton } from "./toggle-button-DJ8jNQ-9.js";
-import { n as ButtonGroup, t as Button } from "./button-COTeluL8.js";
-import { t as Checkbox } from "./checkbox-D0AWkLhp.js";
-import { t as ColorSwatch } from "./color-swatch-CBYsO_Zs.js";
-import { t as SolidColorPicker } from "./solid-color-picker-DbT-aoVx.js";
-import { t as Switch } from "./switch-L8dFSQWQ.js";
-import { t as NumberPicker } from "./number-picker-CkA1iJNZ.js";
-import { t as InputField } from "./input-field-UCZL5bqv.js";
+import { t as ToggleButton } from "./toggle-button-BlzUGfGy.js";
+import { n as ButtonGroup, t as Button } from "./button-D9cbyHeZ.js";
+import { t as Checkbox } from "./checkbox-BO5RZmO8.js";
+import { t as ColorSwatch } from "./color-swatch-D2ZBkuTt.js";
+import { t as SolidColorPicker } from "./solid-color-picker-DukArNH-.js";
+import { t as Switch } from "./switch-DmsvyQPa.js";
+import { t as NumberPicker } from "./number-picker-Dhtx4409.js";
+import { t as InputField } from "./input-field-_OCWbftf.js";
 import { RichLabel } from "./components/rich-label/rich-label.js";
 import { BaseControl } from "./components/base-control/base-control.js";
 import { BreakpointPreview } from "./components/breakpoint-preview/breakpoint-preview.js";
-import "./build-module-sxK3nxOK.js";
 import { Expandable } from "./components/expandable/expandable.js";
 import { Popover, TriggeredPopover } from "./components/popover/popover.js";
 import { Spacer } from "./components/spacer/spacer.js";
@@ -30,12 +28,12 @@ import { Container, ContainerGroup } from "./components/base-control/container.j
 import { DraggableList } from "./components/draggable-list/draggable-list.js";
 import { DraggableListItem, DraggableListItemHandle } from "./components/draggable-list/draggable-list-item.js";
 import { DraggableContext } from "./components/draggable/draggable-context.js";
-import { t as Draggable } from "./draggable-CYQyD9gG.js";
+import { t as Draggable } from "./draggable-CTDVJ4zd.js";
 import { DraggableHandle } from "./components/draggable/draggable-handle.js";
-import { t as SmartImage } from "./smart-image-CbSsEASF.js";
+import { t as SmartImage } from "./smart-image-CBNbxJ57.js";
 import { FilePickerShell } from "./components/placeholders/file-picker-shell.js";
 import { FilePlaceholder } from "./components/placeholders/file-placeholder.js";
-import { t as GradientEditor } from "./gradient-editor-DbH8NU2p.js";
+import { t as GradientEditor } from "./gradient-editor-xfxA_s9a.js";
 import { Slider } from "./components/slider/slider.js";
 import { MatrixAlign } from "./components/matrix-align/matrix-align.js";
 import { Toggle } from "./components/toggle/toggle.js";

package/dist/{input-field-UCZL5bqv.js → input-field-_OCWbftf.js}

@@ -11,7 +11,7 @@ import { n as $01b77f81d0f07f68$export$b04be29aa201d4f5, t as $01b77f81d0f07f68$
 import { n as $514c0188e459b4c0$export$9afb8bc826b033ea } from "./Text-O6VBBDlP.js";
 import { t as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "./Form-DTMkbrQY.js";
 import { BaseControl } from "./components/base-control/base-control.js";
-import { t as cva } from "./dist-DIK9pFxO.js";
+import { t as cva } from "./dist-2gkv7_1U.js";
 import React, { createContext, forwardRef, useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region node_modules/react-aria-components/dist/TextArea.mjs

package/dist/{link-input-D7iDRpOM.js → link-input-Bh8G7Urm.js}

@@ -24,8 +24,8 @@ import { t as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "./Form-DTMkbrQY.
 import { RichLabel } from "./components/rich-label/rich-label.js";
 import { BaseControl } from "./components/base-control/base-control.js";
 import { randomId } from "./utilities/hash.js";
-import { t as cva } from "./dist-DIK9pFxO.js";
-import { t as __ } from "./build-module-sxK3nxOK.js";
+import { t as cva } from "./dist-2gkv7_1U.js";
+import { t as __ } from "./build-module-Bsx62nlm.js";
 import { Spinner } from "./icons/spinner.js";
 import { anchor } from "./icons/ui-icons/anchor.js";
 import { clearAlt } from "./icons/ui-icons/clear-alt.js";

package/dist/{modal-DbVLYMkH.js → modal-snrElwty.js}

@@ -6,9 +6,9 @@ import { A as $21f1aa98acb08317$export$c57958e35f31ed73, j as $cc38e7bd3fc7b213$
 import { r as $fc909762b330b746$export$61c6a8c84e605fb6 } from "./OverlayArrow-BoloUPQM.js";
 import { C as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, S as $86ea4cb521eb2e37$export$2317d149ed6f78c4, b as $337b884510726a0d$export$c6fdb837b070b4ff, n as $de32f1b87079253c$export$3ddf2d174ce01153, r as $de32f1b87079253c$export$d2f961adcb0afbe, t as $de32f1b87079253c$export$2e1e1122cf0cba88, w as $a11501f3d1d39e6c$export$ea8f71083e90600f, x as $5e3802645cc19319$export$1c3ebcada18427bf, y as $337b884510726a0d$export$14c98a7594375490 } from "./Dialog-i5VLQw1o.js";
 import { n as $d3f049242431219c$export$6d3443f2c48bfc20, t as $d3f049242431219c$export$45fda7c47f93fd48 } from "./animation-Bd2peown.js";
-import { t as Button } from "./button-COTeluL8.js";
+import { t as Button } from "./button-D9cbyHeZ.js";
 import { t as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "./Heading-Hol-wS_B.js";
-import { t as __ } from "./build-module-sxK3nxOK.js";
+import { t as __ } from "./build-module-Bsx62nlm.js";
 import { clear } from "./icons/ui-icons/clear.js";
 import { HStack } from "./components/layout/hstack.js";
 import React, { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from "react";

package/dist/{number-picker-CkA1iJNZ.js → number-picker-Dhtx4409.js}

@@ -6,12 +6,13 @@ import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-C-XNeJ
 import { r as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, t as $81397a9303501bda$export$23f548e970bdf099 } from "./useNumberField-2xbi3jRV.js";
 import { t as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "./FieldError-BWDbP5Db.js";
 import { i as $a049562f99e7db0e$export$f9c6924e160136d1, n as $3985021b0ad6602f$export$f5b8910cec6cf069, r as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, t as $3985021b0ad6602f$export$37fb8590cf2c088c } from "./Input-BURqyJXW.js";
-import { n as ButtonGroup, t as Button } from "./button-COTeluL8.js";
+import { n as ButtonGroup, t as Button } from "./button-D9cbyHeZ.js";
 import { n as $01b77f81d0f07f68$export$b04be29aa201d4f5, t as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "./Label-DFXXxMKY.js";
 import { n as $514c0188e459b4c0$export$9afb8bc826b033ea } from "./Text-O6VBBDlP.js";
 import { t as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "./Form-DTMkbrQY.js";
 import { BaseControl } from "./components/base-control/base-control.js";
-import { t as cva } from "./dist-DIK9pFxO.js";
+import { t as cva } from "./dist-2gkv7_1U.js";
+import "./build-module-Bsx62nlm.js";
 import { chevronDown } from "./icons/ui-icons/chevron-down.js";
 import { chevronUp } from "./icons/ui-icons/chevron-up.js";
 import React, { createContext, forwardRef, useRef } from "react";

package/dist/{proxy-BG7-_Ou3.js → proxy-DjkEpeDL.js}

@@ -3193,9 +3193,14 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
 		};
 		/**
 		* If the value is already at the defined target, skip the animation.
+		* We still re-assert the value via frame.update to take precedence
+		* over any stale transitionEnd callbacks from previous animations.
 		*/
 		const currentValue = value.get();
-		if (currentValue !== void 0 && !value.isAnimating && !Array.isArray(valueTarget) && valueTarget === currentValue && !valueTransition.velocity) continue;
+		if (currentValue !== void 0 && !value.isAnimating() && !Array.isArray(valueTarget) && valueTarget === currentValue && !valueTransition.velocity) {
+			frame.update(() => value.set(valueTarget));
+			continue;
+		}
 		/**
 		* If this is the first time a value is being animated, check
 		* to see if we're handling off from an existing animation.
@@ -5583,21 +5588,22 @@ function calcBoxDelta(delta, source, target, origin) {
 	calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : void 0);
 	calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : void 0);
 }
-function calcRelativeAxis(target, relative, parent) {
-	target.min = parent.min + relative.min;
+function calcRelativeAxis(target, relative, parent, anchor = 0) {
+	target.min = (anchor ? mixNumber$1(parent.min, parent.max, anchor) : parent.min) + relative.min;
 	target.max = target.min + calcLength(relative);
 }
-function calcRelativeBox(target, relative, parent) {
-	calcRelativeAxis(target.x, relative.x, parent.x);
-	calcRelativeAxis(target.y, relative.y, parent.y);
+function calcRelativeBox(target, relative, parent, anchor) {
+	calcRelativeAxis(target.x, relative.x, parent.x, anchor?.x);
+	calcRelativeAxis(target.y, relative.y, parent.y, anchor?.y);
 }
-function calcRelativeAxisPosition(target, layout, parent) {
-	target.min = layout.min - parent.min;
+function calcRelativeAxisPosition(target, layout, parent, anchor = 0) {
+	const anchorPoint = anchor ? mixNumber$1(parent.min, parent.max, anchor) : parent.min;
+	target.min = layout.min - anchorPoint;
 	target.max = target.min + calcLength(layout);
 }
-function calcRelativePosition(target, layout, parent) {
-	calcRelativeAxisPosition(target.x, layout.x, parent.x);
-	calcRelativeAxisPosition(target.y, layout.y, parent.y);
+function calcRelativePosition(target, layout, parent, anchor) {
+	calcRelativeAxisPosition(target.x, layout.x, parent.x, anchor?.x);
+	calcRelativeAxisPosition(target.y, layout.y, parent.y, anchor?.y);
 }
 //#endregion
 //#region node_modules/motion-dom/dist/es/projection/geometry/delta-remove.mjs
@@ -6272,8 +6278,16 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
 		update() {
 			this.updateScheduled = false;
 			if (this.isUpdateBlocked()) {
+				const wasBlockedByResize = this.updateBlockedByResize;
 				this.unblockUpdate();
+				this.updateBlockedByResize = false;
 				this.clearAllSnapshots();
+				/**
+				* When blocked by resize, still measure layouts so
+				* callbacks like onLayoutMeasure fire (e.g. Reorder).
+				* Skip notifyLayoutUpdate to prevent animations.
+				*/
+				if (wasBlockedByResize) this.nodes.forEach(forceLayoutMeasure);
 				this.nodes.forEach(clearMeasurements);
 				return;
 			}
@@ -6547,7 +6561,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
 			* a relativeParent. This will allow a component to perform scale correction
 			* even if no animation has started.
 			*/
-			if (!this.targetDelta && !this.relativeTarget) if (relativeParent && relativeParent.layout) this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
+			if (!this.targetDelta && !this.relativeTarget) if (this.options.layoutAnchor !== false && relativeParent && relativeParent.layout) this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
 			else this.removeRelativeTarget();
 			/**
 			* If we have no relative target or no target delta our target isn't valid
@@ -6566,7 +6580,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
 			*/
 			if (this.relativeTarget && this.relativeTargetOrigin && this.relativeParent && this.relativeParent.target) {
 				this.forceRelativeParentToResolveTarget();
-				calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
+				calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target, this.options.layoutAnchor || void 0);
 			} else if (this.targetDelta) {
 				if (Boolean(this.resumingFrom)) this.applyTransform(this.layout.layoutBox, false, this.target);
 				else copyBoxInto(this.target, this.layout.layoutBox);
@@ -6581,7 +6595,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
 			*/
 			if (this.attemptToResolveRelativeTarget) {
 				this.attemptToResolveRelativeTarget = false;
-				if (relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
+				if (this.options.layoutAnchor !== false && relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
 				else this.relativeParent = this.relativeTarget = void 0;
 			}
 			/**
@@ -6603,7 +6617,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
 			this.forceRelativeParentToResolveTarget();
 			this.relativeTarget = createBox();
 			this.relativeTargetOrigin = createBox();
-			calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout);
+			calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout, this.options.layoutAnchor || void 0);
 			copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
 		}
 		removeRelativeTarget() {
@@ -6737,7 +6751,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
 				mixAxisDelta(targetDelta.y, delta.y, progress);
 				this.setTargetDelta(targetDelta);
 				if (this.relativeTarget && this.relativeTargetOrigin && this.layout && this.relativeParent && this.relativeParent.layout) {
-					calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
+					calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox, this.options.layoutAnchor || void 0);
 					mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
 					/**
 					* If this is an unchanged relative target we can consider the
@@ -7038,10 +7052,11 @@ function notifyLayoutUpdate(node) {
 			if (relativeParent && !relativeParent.resumeFrom) {
 				const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
 				if (parentSnapshot && parentLayout) {
+					const anchor = node.options.layoutAnchor || void 0;
 					const relativeSnapshot = createBox();
-					calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
+					calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox, anchor);
 					const relativeLayout = createBox();
-					calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
+					calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox, anchor);
 					if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) hasRelativeLayoutChanged = true;
 					if (relativeParent.options.layoutRoot) {
 						node.relativeTarget = relativeLayout;
@@ -7100,6 +7115,10 @@ function clearSnapshot(node) {
 function clearMeasurements(node) {
 	node.clearMeasurements();
 }
+function forceLayoutMeasure(node) {
+	node.isLayoutDirty = true;
+	node.updateLayout();
+}
 function clearIsLayoutDirty(node) {
 	node.isLayoutDirty = false;
 }
@@ -8163,7 +8182,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
 	return visualElement;
 }
 function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
-	const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, layoutCrossfade } = props;
+	const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, layoutAnchor, layoutCrossfade } = props;
 	visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent));
 	visualElement.projection.setOptions({
 		layoutId,
@@ -8174,7 +8193,8 @@ function createProjectionNode(visualElement, props, ProjectionNodeConstructor, i
 		initialPromotionConfig,
 		crossfade: layoutCrossfade,
 		layoutScroll,
-		layoutRoot
+		layoutRoot,
+		layoutAnchor
 	});
 }
 function getClosestProjectingNode(visualElement) {
@@ -9371,8 +9391,10 @@ var MeasureLayoutWithContext = class extends Component {
 		return null;
 	}
 	componentDidUpdate() {
-		const { projection } = this.props.visualElement;
+		const { visualElement, layoutAnchor } = this.props;
+		const { projection } = visualElement;
 		if (projection) {
+			projection.options.layoutAnchor = layoutAnchor;
 			projection.root.didUpdate();
 			microtask.postRender(() => {
 				if (!projection.currentAnimation && projection.isLead()) this.safeToRemove();

package/dist/{shared-DFDimxvX.js → shared-BiWZjrGF.js}

@@ -20,7 +20,7 @@ import { t as $f39a9eba43920ace$export$86427a43e3e48ebb } from "./Hidden-8TB37dp
 import { t as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "./Label-DFXXxMKY.js";
 import { n as $514c0188e459b4c0$export$9afb8bc826b033ea } from "./Text-O6VBBDlP.js";
 import { t as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "./Form-DTMkbrQY.js";
-import { t as __ } from "./build-module-sxK3nxOK.js";
+import { t as __ } from "./build-module-Bsx62nlm.js";
 import { Icon } from "./icons/icon.js";
 import { check } from "./icons/ui-icons/check.js";
 import { clear } from "./icons/ui-icons/clear.js";
@@ -1027,9 +1027,9 @@ var getGroupedOptions = (filteredOptions, groupKey, groupValueMapping) => {
 		return {
 			key,
 			label: mapping?.label ?? (key === "_other" ? __("Other", "eightshift-ui-components") : key),
-			icon: jsx(Icon, { icon: mapping?.icon }),
+			icon: mapping?.icon && jsx(Icon, { icon: mapping?.icon }),
 			subtitle: mapping?.subtitle || null,
-			endIcon: jsx(Icon, { icon: mapping?.endIcon }),
+			endIcon: mapping?.endIcon && jsx(Icon, { icon: mapping?.endIcon }),
 			options
 		};
 	});

package/dist/{smart-image-CbSsEASF.js → smart-image-CBNbxJ57.js}

@@ -1,7 +1,7 @@
 import { t as clsx } from "./clsx-BUU5J41u.js";
 import { t as DecorativeTooltip } from "./tooltip-BzJzYlcc.js";
 import { cyrb64Hash } from "./utilities/hash.js";
-import { t as __ } from "./build-module-sxK3nxOK.js";
+import { t as __ } from "./build-module-Bsx62nlm.js";
 import { imageError } from "./icons/ui-icons/image-error.js";
 import { cloneElement, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{solid-color-picker-DbT-aoVx.js → solid-color-picker-DukArNH-.js}

@@ -14,11 +14,11 @@ import { a as $6f909507e6374d18$export$6189c2744041d8f8, c as $47b897dc8cdb026b$
 import { n as $5c3e21d68f1c4674$export$a966af930f325cab } from "./VisuallyHidden-CfsnJHZb.js";
 import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, r as $e5be200c675c3b3a$export$a763b9476acd3eb, t as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "./FieldError-BWDbP5Db.js";
 import { i as $a049562f99e7db0e$export$f9c6924e160136d1, n as $3985021b0ad6602f$export$f5b8910cec6cf069, t as $3985021b0ad6602f$export$37fb8590cf2c088c } from "./Input-BURqyJXW.js";
-import { a as $3493a52097159720$exports, i as $799cddbef784668f$export$6e865ea70d7724f, r as $799cddbef784668f$export$4cde5df63f53f473, t as ColorSwatch } from "./color-swatch-CBYsO_Zs.js";
+import { a as $3493a52097159720$exports, i as $799cddbef784668f$export$6e865ea70d7724f, r as $799cddbef784668f$export$4cde5df63f53f473, t as ColorSwatch } from "./color-swatch-D2ZBkuTt.js";
 import { t as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "./Label-DFXXxMKY.js";
 import { n as $514c0188e459b4c0$export$9afb8bc826b033ea } from "./Text-O6VBBDlP.js";
 import { BaseControl } from "./components/base-control/base-control.js";
-import { t as __ } from "./build-module-sxK3nxOK.js";
+import { t as __ } from "./build-module-Bsx62nlm.js";
 import { dropdownCaretAlt } from "./icons/ui-icons/dropdown-caret-alt.js";
 import { TriggeredPopover } from "./components/popover/popover.js";
 import React, { createContext, forwardRef, useCallback, useContext, useMemo, useRef, useState } from "react";

package/dist/{switch-L8dFSQWQ.js → switch-DmsvyQPa.js}

@@ -6,7 +6,7 @@ import { t as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-D
 import { t as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "./VisuallyHidden-CfsnJHZb.js";
 import { t as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "./useToggle-ecIirvIM.js";
 import { t as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "./useToggleState-IIDbiKPl.js";
-import { t as cva } from "./dist-DIK9pFxO.js";
+import { t as cva } from "./dist-2gkv7_1U.js";
 import React, { createContext, forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region node_modules/@react-aria/switch/dist/useSwitch.mjs

package/dist/{tabs-BrdyBER5.js → tabs-DaIUEc0g.js}

@@ -12,8 +12,8 @@ import { t as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-D
 import { t as $f39a9eba43920ace$export$86427a43e3e48ebb } from "./Hidden-8TB37dpK.js";
 import { n as $c8a5a149f625efcf$export$758399f318e6385a, t as $1d5b8b8664671ef2$export$c9549807523555e0 } from "./SelectionIndicator-31L6EI9F.js";
 import { RichLabel } from "./components/rich-label/rich-label.js";
-import { t as cva } from "./dist-DIK9pFxO.js";
-import { r as sprintf, t as __ } from "./build-module-sxK3nxOK.js";
+import { t as cva } from "./dist-2gkv7_1U.js";
+import { r as sprintf, t as __ } from "./build-module-Bsx62nlm.js";
 import { Notice } from "./components/notice/notice.js";
 import React, { cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{toggle-button-DJ8jNQ-9.js → toggle-button-BlzUGfGy.js}

@@ -7,7 +7,7 @@ import { n as Tooltip } from "./tooltip-BzJzYlcc.js";
 import { t as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "./useButton-ra1ZSZ4z.js";
 import { t as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "./useToggleState-IIDbiKPl.js";
 import { t as $1d5b8b8664671ef2$export$c9549807523555e0 } from "./SelectionIndicator-31L6EI9F.js";
-import { t as cva } from "./dist-DIK9pFxO.js";
+import { t as cva } from "./dist-2gkv7_1U.js";
 import React, { createContext, forwardRef, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region node_modules/@react-aria/button/dist/useToggleButton.mjs

package/dist/utilities/general.js

@@ -1,2 +1,25 @@
-import { a as getFileExtension, i as checkTransparency, n as analyzeImageAsync, o as isColorDark, r as analyzeImageData, t as analyzeImage } from "../general-D-7dwhuF.js";
-export { analyzeImage, analyzeImageAsync, analyzeImageData, checkTransparency, getFileExtension, isColorDark };
+//#region lib/utilities/general.js
+/**
+* Get file extension from a URL string.
+* getFileExtension('https://example.com/image.png'); // 'png'
+* getFileExtension('https://example.com/archive.tar.gz'); // 'gz'
+* getFileExtension('https://example.com/no-extension'); // null
+*/
+var getFileExtension = (input) => {
+	const match = new URL(input).pathname.match(/\.([a-zA-Z0-9]+)(?:\?|#|$)/);
+	return match ? match[1].toLowerCase() : null;
+};
+/**
+* Determine if a color is considered "dark" based on its RGB values and a lightness threshold.
+* @param {number} g - Green component (0-255).
+* @param {number} b - Blue component (0-255).
+* @param {number} [threshold=0.5] - Lightness threshold (0.0 - 1.0) below which the color is considered dark.
+* isColorDark(0, 0, 0); // true (black)
+* isColorDark(255, 255, 255); // false (white)
+* isColorDark(100, 100, 100, 0.4); // false (gray with higher threshold)
+*/
+var isColorDark = (r, g, b, threshold = .5) => {
+	return (.299 * r + .587 * g + .114 * b) / 255 < threshold;
+};
+//#endregion
+export { getFileExtension, isColorDark };

package/dist/utilities/index.js

@@ -3,7 +3,7 @@ import { arrayMoveMultiple, fixIds } from "./array-helpers.js";
 import { a as isObject, c as kebabCase, d as snakeCase, f as upperFirst, i as isEqual, l as lowerFirst, n as has, o as isPlainObject, r as isEmpty, s as isString, t as camelCase, u as pascalCase } from "../es-dash-HqXWZZ3_.js";
 import { truncate, truncateEnd, truncateMiddle, unescapeHTML } from "./text-helpers.js";
 import { n as throttle, t as debounce } from "../debounce-throttle-DXxSAKpq.js";
-import { a as getFileExtension, i as checkTransparency, n as analyzeImageAsync, o as isColorDark, r as analyzeImageData, t as analyzeImage } from "../general-D-7dwhuF.js";
+import { getFileExtension, isColorDark } from "./general.js";
+import { t as clsx } from "../utilities-lwX686oD.js";
 import { cyrb64Hash, randomId, simpleHash } from "./hash.js";
-import { t as clsx } from "../utilities-CPFDXC3B.js";
-export { analyzeImage, analyzeImageAsync, analyzeImageData, arrayMoveMultiple, camelCase, checkTransparency, clsx, clsx$1 as clsxFull, cyrb64Hash, debounce, fixIds, getFileExtension, has, isColorDark, isEmpty, isEqual, isObject, isPlainObject, isString, kebabCase, lowerFirst, pascalCase, randomId, simpleHash, snakeCase, throttle, truncate, truncateEnd, truncateMiddle, unescapeHTML, upperFirst };
+export { arrayMoveMultiple, camelCase, clsx, clsx$1 as clsxFull, cyrb64Hash, debounce, fixIds, getFileExtension, has, isColorDark, isEmpty, isEqual, isObject, isPlainObject, isString, kebabCase, lowerFirst, pascalCase, randomId, simpleHash, snakeCase, throttle, truncate, truncateEnd, truncateMiddle, unescapeHTML, upperFirst };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "7.0.0",
+	"version": "7.2.0",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -67,20 +67,17 @@
 		"@eslint/compat": "^2.0.3",
 		"@react-stately/collections": "^3.12.10",
 		"@stylistic/eslint-plugin": "^5.10.0",
-		"@tailwindcss/vite": "^4.2.1",
-		"@thi.ng/color": "^5.8.16",
-		"@thi.ng/pixel": "^7.5.25",
-		"@thi.ng/pixel-analysis": "^2.0.31",
-		"@thi.ng/pixel-dominant-colors": "^2.0.34",
+		"@tailwindcss/vite": "^4.2.2",
+		"@thi.ng/color": "^5.8.18",
 		"@types/react": "^18.3.28",
 		"@types/react-dom": "^18.3.7",
-		"@vitejs/plugin-react": "^5.2.0",
-		"@wordpress/i18n": "^6.14.0",
+		"@vitejs/plugin-react": "^6.0.1",
+		"@wordpress/i18n": "^6.15.0",
 		"autoprefixer": "^10.4.27",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"css-gradient-parser": "^0.0.18",
-		"eslint": "^10.0.3",
+		"eslint": "^10.1.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-jsdoc": "^62.8.0",
 		"eslint-plugin-prettier": "^5.5.5",
@@ -104,16 +101,16 @@
 		"react-movable": "^3.4.1",
 		"react-stately": "^3.45.0",
 		"svg-to-jsx-string": "^0.1.1",
-		"tailwindcss": "^4.2.1",
+		"tailwindcss": "^4.2.2",
 		"tailwindcss-motion": "^1.1.1",
 		"tailwindcss-react-aria-components": "^2.0.1",
-		"vite": "^8.0.0",
+		"vite": "^8.0.2",
 		"vite-plugin-lib-inject-css": "^2.2.2"
 	},
 	"dependencies": {
-		"@fontsource-variable/geist": "^5.2.8",
-		"@fontsource-variable/geist-mono": "^5.2.7",
 		"@fontsource-variable/google-sans-flex": "^5.2.1",
+		"@fontsource/geist": "^5.2.8",
+		"@fontsource/geist-mono": "^5.2.7",
 		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "^7.0.1",
 		"motion": "^12.38.0"