@eightshift/ui-components 5.0.0 → 5.0.1

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

@@ -0,0 +1,8 @@
+/*! tailwindcss v4.1.5 | 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

@@ -0,0 +1,377 @@
+/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-border-style: solid;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+    }
+  }
+}
+
+.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: var(--es-color-red-700, oklch(50.5% .213 27.518)) !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: var(--es-color-red-700, oklch(50.5% .213 27.518)) !important;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .block-editor-block-list__block-crash-warning {
+    border-color: color-mix(in oklab, var(--es-color-red-700, oklch(50.5% .213 27.518)) 15%, transparent) !important;
+    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-red-700, oklch(50.5% .213 27.518)) 10%, transparent) var(--tw-shadow-alpha), transparent) !important;
+  }
+}
+
+.block-editor-block-list__block-crash-warning .block-editor-warning__message {
+  color: var(--es-color-red-950, oklch(25.8% .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(87.1% .006 286.286)) !important;
+  background-color: var(--es-color-zinc-50, oklch(98.5% 0 0)) !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: var(--es-color-zinc-700, oklch(37% .013 285.805)) !important;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .wp-block-missing div.block-editor-warning {
+    background-color: color-mix(in oklab, var(--es-color-zinc-50, oklch(98.5% 0 0)) 75%, transparent) !important;
+    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-zinc-700, oklch(37% .013 285.805)) 20%, transparent) var(--tw-shadow-alpha), transparent) !important;
+  }
+}
+
+.wp-block-missing div.block-editor-warning .block-editor-warning__message {
+  color: var(--es-color-zinc-950, oklch(14.1% .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(27.8% .033 256.848));
+  background-color: var(--es-color-gray-950, oklch(13% .028 261.692));
+  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;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .components-tooltip {
+    background-color: color-mix(in oklab, var(--es-color-gray-950, oklch(13% .028 261.692)) 70%, transparent);
+  }
+}
+
+.components-tooltip:has( > :first-child) {
+  border-color: var(--es-color-gray-200, oklch(92.8% .006 264.531));
+  background-color: var(--es-color-white, #fff);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .components-tooltip:has( > :first-child) {
+    background-color: color-mix(in oklab, var(--es-color-white, #fff) 80%, transparent);
+  }
+}
+
+.components-tooltip:has( > :first-child) {
+  color: var(--es-color-gray-700, oklch(37.3% .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-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-DRpwWot2.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
+};