@eightshift/ui-components 3.0.1 → 5.0.0

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

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

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

@@ -1,299 +0,0 @@
-/*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
-.edit-post-header__toolbar .components-button, .edit-post-header__settings .components-button, .editor-document-tools__left .components-button, .editor-header__center .components-button, .editor-header__settings .components-button, .edit-post-sidebar .components-button:not(.components-panel__body-toggle, .editor-post-last-revision__title), .components-snackbar, .components-toggle-group-control, .editor-post-publish-panel .components-button, .edit-post-text-editor__toolbar .components-button, .edit-post-text-editor__body .components-textarea-control__input, .media-modal-content, .media-modal-content .components-button, .components-guide__container .components-button, .components-notice__content .components-button, .editor-post-featured-image__toggle.components-button {
-  border-radius: var(--es-radius-md, .375rem) !important;
-}
-
-.components-input-control__container, .components-combobox-control__suggestions-container, .components-checkbox-control__input, button.components-toggle-group-control-option-base, .editor-post-visibility__password-input {
-  border-radius: .25rem !important;
-}
-
-.components-button-group .components-button:first-child {
-  border-top-left-radius: var(--es-radius-md, .375rem) !important;
-  border-bottom-left-radius: var(--es-radius-md, .375rem) !important;
-}
-
-.components-button-group .components-button:last-child {
-  border-top-right-radius: var(--es-radius-md, .375rem) !important;
-  border-bottom-right-radius: var(--es-radius-md, .375rem) !important;
-}
-
-.components-popover__content, .components-guide {
-  border-radius: var(--es-radius-lg, .5rem) !important;
-}
-
-.block-editor-inserter__search {
-  border-top-left-radius: var(--es-radius-lg, .5rem) !important;
-  border-top-right-radius: var(--es-radius-lg, .5rem) !important;
-}
-
-.media-menu-item.active {
-  border-top-left-radius: var(--es-radius-md, .375rem) !important;
-  border-top-right-radius: var(--es-radius-md, .375rem) !important;
-}
-
-.components-base-control__label, .components-input-control__label, .components-custom-select-control__label {
-  --tw-font-weight: var(--es-font-weight-normal, 400) !important;
-  font-size: 13px !important;
-  font-weight: var(--es-font-weight-normal, 400) !important;
-  --tw-tracking: var(--es-tracking-normal, 0em) !important;
-  letter-spacing: var(--es-tracking-normal, 0em) !important;
-  text-transform: none !important;
-}
-
-.edit-post-sidebar, .interface-interface-skeleton__sidebar:not(:empty) > .interface-complementary-area__fill[style="width: 280px;"], .interface-complementary-area.editor-sidebar {
-  width: calc(var(--es-spacing, .25rem) * 80) !important;
-}
-
-.block-editor-block-list__block-crash-warning {
-  border-radius: var(--es-radius-lg, .5rem) !important;
-  border-color: color-mix(in oklab, var(--es-color-red-700, oklch(.505 .213 27.518)) 15%, transparent) !important;
-  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a) !important;
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
-  --tw-shadow-color: color-mix(in oklab, var(--es-color-red-700, oklch(.505 .213 27.518)) 10%, transparent) !important;
-}
-
-.block-editor-block-list__block-crash-warning .block-editor-warning__message {
-  color: var(--es-color-red-950, oklch(.258 .092 26.042)) !important;
-}
-
-.wp-block-missing div.block-editor-warning {
-  border-radius: var(--es-radius-lg, .5rem) !important;
-  border-color: var(--es-color-zinc-300, oklch(.871 .006 286.286)) !important;
-  background-color: color-mix(in oklab, var(--es-color-zinc-50, oklch(.985 0 0)) 75%, transparent) !important;
-  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a) !important;
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
-  --tw-shadow-color: color-mix(in oklab, var(--es-color-zinc-700, oklch(.37 .013 285.805)) 20%, transparent) !important;
-}
-
-.wp-block-missing div.block-editor-warning .block-editor-warning__message {
-  color: var(--es-color-zinc-950, oklch(.141 .005 285.823)) !important;
-}
-
-.block-editor-block-contextual-toolbar, .block-editor-block-parent-selector__button {
-  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  border-radius: var(--es-radius-lg, .5rem) !important;
-}
-
-.block-editor-block-types-list .block-editor-block-types-list__item {
-  border-radius: var(--es-radius-lg, .5rem) !important;
-}
-
-.block-editor-block-types-list .block-editor-block-types-list__item:after {
-  content: var(--tw-content);
-  border-radius: var(--es-radius-lg, .5rem) !important;
-}
-
-.block-editor-block-types-list .block-editor-block-types-list__item svg {
-  --tw-scale-x: 125%;
-  --tw-scale-y: 125%;
-  --tw-scale-z: 125%;
-  scale: var(--tw-scale-x) var(--tw-scale-y);
-}
-
-.block-editor-list-view-tree .block-editor-block-icon {
-  border-radius: .25rem !important;
-}
-
-.block-editor-list-view-tree .block-editor-list-view-leaf > :first-child {
-  border-top-left-radius: var(--es-radius-lg, .5rem) !important;
-  border-bottom-left-radius: var(--es-radius-lg, .5rem) !important;
-}
-
-.block-editor-list-view-tree .block-editor-list-view-leaf > :last-child {
-  border-top-right-radius: var(--es-radius-lg, .5rem) !important;
-  border-bottom-right-radius: var(--es-radius-lg, .5rem) !important;
-}
-
-.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon {
-  border-radius: .25rem !important;
-}
-
-.block-editor-inserter__toggle {
-  border-radius: var(--es-radius-md, .375rem) !important;
-}
-
-:is(.edit-post-header__toolbar, .edit-post-header__settings, .editor-document-tools__left, .editor-header__center, .editor-header__settings) .components-button {
-  min-height: calc(var(--es-spacing, .25rem) * 9) !important;
-  min-width: calc(var(--es-spacing, .25rem) * 9) !important;
-}
-
-.editor-styles-wrapper .wp-block:not(.editor-post-title, .block-list-appender) {
-  max-width: 100% !important;
-}
-
-.components-tooltip {
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--es-color-gray-800, oklch(.278 .033 256.848));
-  background-color: color-mix(in oklab, var(--es-color-gray-950, oklch(.13 .028 261.692)) 70%, transparent);
-  padding-inline: calc(var(--es-spacing, .25rem) * 1);
-  padding-block: calc(var(--es-spacing, .25rem) * .5);
-  color: var(--es-color-white, #fff);
-  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  --tw-backdrop-blur: blur(var(--es-blur-xl, 24px));
-  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  --tw-backdrop-brightness: brightness(105%);
-  --tw-backdrop-saturate: saturate(150%);
-  border-radius: var(--es-radius-md, .375rem) !important;
-}
-
-.components-tooltip:has( > :first-child) {
-  border-color: var(--es-color-gray-200, oklch(.928 .006 264.531));
-  background-color: color-mix(in oklab, var(--es-color-white, #fff) 80%, transparent);
-  color: var(--es-color-gray-700, oklch(.373 .034 259.733));
-}
-
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-content {
-  syntax: "*";
-  inherits: false;
-  initial-value: "";
-}
-
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false
-}

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

@@ -1,105 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { useState, useEffect } from "react";
-/**
- * Component that allows animating the visibility of its children.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {boolean} props.visible - Whether the content should be visible
- * @param {string} props.className - Classes to pass to the element wrapper.
- * @param {boolean} [props.noInitial=false] - If `true`, the animation when the component is first mounted is disabled.
- * @param {boolean} [props.noExitAnimation=false] - If `true`, the exit animation is not played.
- * @param {boolean} [props.noEnterAnimation=false] - If `true`, the entrance animation is not played.
- * @param {ElementTransition} [props.transition='slideFade'] - The transition to use when showing/hiding the content.
- *
- * @returns {JSX.Element} The AnimatedVisibility component.
- *
- * @typedef {'fade' | 'slideFade' |'scaleFade' | 'scaleRotateFade' | 'slideFadeUpSlight' | 'slideFadeDownSlight' | 'slideInFadeOut' | 'scaleSlideFade'} ElementTransition
- *
- * @example
- * const [visible, setVisible] = useState(false);
- *
- * <AnimatedVisibility visible={visible}>
- * 	<div>Content</div>
- * </AnimatedVisibility>
- *
- * @preserve
- */
-const AnimatedVisibility = (props) => {
-  const { visible, className, children, noInitial = false, transition = "slideFade", noExitAnimation, noEnterAnimation, ...other } = props;
-  const [isVisibleInner, setIsVisibleInner] = useState(false);
-  const [canAnimate, setCanAnimate] = useState(true);
-  useEffect(() => {
-    if (visible) {
-      setIsVisibleInner(true);
-    }
-    if (!visible && noExitAnimation) {
-      setIsVisibleInner(false);
-    }
-  }, [visible]);
-  useEffect(() => {
-    if (noInitial && visible) {
-      setCanAnimate(false);
-    }
-  }, []);
-  const transitions = {
-    fade: {
-      inClassName: "es:motion-opacity-in es:motion-duration-300",
-      outClassName: "es:motion-opacity-out es:motion-duration-200"
-    },
-    slideFade: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
-    },
-    slideInFadeOut: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-opacity-out es:motion-duration-200"
-    },
-    slideFadeUpSlight: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[0.25rem] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[0.25rem] es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
-    },
-    slideFadeDownSlight: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-0.25rem] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[-0.25rem] es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
-    },
-    scaleFade: {
-      inClassName: "es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
-    },
-    scaleSlideFade: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
-    },
-    scaleRotateFade: {
-      inClassName: "es:motion-rotate-in es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-rotate-out es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
-    }
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: isVisibleInner && /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        !noEnterAnimation && visible && noInitial && visible && canAnimate && transitions[transition].inClassName,
-        !noEnterAnimation && visible && !noInitial && transitions[transition].inClassName,
-        !noExitAnimation && !visible && transitions[transition].outClassName,
-        "es:fill-mode-forwards",
-        className
-      ),
-      onAnimationEnd: () => {
-        if (visible === false) {
-          setIsVisibleInner(false);
-        }
-        if (!canAnimate) {
-          setCanAnimate(true);
-        }
-      },
-      ...other,
-      children
-    }
-  ) });
-};
-export {
-  AnimatedVisibility
-};

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

@@ -1,86 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-DVSAPY-K.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-/**
- * Component that allows wrapping components with a common layout that includes a label and optional icon, subtitle, actions, and help text.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display in the label.
- * @param {string} props.label - Label to display.
- * @param {string} props.subtitle - Subtitle to display below the label.
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
- * @param {string} [props.help] - Help text to show below the component.
- * @param {boolean} [props.inline] - If `true`, the component is displayed inline - icon/label/subtitle are on the left, the passed content is on the right. **Note:** not compatible with `actions`.
- * @param {string} [props.className] - Classes to pass to the main element wrapper.
- * @param {string} [props.controlContainerClassName] - Classes to pass to the control container.
- * @param {string} [props.labelContainerClassName] - Classes to pass to the label container.
- * @param {string} [props.labelClassName] - Classes to pass to the label.
- * @param {boolean} [props.fullWidthLabel] - If `true`, the label expands to fill up the whole width, instead of taking up only the space it needs.
- * @param {JSX.Element} [props.labelAs] - If provided, the label (includes icon and subtitle) will be rendered as this element.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The BaseControl component.
- *
- * @example
- * <BaseControl label='My component' icon={icons.myIcon}>
- * 	<div>Content</div>
- * </BaseControl>
- *
- * @preserve
- */
-const BaseControl = (props) => {
-  const {
-    icon,
-    label,
-    subtitle,
-    actions,
-    help,
-    children,
-    inline,
-    className,
-    controlContainerClassName,
-    labelContainerClassName,
-    labelClassName,
-    fullWidthLabel,
-    labelAs,
-    hidden
-  } = props;
-  if (!children || hidden) {
-    return null;
-  }
-  if (!(label || icon || subtitle)) {
-    return children;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es:space-y-1", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-1", !inline && !icon && "es:pb-0.5", labelContainerClassName), children: [
-      (label || icon || subtitle) && /* @__PURE__ */ jsx(
-        RichLabel,
-        {
-          icon,
-          label,
-          subtitle,
-          fullWidth: fullWidthLabel,
-          as: labelAs,
-          className: labelClassName
-        }
-      ),
-      inline && /* @__PURE__ */ jsx("div", { className: clsx("es:ml-auto es:flex es:items-center es:gap-1", controlContainerClassName), children }),
-      !inline && actions && /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:items-center es:gap-1", !inline && "es:ml-auto"), children: actions })
-    ] }),
-    !inline && Array.isArray(children) && children.filter(Boolean).length > 1 && /* @__PURE__ */ jsx("div", { className: clsx("es:space-y-1", controlContainerClassName), children }),
-    !inline && (!Array.isArray(children) || children.filter(Boolean).length < 2) && children,
-    help && /* @__PURE__ */ jsx(
-      $514c0188e459b4c0$export$5f1af8db9871e1d6,
-      {
-        className: "es:inline-block es:text-sm es:text-secondary-500",
-        slot: "description",
-        children: help
-      }
-    )
-  ] });
-};
-export {
-  BaseControl
-};

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

@@ -1,161 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { upperFirst } from "../../utilities/es-dash.js";
-/**
- * Component that renders a preview of the breakpoints to help users visualize the options they set.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {Object[]} [props.blocks] - Blocks to display.
- * @param {string} [props.blocks[].width] - Current breakpoint width. Left-aligned with the block.
- * @param {string} [props.blocks[].widthEnd] - Current breakpoint width. Right-aligned with the block.
- * @param {string} [props.blocks[].breakpoint] - Breakpoint name.
- * @param {string} [props.blocks[].value] - Current value at the breakpoint.
- * @param {boolean} [props.blocks[].dotsStart=false] - If `true`, dots are displayed at the start of the block.
- * @param {boolean} [props.blocks[].dotsEnd=false] - If `true`, dots are displayed at the end of the block.
- * @param {boolean} [props.blocks[].active=false] - If `true`, the block is active.
- * @param {boolean} [props.blocks[].alignEnd=false] - If `true`, the block is aligned to the end.
- * @param {BreakpointColor} [props.blocks[].color] - Color of the block.
- * @param {boolean} [props.dotsStart=false] - If `true`, dots are displayed at the start of the preview.
- * @param {boolean} [props.dotsEnd=false] - If `true`, dots are displayed at the end of the preview.
- *  *
- * @returns {JSX.Element} The BreakpointPreview component.
- *
- * @typedef {'blue' | 'green' | 'yellow' | 'red' | 'indigo' | 'orange' | 'cyan' | 'teal' | 'fuchsia' | 'black' | 'default'} BreakpointColor
- *
- * @example
- * <BreakpointPreview
- * 		blocks={[
- * 			{
- * 				breakpoint: 'Mobile',
- * 				widthEnd: '480px',
- * 				value: 'Regular',
- * 				dotsStart: true,
- * 				alignEnd: true,
- * 				active: true,
- * 			},
- * 			{
- * 				breakpoint: 'Default',
- * 				value: 'Small',
- * 				dotsEnd: true,
- * 			},
- * 		]}
- * />
- *
- * @preserve
- */
-const BreakpointPreview = (props) => {
-  const { blocks: rawBlocks, dotsStart = false, dotsEnd = false } = props;
-  const blocks = rawBlocks.filter(Boolean);
-  if (!blocks || blocks.length < 1) {
-    return null;
-  }
-  const hasActive = (blocks == null ? void 0 : blocks.some(({ active }) => active)) ?? false;
-  const activeColors = {
-    blue: {
-      text: "es:text-blue-500",
-      bg: "es:bg-blue-500"
-    },
-    green: {
-      text: "es:text-lime-500",
-      bg: "es:bg-lime-500"
-    },
-    yellow: {
-      text: "es:text-yellow-400",
-      bg: "es:bg-yellow-400"
-    },
-    red: {
-      text: "es:text-red-500",
-      bg: "es:bg-red-500"
-    },
-    indigo: {
-      text: "es:text-indigo-500",
-      bg: "es:bg-indigo-500"
-    },
-    orange: {
-      text: "es:text-orange-500",
-      bg: "es:bg-orange-500"
-    },
-    cyan: {
-      text: "es:text-cyan-500",
-      bg: "es:bg-cyan-500"
-    },
-    teal: {
-      text: "es:text-accent-500",
-      bg: "es:bg-accent-500"
-    },
-    fuchsia: {
-      text: "es:text-fuchsia-500",
-      bg: "es:bg-fuchsia-500"
-    },
-    black: {
-      text: "es:text-black",
-      bg: "es:bg-black"
-    },
-    default: {
-      text: "es:text-secondary-600",
-      bg: "es:bg-secondary-600"
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es:mx-auto es:grid es:w-fit es:shrink-0 es:auto-cols-auto es:grid-rows-[auto_auto] es:gap-x-2 es:gap-y-0.5"), children: [
-    dotsStart && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "es:row-start-1 es:flex es:shrink-0 es:translate-x-1 es:items-center es:gap-1 es:justify-self-end es:text-secondary-400", children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-0.5 es:text-secondary-300", children: [
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "es:row-start-2 es:size-px es:justify-self-end" })
-    ] }),
-    blocks.map(({ width, widthEnd, breakpoint, value, dotsStart: dotsStart2 = false, dotsEnd: dotsEnd2 = false, active = false, alignEnd = false, color }, i) => {
-      var _a, _b;
-      const activeTextColor = ((_a = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _a.text) ?? activeColors.default.text;
-      const activeBgColor = ((_b = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _b.bg) ?? activeColors.default.bg;
-      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "es:row-start-1 es:flex es:min-w-28 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400", children: [
-          dotsStart2 && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "text-secondary-300"), children: [
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
-          ] }),
-          width && /* @__PURE__ */ jsx("span", { children: width }),
-          /* @__PURE__ */ jsx("div", { className: clsx("es:grow es:rounded", active ? "es:h-0.5" : "es:h-px es:bg-secondary-300", active && activeBgColor) }),
-          widthEnd && /* @__PURE__ */ jsx("span", { children: widthEnd }),
-          dotsEnd2 && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "es:text-secondary-300"), children: [
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "es:row-start-2 es:flex es:w-full es:min-w-28 es:flex-col es:items-start es:gap-1", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: clsx(
-                "es:rounded es:px-1 es:py-0.5",
-                hasActive && active && "es:text-white",
-                hasActive && active && activeBgColor,
-                hasActive && !active && "es:bg-secondary-200 es:text-secondary-500",
-                !hasActive && "es:bg-secondary-600 es:text-white",
-                alignEnd && "es:ml-auto"
-              ),
-              children: upperFirst(breakpoint)
-            }
-          ),
-          value && /* @__PURE__ */ jsx("span", { className: clsx("es:-mt-0.5 es:px-1", active ? "es:text-secondary-400" : "es:text-secondary-400", alignEnd && "es:ml-auto"), children: value })
-        ] })
-      ] }, i);
-    }),
-    dotsEnd && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "es:row-start-1 es:flex es:shrink-0 es:-translate-x-1 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400", children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-0.5 es:text-secondary-300", children: [
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "es:row-start-2 es:size-px" })
-    ] })
-  ] });
-};
-export {
-  BreakpointPreview
-};