@orangelogic/design-system 4.3.0 → 4.5.0

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/header/header.d.ts

@@ -91,6 +91,8 @@ export default class CxHeader extends CortexElement {
      */
     handleCMS5PageReady(): void;
     private handleWindowResize;
+    /** Reads the current breakpoints from CSS and derives the active device. */
+    private syncDeviceType;
     private handleClick;
     getAnchorID(): string;
     /**

package/library/packages/atoms/src/components/image/image.d.ts

@@ -69,6 +69,10 @@ export default class CxImage extends ResizableElement {
      * The path to the image to load.
      */
     src: string;
+    /** Intrinsic width / height used to reserve space while loading with Height Auto.
+     * @defaultValue 0
+     */
+    aspectRatio: number;
     /**
      * Candidate sources for the underlying `<img>`, as a standard `srcset` value
      * (e.g. `"…/re_w_400/img.jpg 400w, …/re_w_800/img.jpg 800w"`).
@@ -179,6 +183,18 @@ export default class CxImage extends ResizableElement {
         'highlightable-item': boolean;
         'highlightable-item--effect-text-reveal': boolean;
     };
+    protected get currentAspectRatio(): number;
+    private get loadingAspectRatio();
+    getHighlighterClass(isError?: boolean): {
+        'highlighter--loading-ratio': boolean;
+        highlighter: boolean;
+        'highlighter--background': boolean;
+        'highlighter--border': boolean;
+        'highlighter--centered': boolean;
+        'highlighter--color-overlay': boolean;
+        'highlighter--drop-shadow': boolean;
+        'highlighter--opacity': boolean;
+    };
     get imageClass(): {
         [x: string]: boolean;
         image: boolean;

package/library/packages/atoms/src/components/video/video.d.ts

@@ -155,6 +155,11 @@ export default class CxVideo extends ResizableElement {
     protected removeVideoEventListeners(): void;
     attachSeekbar(): void;
     private applyBigPlayButtonVisibility;
+    /**
+     * Keeps the big play button centered in the visible video content rather than
+     * the full player when object-fit leaves empty space around the video.
+     */
+    private updateBigPlayButtonPosition;
     protected setupVideoJsPlayer(src?: string): Promise<void>;
     handleLoopChange(): Promise<void>;
     handleMutedChange(): Promise<void>;
@@ -163,6 +168,7 @@ export default class CxVideo extends ResizableElement {
     handleDisableRemotePlaybackChange(): Promise<void>;
     handleDisableVolumePanelChange(): Promise<void>;
     handleHideBigPlayButtonChange(): Promise<void>;
+    handleVideoPlacementChange(): void;
     handlePosterChange(): Promise<void>;
     handleFormattedPosterChange(): Promise<void>;
     handleSrcChange(): Promise<void>;

package/library/packages/events/src/cx-asset-transformation-dialog-confirm.d.ts

@@ -1,6 +1,8 @@
 import { Transformation } from '../../types/src/asset-link-format';
 
 export type CxAssetTransformationDialogConfirmEvent = CustomEvent<{
+    /** Width / height from the applied transformation response, when available. */
+    aspectRatio?: number;
     format: string;
     /** False when the format follows the asset's file extension instead of an explicit pick. */
     manualFormat: boolean;

package/library/packages/molecules/src/icon-picker/icon-picker.d.ts

@@ -175,14 +175,13 @@ export default class CxIconPicker extends CortexElement {
      * re-focuses on a timer), so a focus-driven load would re-fire long after
      * the dropdown closed.
      *
-     * The early return matters too: cx-after-show fires on every open, and
-     * chaining onto the already-settled promise would land a requestUpdate()
-     * a microtask into the open sequence, re-rendering the virtualizer while
-     * cx-select is still animating open with its document mousedown/focusin
-     * listeners armed — which intermittently closed the dropdown right after
-     * it appeared.
+     * The virtualizer waits for the first catalog request to settle before it
+     * mounts. Mounting it with an empty item set can leave its visible range
+     * empty until the user scrolls. The open-state guard also prevents a late
+     * request from mounting the list after the control has already closed.
      */
     private ensureIconsData;
+    private showVirtualizerWhenReady;
     private handleSelectShow;
     private handleSelectHide;
     private handleDropdownShow;

package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts

@@ -212,6 +212,7 @@ export default class CxAssetLinkFormat extends CortexElement {
     /** True when there are transformations beyond the frozen index (i.e. user has added new ones). */
     private get hasUnfrozenTransformations();
     private apiGetTransformAssetLink;
+    private transformRequest?;
     private apiGetCropFocusMode;
     /**
      * The unit of the last applied crop transformation, for the no-asset case only. Reflects
@@ -327,6 +328,11 @@ export default class CxAssetLinkFormat extends CortexElement {
         x: number;
         y: number;
     };
+    /** Captures the current request synchronously; later edits cannot change Save's ratio. */
+    getAppliedAspectRatio(): Promise<number | undefined>;
+    private get transformRequestOptions();
+    private getTransformRequest;
+    private requestTransformAsset;
     setActiveSetting(activeSetting: string): void;
     private freezeTransformations;
     private upsertTransformation;

package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.d.ts

@@ -20,7 +20,7 @@ import { default as CxAssetLinkFormat } from '../asset-link-format/asset-link-fo
  *   `cx-icon-button`. Automatically disabled when `asset-id` is not set.
  *
  * @event cx-asset-transformation-dialog-cancel - Emitted when the user closes or cancels the dialog.
- * @event {{ detail: { format: string; manualFormat: boolean; transformations: Transformation[] } }} cx-asset-transformation-dialog-confirm - Emitted when the user saves, with the resolved proxy id, whether that id was picked by hand rather than derived from the asset extension, and the transformation array.
+ * @event {{ detail: { aspectRatio?: number; format: string; manualFormat: boolean; transformations: Transformation[] } }} cx-asset-transformation-dialog-confirm - Emitted when the user saves, with the applied image ratio, resolved proxy id, whether that id was picked by hand, and the transformation array.
  * @event cx-asset-transformation-dialog-delete - Emitted when the user resets the format to its default and clears the saved transformations via the reset button.
  */
 export default class CxAssetTransformationDialog extends CortexElement {
@@ -91,6 +91,10 @@ export default class CxAssetTransformationDialog extends CortexElement {
     private proxies;
     /** False while the authorization check is in flight or after it confirms no access. */
     private canAccess;
+    private saving;
+    /** Seeds one editing session; subsequent Apply changes belong to the child. */
+    private initialDraft;
+    private editSession;
     /**
      * Whether the author changed anything away from the block's defaults, which is what the
      * Reset control acts on.

package/library/packages/organisms/src/content-builder/blocks/image/image.d.ts

@@ -5,7 +5,7 @@ import { Transformation } from '../../../../../types/src/asset-link-format';
 import { TeamSpace } from '../../../../../types/src/content-builder';
 import { ContentType } from '../../../../../types/src/gallery';
 import { HighlightableElementContentPosition } from '../../../../../types/src/highlightable-element';
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 
 /**
  * @summary Images are wrappers for img elements with built-in lazy loading, skeleton, and fallback support.
@@ -25,7 +25,7 @@ import { TemplateResult } from 'lit';
  * @cssproperty --border-radius - The border-radius of the image.
  * @cssproperty --border - The border of the image.
  *
- * @event cx-load - Emitted when the image has loaded.
+ * @event cx-load - Emitted on each successful image load, including subsequent srcset candidate loads. May fire multiple times for the same block.
  * @event cx-error - Emitted when the image has failed to load.
  * @event cx-image-zoom-open - Emitted when the image zoom is opened.
  * @event cx-image-zoom-close - Emitted when the image zoom is closed.
@@ -96,6 +96,8 @@ export default class CxSbImage extends CxImage {
     manualFormat: boolean;
     /** Whether `formatDarkMode` was picked by hand. See `manualFormat`. */
     manualFormatDarkMode: boolean;
+    /** Saved intrinsic width / height for the dark image. */
+    aspectRatioDarkMode: number;
     /**
      * Asset transformations applied to the image.
      */
@@ -155,6 +157,7 @@ export default class CxSbImage extends CxImage {
      * delivery URL from the `path_*` fields here rather than searching for one.
      */
     fetchedAssetData: Record<string, unknown>;
+    private renderedImageSrc;
     /**
      * Indicates whether the image is currently zoomed.
      */
@@ -221,7 +224,7 @@ export default class CxSbImage extends CxImage {
      * getters key off this single predicate so alt, recordId, transformations and
      * click handlers stay aligned with whichever image is actually being displayed.
      */
-    private get useDarkVariant();
+    get useDarkVariant(): boolean;
     get currentAltValue(): string;
     get currentRecordId(): string;
     get currentSrc(): string;
@@ -274,6 +277,7 @@ export default class CxSbImage extends CxImage {
         image: boolean;
         'image--hidden': boolean;
     };
+    protected get currentAspectRatio(): number;
     /**
      * Whether the image have zoom action.
      */
@@ -302,6 +306,8 @@ export default class CxSbImage extends CxImage {
      */
     handleRecordIdChangeForExtension(): void;
     handleFetchedAssetDataChange(): void;
+    protected update(changedProps: PropertyValues): void;
+    protected handleLoad(event: Event): void;
     /**
      * Support CMS5 click action for the image.
      */
@@ -356,6 +362,7 @@ export default class CxSbImage extends CxImage {
      */
     private recoverExpiredSources;
     private recoverExpiredSource;
+    private get renderedSrc();
     protected renderContent(): TemplateResult;
     render(): TemplateResult;
 }

package/library/packages/organisms/src/content-builder/configs/header.d.ts

@@ -16,7 +16,7 @@ type Attribute = {
 };
 declare const _default: {
     configs: (localize: LocalizeController, options?: ConfigsOptions) => Array<PropertyConfig<Attribute>>;
-    defaultValue: Attribute;
+    defaultValue: Partial<Attribute>;
     stylable: string[];
 };
 export default _default;

package/library/packages/organisms/src/content-builder/configs/image.d.ts

@@ -5,6 +5,8 @@ import { default as CxImage } from '../blocks/image/image';
 type Attribute = {
     'additional-fields': string;
     'alt-source-field': CxImage['altSourceField'];
+    'aspect-ratio': CxImage['aspectRatio'];
+    'aspect-ratio-dark-mode': CxImage['aspectRatioDarkMode'];
     'click-action': CxImage['clickAction'];
     'click-link'?: CxImage['clickLink'];
     'click-page'?: CxImage['clickPage'];

package/library/packages/organisms/src/content-builder/configs-controller.d.ts

@@ -310,6 +310,8 @@ export default class ConfigsController {
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         'additional-fields': string;
         'alt-source-field': import('./blocks/image/image').default["altSourceField"];
+        'aspect-ratio': import('./blocks/image/image').default["aspectRatio"];
+        'aspect-ratio-dark-mode': import('./blocks/image/image').default["aspectRatioDarkMode"];
         'click-action': import('./blocks/image/image').default["clickAction"];
         'click-link'?: import('./blocks/image/image').default["clickLink"];
         'click-page'?: import('./blocks/image/image').default["clickPage"];
@@ -704,6 +706,17 @@ export default class ConfigsController {
         variant: import('../../../types/src/gallery').GalleryVariant;
         width: string;
         'zoom-style': import('../../../types/src/highlightable-element').HighlightableElementZoomStyle;
+    }> | Partial<{
+        alignment: import('../../../types/src/header').Alignment;
+        'custom-line-height': boolean;
+        'data-constraints': boolean;
+        'disabled-copy-button': boolean;
+        'font-size': string;
+        'font-size-desktop': string;
+        'font-size-tablet': string;
+        'has-anchor-link': boolean;
+        role: string;
+        variant: import('../../../types/src/header').Variant;
     }> | {
         name: string;
         'page-id': string;

package/library/packages/organisms/src/content-builder/styleController.d.ts

@@ -55,6 +55,7 @@ export default class StyleController {
             versionLabelKey?: string;
         };
         assetTransformationConfigs?: {
+            aspectRatioKey?: string;
             assetIdKey?: string;
             defaultFormat?: string;
             dialogLabel?: string;
@@ -144,6 +145,7 @@ export default class StyleController {
         multiple?: boolean;
         pickerConfigs?: {
             accepts?: string[];
+            aspectRatioKey?: string;
             defaultFormat?: string;
             multiple?: boolean;
             nameKey?: string;

package/library/packages/organisms/src/form/control-renderer/control-renderer.d.ts

@@ -157,6 +157,12 @@ export declare class ControlRenderer {
      * `cx-asset-transformation-dialog`.
      */
     private resolveAssetFormatSrc;
+    /** Resolves the URL and intrinsic ratio from the same selected media field. */
+    resolveAssetFormat(recordId: string, format: string): Promise<{
+        aspectRatio: number;
+        src: string;
+    }>;
+    private getResolvedImage;
     renderControl({ blockAttributes, container, currentValue, disabled, handleChange, key, label, trait, }: {
         blockAttributes: Record<string, any>;
         container?: Ref<HTMLElement>;

package/library/packages/types/src/content-builder.d.ts

@@ -65,6 +65,8 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
         versionLabelKey?: string;
     };
     assetTransformationConfigs?: {
+        /** Attribute that stores the transformed image's width / height. */
+        aspectRatioKey?: string;
         assetIdKey?: string;
         defaultFormat?: string;
         dialogLabel?: string;
@@ -185,6 +187,8 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
     options?: Option[];
     pickerConfigs?: {
         accepts?: string[];
+        /** Attribute that stores the selected image's width / height. */
+        aspectRatioKey?: string;
         /** The format code used to resolve a preview src immediately after picking an image (before the user configures a format). */
         defaultFormat?: string;
         multiple?: boolean;
@@ -400,8 +404,6 @@ export declare enum DataSourceId {
     TranslatableTexts = "TRANSLATABLE_TEXTS"
 }
 export type ConfigsOptions = {
-    enableAssetFormatControls?: boolean;
-    enableFontFamilyControls?: boolean;
     /**
      * Variants of the font the block's container resolves for it — a font kit's
      * rows. Present means the block sits inside such a container, so its font
@@ -409,6 +411,8 @@ export type ConfigsOptions = {
      * styles, and writes every other option explicitly.
      */
     containerFontVariants?: FontFamily[];
+    enableAssetFormatControls?: boolean;
+    enableFontFamilyControls?: boolean;
 };
 /**
  * Well-known editable sections of a content-builder canvas. The page content is the implicit

package/library/packages/utils/src/custom-element/i18n.d.ts

@@ -1038,6 +1038,7 @@ export interface Translation extends DefaultTranslation {
     specialCharacters: string;
     specialCharactersEmpty: string;
     specificWidthInPixelsOrPercentage: string;
+    specifiedWidthAsPercentageOfContainer: string;
     specifiedWidthInPixels: string;
     speed: string;
     spellcheck: string;

package/library/packages/utils/src/responsive/responsive.d.ts

@@ -1,5 +1,6 @@
 import { DeviceType } from '../../../types/src/content-builder';
 
+export declare const DEFAULT_BREAKPOINTS: [number, number, number];
 /**
  * Extracts breakpoints from CSS custom properties with fallback to default values.
  *

package/library/react-web-component.d.ts

@@ -2914,6 +2914,10 @@
           * The path to the image to load.
         */
         src?: string;
+        /**
+          * Intrinsic width / height used to reserve space while loading with Height Auto. <br/>@defaultValue 0
+        */
+        aspectRatio?: number;
         /**
           * Candidate sources for the underlying `img`, as a standard `srcset` value (e.g. `"…/re_w_400/img.jpg 400w, …/re_w_800/img.jpg 800w"`). <br/> Lets the browser fetch and decode only the pixels the layout needs, which is what bounds memory on image-heavy pages — a large original decodes to `naturalWidth × naturalHeight × 4` bytes regardless of its display size. Pair with `sizes`; without it the browser assumes the image is `100vw` wide.
         */

package/library/utils.js

@@ -3,7 +3,7 @@ import { R as Et, f as It, g as Lt, h as Ft, U as Rt, a as Ot, d as vt, c as bt,
 import { e as Yt, f as Pt, g as Wt, c as Xt, i as Ht, a as Bt, d as Gt, m as $t, b as zt, r as qt, t as Qt } from "./chunks/toast.D3AW3RWv.js";
 import { e as Zt, a as Jt, f as Kt, g as te, d as ee, b as re, c as ae, i as se, p as oe, s as ne } from "./chunks/browser.BHOCIF_A.js";
 import { k as le, e as ce, m as ue, H as fe, R as me, d as he, o as ge, g as de, f as pe, n as De, h as Te, l as Se, i as we, p as Me, j as ye } from "./chunks/color.CIHdfM_a.js";
-import { a as Ae, g as xe } from "./chunks/active-elements.jTVWtBDp.js";
+import { a as Ce, g as xe } from "./chunks/active-elements.jTVWtBDp.js";
 import { a as Ie, p as Le, c as Fe, b as Re, s as Oe, w as ve } from "./chunks/event.BeKOsirN.js";
 import { t as Ve } from "./chunks/converters.DkDtLstb.js";
 import { c as ke } from "./chunks/custom-element.L4WJXn1j.js";
@@ -13,12 +13,12 @@ import { d as Xe } from "./chunks/drag.DenOh3AE.js";
 import { f as Be } from "./chunks/focus-when-visible.jWSw9ks0.js";
 import { f as U } from "./chunks/form.LpappO1d.js";
 import { F as $e, c as ze, g as qe, v as Qe, a as je } from "./chunks/form.LpappO1d.js";
-import { L as Je, r as Ke } from "./chunks/i18n.Q5_2aVLU.js";
+import { L as Je, r as Ke } from "./chunks/i18n.BSPmBQ73.js";
 import { c as er, q as rr } from "./chunks/math.DuKzLacZ.js";
 import { g as sr } from "./chunks/modal.Ct0bJBSe.js";
 import { g as nr, l as ir, s as lr, u as cr } from "./chunks/scroll.xtO5yojm.js";
-import { k as C } from "./chunks/dom.D0lSUoEI.js";
-import { c as fr, d as mr, h as hr, m as gr, a as dr, g as pr, j as Dr, b as Tr, f as Sr, i as wr, e as Mr, l as yr, r as Cr, s as Ar } from "./chunks/dom.D0lSUoEI.js";
+import { k as A } from "./chunks/dom.D0lSUoEI.js";
+import { c as fr, d as mr, h as hr, m as gr, a as dr, g as pr, j as Dr, b as Tr, f as Sr, i as wr, e as Mr, l as yr, r as Ar, s as Cr } from "./chunks/dom.D0lSUoEI.js";
 import { H as Er, a as Ir, g as Lr } from "./chunks/slot.j5oheLJC.js";
 import { a as Rr, g as Or } from "./chunks/tabbable.BwnZBHrm.js";
 import { i as br } from "./chunks/user-agent.D9aPuOyL.js";
@@ -27,20 +27,20 @@ import { C as Nr } from "./chunks/calendar-grid.BWjcZL5W.js";
 import { b as Yr, c as Pr, f as Wr, h as Xr, g as Hr, a as Br, i as Gr, d as $r, n as zr, e as qr, p as Qr, t as jr } from "./chunks/date.iWq_pkIk.js";
 import { f as c, a as u, D as f } from "./chunks/date-picker.BGHn6qg8.js";
 import { A as Jr, g as Kr, j as ta, O as ea, S as ra, a as aa, h as sa, b as oa, e as na, d as ia, f as la, i as ca, k as ua, p as fa, r as ma, c as ha } from "./chunks/transformation.Dm-pK2ft.js";
-import { M as da, c as pa, e as Da, i as Ta, n as Sa, p as wa, b as Ma, s as ya, d as Ca } from "./chunks/gradient.CIzq8fOU.js";
+import { M as da, c as pa, e as Da, i as Ta, n as Sa, p as wa, b as Ma, s as ya, d as Aa } from "./chunks/gradient.CIzq8fOU.js";
 import { c as xa, f as Ea, e as Ia, b as La, g as Fa, d as Ra, i as Oa, r as va, a as ba } from "./chunks/image.Y5c_hFx8.js";
 import { b as _a, e as ka } from "./chunks/waveform.1U9U_0rd.js";
 import { c as Ua, b as Ya, a as Pa, e as Wa, d as Xa, f as Ha, g as Ba, r as Ga, s as $a } from "./chunks/number.Cx2ncfJJ.js";
 import { s as qa } from "./chunks/parse.Cu5nBDTb.js";
-import { g as ja, a as Za } from "./chunks/responsive.BmBJSzC4.js";
-import { b as Ka, n as ts, d as es, e as rs, f as as, y as ss, o as os, g as ns, h as is, l as ls, p as cs, z as us, x as fs, a as ms, c as hs, s as gs, w as ds, r as ps, t as Ds, q as Ts, v as Ss, i as ws, m as Ms, u as ys } from "./chunks/string.CfI2ejyR.js";
-import { g as As, a as xs } from "./chunks/template.ClovJacp.js";
-import { c as Is, f as Ls, a as Fs, g as Rs } from "./chunks/time.DYWuX2id.js";
+import { D as ja, g as Za, a as Ja } from "./chunks/responsive.DqF_v1XY.js";
+import { b as ts, n as es, d as rs, e as as, f as ss, y as os, o as ns, g as is, h as ls, l as cs, p as us, z as fs, x as ms, a as hs, c as gs, s as ds, w as ps, r as Ds, t as Ts, q as Ss, v as ws, i as Ms, m as ys, u as As } from "./chunks/string.CfI2ejyR.js";
+import { g as xs, a as Es } from "./chunks/template.ClovJacp.js";
+import { c as Ls, f as Fs, a as Rs, g as Os } from "./chunks/time.DYWuX2id.js";
 function n(t) {
   const e = t.getFullYear(), r = String(t.getMonth() + 1).padStart(2, "0"), a = String(t.getDate()).padStart(2, "0");
   return `${e}-${r}-${a}`;
 }
-function A(t) {
+function C(t) {
   const e = String(t.getHours()).padStart(2, "0"), r = String(t.getMinutes()).padStart(2, "0"), a = String(t.getSeconds()).padStart(2, "0");
   return `${e}:${r}:${a}`;
 }
@@ -88,9 +88,9 @@ class Z {
         const s = new Date(r.getTime() - 18e5);
         return {
           fromDate: n(s),
-          fromTime: A(s),
+          fromTime: C(s),
           toDate: a,
-          toTime: A(r)
+          toTime: C(r)
         };
       }
       case c.today:
@@ -291,14 +291,14 @@ function at(t, e) {
 }
 class st {
   constructor(e) {
-    this.currentZIndex = C(), (this.host = e).addController(this);
+    this.currentZIndex = A(), (this.host = e).addController(this);
   }
   hostConnected() {
   }
   hostDisconnected() {
   }
   async activatePopup() {
-    this.currentZIndex = C();
+    this.currentZIndex = A();
   }
 }
 class ot {
@@ -587,7 +587,7 @@ async function* yt({
   } catch {
   }
 }
-function Ct({
+function At({
   duration: t,
   frameWidth: e,
   playbackSpeed: r,
@@ -604,6 +604,7 @@ export {
   Nr as CalendarGrid,
   ce as ColorType,
   st as CortexPopupController,
+  ja as DEFAULT_BREAKPOINTS,
   Z as DateRangePresets,
   ot as DragScroll,
   $e as FormControlController,
@@ -623,7 +624,7 @@ export {
   Lt as URL_INTRANET_DOMAIN_VALIDATION_REGEX,
   Ft as URL_PROTOCOL_VALIDATION_REGEX,
   Rt as URL_VALIDATION_REGEX,
-  Ae as activeElements,
+  Ce as activeElements,
   Yr as addMonths,
   Yt as adjustRelativeValues,
   Ie as animateTo,
@@ -638,7 +639,7 @@ export {
   xa as calculateAspectRatioFit,
   er as clamp,
   Ea as cleanImageFileName,
-  Is as clearZeroDurationParts,
+  Ls as clearZeroDurationParts,
   he as convertColor,
   Ua as convertDataUnits,
   Ya as convertDurationToMilliseconds,
@@ -653,12 +654,12 @@ export {
   Pe as defaultValue,
   at as downloadAsset,
   Xe as drag,
-  Ka as emptyToSpace,
-  ts as escapeXML,
+  ts as emptyToSpace,
+  es as escapeXML,
   ge as extractColor,
-  es as extractExtension,
+  rs as extractExtension,
   yt as extractFrames,
-  rs as extractRootData,
+  as as extractRootData,
   Wa as extractValueAndUnit,
   ka as extractWaveformPeaks,
   la as fetchCortexApi,
@@ -671,47 +672,47 @@ export {
   U as formCollections,
   Xa as formatAspectRatioString,
   de as formatColorCodeSeparator,
-  Ls as formatDurationPartsManually,
+  Fs as formatDurationPartsManually,
   pe as formatHexCode,
   Pr as formatIsoToDisplay,
   Wr as formatMonthYearLabel,
   Ha as formatNumberWithGrouping,
-  as as formatSecondsToTime,
-  ss as formatTimeToSeconds,
-  Fs as formatWithIntlDurationFormat,
+  ss as formatSecondsToTime,
+  os as formatTimeToSeconds,
+  Rs as formatWithIntlDurationFormat,
   Ba as gcd,
   mr as getActiveElement,
   sr as getActiveModals,
   qe as getAssociatedForm,
   hr as getAttributes,
-  os as getAttributesString,
-  ja as getBreakpointsFromCSS,
+  ns as getAttributesString,
+  Za as getBreakpointsFromCSS,
   ut as getBrowserFontVariants,
   De as getColorType,
   Fa as getContainedImageSize,
   gr as getCortexPopupLayer,
-  C as getCurrentZIndex,
+  A as getCurrentZIndex,
   Xr as getDateMask,
   xe as getDeepestActiveElement,
-  Za as getDeviceType,
-  Rs as getDurationPartsByUnitsFormat,
+  Ja as getDeviceType,
+  Os as getDurationPartsByUnitsFormat,
   dr as getElementFromHTMLString,
   pr as getElementFromTemplate,
   Hr as getFirstDayOfWeek,
   lt as getFontFamilyOptionValue,
   ft as getFontFamilyVariants,
   X as getFormControls,
-  As as getHighlightedTitle,
-  xs as getHighlightedTitleHtml,
+  xs as getHighlightedTitle,
+  Es as getHighlightedTitleHtml,
   Ir as getInnerHTML,
-  Ct as getInterval,
+  At as getInterval,
   Te as getLightDarkCssString,
   Ra as getNaturalWidthHeight,
   Dr as getNeededPaddingForBoxShadow,
   te as getNextAncestor,
   nr as getOffset,
   Tr as getRelativeClickPercentage,
-  ns as getRootIDString,
+  is as getRootIDString,
   Rr as getTabbableBoundary,
   Or as getTabbableElements,
   Lr as getTextContent,
@@ -719,7 +720,7 @@ export {
   it as getTypefaceOptionValue,
   Wt as groupBy,
   ca as hasTransformSegment,
-  is as htmlToPlainText,
+  ls as htmlToPlainText,
   Xt as insertAtIndex,
   Mt as insertFrameToCache,
   Ht as insertMultipleAtIndex,
@@ -732,7 +733,7 @@ export {
   re as isFirefox,
   ct as isFontFamilyAvailable,
   ht as isFormInteracted,
-  ls as isGalleryItemCardType,
+  cs as isGalleryItemCardType,
   Ta as isGradientString,
   ae as isIOS,
   Mr as isInElement,
@@ -756,8 +757,8 @@ export {
   K as openAssetOverview,
   tt as openFolderOverview,
   et as openLink,
-  cs as padPath,
-  us as parseBooleanString,
+  us as padPath,
+  fs as parseBooleanString,
   we as parseBorder,
   qr as parseDisplayToIso,
   Le as parseDuration,
@@ -775,8 +776,8 @@ export {
   rr as quantizeLargestRemainder,
   Y as quoteFontFamily,
   St as readLocalStorageValue,
-  Cr as readSearchConsistency,
-  fs as reducePathToDirectChild,
+  Ar as readSearchConsistency,
+  ms as reducePathToDirectChild,
   Ke as registerTranslation,
   zt as removeAtIndex,
   qt as removeMultipleAtIndex,
@@ -786,38 +787,38 @@ export {
   _t as resolveSpaceUrl,
   Ga as rotateBox,
   ba as rotateImage,
-  ms as safeExtension,
-  hs as safeString,
-  gs as sanitizeHTML,
+  hs as safeExtension,
+  gs as safeString,
+  ds as sanitizeHTML,
   $a as sanitizeRotation,
   lr as scrollIntoView,
   mt as serialize,
   Ma as serializeGradient,
   rt as shareAsset,
   Re as shimKeyframesHeightAuto,
-  Ar as sortByTopPosition,
+  Cr as sortByTopPosition,
   ya as sortStops,
   _ as sortTypefaceVariants,
   qa as splitBoxValues,
-  ds as splitCamelCaseFormatted,
-  Ca as splitTopLevel,
+  ps as splitCamelCaseFormatted,
+  Aa as splitTopLevel,
   Oe as stopAnimations,
   ne as supportHLS,
   V as testFontAvailability,
   Ve as timecodeConverter,
-  ps as toCamelCase,
+  Ds as toCamelCase,
   jr as toIsoDate,
-  Ds as toKebabCase,
-  Ts as toPascalCase,
+  Ts as toKebabCase,
+  Ss as toPascalCase,
   kt as toRelativeUrl,
-  Ss as toTitleCase,
+  ws as toTitleCase,
   Nt as toUrlPathKey,
   Qt as toast,
-  ws as truncateTextMiddle,
-  Ms as unescapeXML,
+  Ms as truncateTextMiddle,
+  ys as unescapeXML,
   cr as unlockBodyScrolling,
   P as unquoteFontFamily,
-  ys as upperFirst,
+  As as upperFirst,
   Qe as validValidityState,
   je as valueMissingValidityState,
   ve as waitForEvent,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {