import { forwardRef, useCallback } from 'react';
import { createClassed, classed as classed$1, deriveClassed } from '@tw-classed/react';
import clsx6 from 'clsx';
import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
import { transform, map, mergeWith, get } from 'lodash-es';
import { createClassed as createClassed$1 } from '@tw-classed/core';
import createVariatGroupTransfomer from 'tailwind-group-variant';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { XMarkIcon } from '@heroicons/react/24/solid';
import { getByPath as getByPath$1 } from '@clickbar/dot-diver';

var __defProp = Object.defineProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var sizeVariants = {
  width: {
    xs: clsx6("w-28"),
    sm: clsx6("w-34"),
    md: clsx6("w-40"),
    lg: clsx6("w-48")
  },
  height: {
    xs: clsx6("h-28"),
    sm: clsx6("h-34"),
    md: clsx6("h-40"),
    lg: clsx6("h-48")
  },
  inlineWidth: {
    xs: clsx6("w-16 text-xs"),
    sm: clsx6("w-20 text-xs"),
    md: clsx6("w-22 text-xs"),
    lg: clsx6("w-26 text-xs")
  },
  inlineHeight: {
    xs: clsx6("h-16 text-xs"),
    sm: clsx6("h-20 text-xs"),
    md: clsx6("h-22 text-xs"),
    lg: clsx6("h-26 text-xs")
  },
  textSize: {
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    lg: "text-lg"
  },
  lineHeight: {
    xs: "leading-xs",
    sm: "leading-sm",
    md: "leading-md",
    lg: "leading-lg"
  },
  paddingY: {
    xs: "py-4",
    sm: "py-6",
    md: "py-8",
    lg: "py-10"
  },
  paddingX: {
    xs: clsx6("px-4"),
    sm: clsx6("px-6"),
    md: clsx6("px-8"),
    lg: clsx6("px-10")
  },
  extraPaddingX: {
    xs: clsx6("px-14"),
    sm: clsx6("px-16"),
    md: clsx6("px-18"),
    lg: clsx6("px-20")
  }
};
var twMerge = extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
var { classed } = createClassed({ merger: twMerge });
createClassed$1({ merger: twMerge });
var classedVariantMap = (variantMap) => variantMap;
function generateCompoundVariants(compoundVariantPropMap) {
  const { commonVariantProps, compoundVariantMapLists } = transform(
    compoundVariantPropMap,
    (result, value, key) => {
      if (typeof value === "boolean" || typeof value === "string") {
        result.commonVariantProps[key] = value;
        return result;
      }
      const compoundVariantMapList = map(value, (className, variantMapKey) => ({
        [key]: variantMapKey,
        class: className
      }));
      result.compoundVariantMapLists.push(compoundVariantMapList);
      return result;
    },
    {
      commonVariantProps: {},
      compoundVariantMapLists: []
    }
  );
  return compoundVariantMapLists.flat().map(({ class: cls, ...props }) => {
    return {
      ...commonVariantProps,
      class: twMerge(cls, compoundVariantPropMap.className),
      ...props
    };
  });
}

// src/utils/notEmpty.ts
function notEmpty(value) {
  return value !== null && value !== void 0;
}

// src/utils/classed/expandVariant.ts
createVariatGroupTransfomer({});
function mergeVariants(variants, overrides) {
  const variantArray = Array.isArray(variants) ? variants : Object.values(variants);
  const mergerFn = (objectValue, sourceValue) => twMerge$1(`${objectValue || ""}`, `${sourceValue}`);
  const mergedVariants = mergeWith({}, ...[...variantArray, overrides], mergerFn);
  return mergedVariants;
}

// src/styles/input-component.variants.ts
var inputComponentVariants = classedVariantMap({
  size: sizeVariants,
  rounded: {
    roundedLeft: "rounded-r-0 rounded-l-md",
    roundedRight: "rounded-l-0 rounded-r-md",
    rounded: "rounded-md"
  }
});
classed$1("div", {
  variants: {
    orientation: {
      horizontal: "inline-flex flex-row items-center ",
      vertical: "flex flex-col justify-center"
    }
  }
});
var inputComponentWidths = {
  xs: clsx6("w-168"),
  sm: clsx6("w-184"),
  md: clsx6("w-216"),
  lg: clsx6("w-400")
};
var inputComponentMinWidths = {
  none: "",
  xs: clsx6("min-w-[168px]"),
  sm: clsx6("min-w-[184px]"),
  md: clsx6("min-w-[216px]"),
  lg: clsx6("min-w-[400px]")
};
classed$1("div", {
  variants: {
    size: {
      xs: "",
      sm: "",
      md: "",
      lg: ""
    },
    minWidth: inputComponentMinWidths,
    width: {
      autoWidth: "w-auto",
      fullWidth: "!w-full",
      fixedWidth: ""
    }
  },
  defaultVariants: {
    width: "fixedWidth",
    size: "md"
  },
  compoundVariants: [
    { size: "xs", width: "fixedWidth", class: inputComponentWidths.xs },
    { size: "sm", width: "fixedWidth", class: inputComponentWidths.sm },
    { size: "md", width: "fixedWidth", class: inputComponentWidths.md },
    { size: "lg", width: "fixedWidth", class: inputComponentWidths.lg }
  ]
});
var inputSizeVariants = mergeVariants([
  inputComponentVariants.size.lineHeight,
  inputComponentVariants.size.paddingX,
  inputComponentVariants.size.paddingY,
  inputComponentVariants.size.textSize
]);
classed$1("div", "inline-flex", {
  variants: {
    size: inputSizeVariants
  }
});
var headingTextSize = {
  h1: clsx6("text-h1"),
  h2: clsx6("text-h2"),
  h3: clsx6("text-h3"),
  h4: clsx6("text-h4"),
  h5: clsx6("text-h5"),
  h6: clsx6("text-h6")
};
var textSize = {
  xs: clsx6("text-xs"),
  sm: clsx6("text-sm"),
  md: clsx6("text-md"),
  lg: clsx6("text-lg")
};
var textVariants = {
  fontWeight: {
    regular: clsx6("font-regular"),
    medium: clsx6("font-medium"),
    bold: clsx6("font-bold")
  },
  size: {
    ...textSize,
    ...headingTextSize
  },
  font: {
    body: "font-body",
    heading: "font-heading",
    mono: "font-mono"
  },
  leading: {
    none: clsx6("leading-none"),
    xs: clsx6("leading-xs"),
    sm: clsx6("leading-sm"),
    md: clsx6("leading-md"),
    lg: clsx6("leading-lg"),
    h1: clsx6("leading-h1"),
    h2: clsx6("leading-h2"),
    h3: clsx6("leading-h3"),
    h4: clsx6("leading-h4"),
    h5: clsx6("leading-h5"),
    h6: clsx6("leading-h6")
  },
  spaceY: {
    xs: clsx6("space-y-4"),
    sm: clsx6("space-y-6"),
    md: clsx6("space-y-8"),
    lg: clsx6("space-y-16")
  },
  spaceX: {
    xs: clsx6("space-x-4"),
    sm: clsx6("space-x-6"),
    md: clsx6("space-x-8"),
    lg: clsx6("space-x-16")
  },
  color: {
    inherit: clsx6("text-inherit"),
    current: clsx6("text-current"),
    tint: clsx6("text-content-tint"),
    ghost: clsx6("text-content-ghost"),
    subtle: clsx6("text-content-subtle"),
    medium: clsx6("text-content"),
    weak: clsx6("text-content-weak"),
    moderate: clsx6("text-content-moderate"),
    high: clsx6("text-content-high"),
    intense: clsx6("text-content-intense"),
    strong: clsx6("text-content-intense"),
    inverse: clsx6("text-inverse"),
    danger: clsx6("text-danger")
  },
  align: {
    center: clsx6("text-center"),
    right: clsx6("text-right"),
    left: clsx6("text-left"),
    start: clsx6("text-left"),
    end: clsx6("text-end")
  },
  maxLines: {
    1: "line-clamp-1",
    2: "line-clamp-2",
    3: "line-clamp-3",
    4: "line-clamp-4",
    5: "line-clamp-5",
    6: "line-clamp-6"
  }
};

// src/components/Button/Button.styles.tsx
var buttonVariants = {
  variants: {
    loading: {
      true: "cursor-default"
    },
    cursorPointer: {
      false: "cursor-auto"
    },
    size: mergeVariants(
      [inputComponentVariants.size.paddingX, inputComponentVariants.size.paddingY],
      {
        xs: "text-xs px-6",
        sm: "text-sm",
        md: "text-sm",
        lg: "text-sm"
      }
    ),
    fontWeight: textVariants.fontWeight,
    noWrap: {
      true: "whitespace-nowrap"
    },
    inline: {
      true: "inline"
    },
    justify: {
      center: "justify-center",
      start: "justify-start",
      end: "justify-end"
    },
    fullWidth: {
      true: "w-full"
    },
    hoverable: {
      true: ""
    },
    variant: {
      filled: "",
      outlined: "ring-[1.35px] ring-inset",
      glass: "",
      text: "",
      ghost: ""
    },
    rounded: {
      sm: clsx6("rounded "),
      default: clsx6("rounded"),
      true: "rounded-full"
    },
    gradient: {
      true: ""
    },
    coloredShadow: {
      true: ""
    },
    extraRoundedPadding: {
      true: ""
    },
    color: {
      primary: "",
      secondary: "",
      surface: "",
      inverse: "",
      info: "",
      success: "",
      danger: "",
      caution: "",
      heart: ""
    },
    hoverBackgroundColor: {
      primary: "",
      secondary: "",
      inverse: "",
      info: "",
      success: "",
      danger: "",
      caution: "",
      heart: ""
    },
    backgroundNoise: {
      true: "noisy-surface-texture"
    },
    gap: {
      true: ""
    }
  },
  compoundVariants: [
    ...generateCompoundVariants({
      gap: true,
      size: {
        xs: clsx6("gap-4"),
        sm: clsx6("gap-6"),
        md: clsx6("gap-6"),
        lg: clsx6("gap-6")
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      color: {
        primary: "filled-accent-primary",
        secondary: "filled-accent-secondary",
        inverse: "filled-accent-inverse",
        heart: "filled-accent-heart",
        info: "filled-accent-info",
        success: "filled-accent-success",
        danger: "filled-accent-danger",
        caution: "filled-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      hoverable: true,
      color: {
        primary: "filled-hover-accent-primary",
        secondary: "filled-hover-accent-secondary",
        inverse: "filled-hover-accent-inverse",
        heart: "filled-hover-accent-heart",
        info: "filled-hover-accent-info",
        success: "filled-hover-accent-success",
        danger: "filled-hover-accent-danger",
        caution: "filled-hover-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      hoverBackgroundColor: {
        primary: "filled-hover-accent-primary",
        secondary: "filled-hover-accent-secondary",
        inverse: "filled-hover-accent-inverse",
        heart: "filled-hover-accent-heart",
        info: "filled-hover-accent-info",
        success: "filled-hover-accent-success",
        danger: "filled-hover-accent-danger",
        caution: "filled-hover-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "glass",
      hoverBackgroundColor: {
        primary: "hover:glass-accent-primary",
        secondary: "hover:glass-accent-secondary",
        inverse: "hover:glass-accent-inverse",
        heart: "hover:glass-accent-heart",
        info: "hover:glass-accent-info",
        success: "hover:glass-accent-success",
        danger: "hover:glass-accent-danger",
        caution: "hover:glass-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "glass",
      className: "overflow-hidden",
      color: {
        primary: "glass-accent-primary",
        secondary: "glass-accent-secondary",
        inverse: "glass-accent-inverse",
        heart: "glass-accent-heart",
        info: "glass-accent-info",
        success: "glass-accent-success",
        danger: "glass-accent-danger",
        caution: "glass-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "ghost",
      className: "overflow-hidden bg-transparent",
      color: {
        primary: "ghost-accent-primary",
        secondary: "ghost-accent-secondary",
        inverse: "ghost-accent-inverse",
        heart: "ghost-accent-heart",
        info: "ghost-accent-info",
        success: "ghost-accent-success",
        danger: "ghost-accent-danger",
        caution: "ghost-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "outlined",
      className: "overflow-hidden z-0 bg-surface-soft",
      color: {
        primary: "ring-boundary-weak",
        secondary: "ring-boundary-weak",
        inverse: "text-inverse ring-inverse",
        heart: "text-heart ring-heart",
        info: "text-info ring-info",
        success: "text-success ring-success",
        danger: "text-danger ring-danger",
        caution: "text-caution ring-caution"
      }
    }),
    // Colored Shadow
    ...generateCompoundVariants({
      coloredShadow: true,
      className: clsx6("shadow-lg "),
      color: {
        primary: "shadow-primary/70",
        secondary: "shadow-secondary/70",
        inverse: "shadow-inverse/70",
        heart: "shadow-heart/70",
        info: "shadow-info/70",
        success: "shadow-success/70",
        danger: "shadow-danger/70",
        caution: "shadow-caution/70"
      }
    }),
    // Gradient
    ...generateCompoundVariants({
      gradient: true,
      variant: "filled",
      className: clsx6("border-none transition-all hover:brightness-[1.05]"),
      color: {
        primary: clsx6("bg-gradient-primary-dark-to-light-tr"),
        secondary: clsx6("bg-gradient-secondary-dark-to-light-tr"),
        inverse: clsx6("bg-gradient-inverse-dark-to-light-tr"),
        heart: clsx6("bg-gradient-heart-dark-to-light-tr"),
        info: clsx6("bg-gradient-info-dark-to-light-tr"),
        success: clsx6("bg-gradient-success-dark-to-light-tr"),
        danger: clsx6("bg-gradient-danger-dark-to-light-tr"),
        caution: clsx6("bg-gradient-caution-dark-to-light-tr")
      }
    }),
    // Extra Padding X
    ...generateCompoundVariants({
      rounded: true,
      extraRoundedPadding: true,
      size: sizeVariants.extraPaddingX
    })
  ]
};
var ButtonElement = classed.button(
  "inline-flex font-medium items-center justify-center select-none align-middle",
  "disabled:text-content-tint disabled:cursor-default disabled:pointer-events-none relative",
  "transition-colors duration-100",
  "box-border",
  "shrink-0",
  {
    defaultVariants: {
      size: "md",
      rounded: "default",
      noWrap: true,
      fontWeight: "medium",
      hoverable: true,
      color: "primary",
      justify: "center",
      variant: "filled",
      extraRoundedPadding: true,
      gap: true
    },
    variants: buttonVariants.variants,
    compoundVariants: buttonVariants.compoundVariants
  }
);
var InlineButtonIconElement = classed("span", "flex items-center justify-center", {
  variants: {
    size: {
      xs: "h-12 w-12",
      sm: "h-14 w-14",
      md: "h-16 w-16",
      lg: "h-18 w-18"
    },
    offset: {
      right: "-mr-6",
      left: "-ml-6"
    }
  },
  defaultVariants: { size: "md" }
});
var InlineButtonIcon = ({
  offset,
  position,
  size,
  icon,
  className
}) => {
  return Boolean(className || icon) ? /* @__PURE__ */ jsx(
    InlineButtonIconElement,
    {
      size,
      className,
      offset: offset ? position : void 0,
      children: icon
    }
  ) : null;
};
var ButtonComponent = forwardRef(
  ({
    size = "md",
    startIcon,
    endIcon,
    startIconClassName,
    endIconClassName,
    children,
    variant = "filled",
    color = "primary",
    rounded,
    extraRoundedPadding: extraRoundedPaddingProp,
    ...props
  }, ref) => {
    function getExtraRoundedPaddingProp() {
      if (extraRoundedPaddingProp)
        return extraRoundedPaddingProp;
      if (variant === "ghost" || variant === "text")
        return false;
      return true;
    }
    const extraRoundedPadding = getExtraRoundedPaddingProp();
    const inlineButtonIconProps = {
      size,
      offset: Boolean(rounded && extraRoundedPadding)
    };
    return /* @__PURE__ */ jsxs(
      ButtonElement,
      {
        variant,
        color,
        extraRoundedPadding,
        rounded,
        size,
        ...props,
        ref,
        children: [
          /* @__PURE__ */ jsx(
            InlineButtonIcon,
            {
              position: "left",
              icon: startIcon,
              className: startIconClassName,
              ...inlineButtonIconProps
            }
          ),
          children,
          /* @__PURE__ */ jsx(
            InlineButtonIcon,
            {
              position: "right",
              icon: endIcon,
              className: endIconClassName,
              ...inlineButtonIconProps
            }
          )
        ]
      }
    );
  }
);
var Button = deriveClassed((props, ref) => /* @__PURE__ */ jsx(ButtonComponent, { ...props, ref }));

// src/components/Flex/Flex.tsx
var flexGapVariants = {
  false: "gap-0",
  true: "gap-8",
  xs: "gap-2",
  sm: "gap-4",
  md: "gap-8",
  lg: "gap-16",
  xl: "gap-24"
};
var Flex = classed("div", "flex", {
  defaultVariants: {},
  variants: {
    row: {
      true: "flex-row",
      reverse: "flex-row-reverse"
    },
    column: {
      true: "flex-col",
      reverse: "flex-col-reverse"
    },
    dir: {
      row: "flex-row",
      column: "flex-col"
    },
    inlineFlex: {
      true: "inline-flex"
    },
    noFlex: {
      true: ""
    },
    flexNone: {
      true: "flex-none"
    },
    wrap: {
      true: "flex-wrap",
      reverse: "flex-wrap-reverse wrap"
    },
    grow: {
      true: "flex-grow"
    },
    shrink: {
      true: "flex-shrink"
    },
    auto: {
      true: "flex-auto"
    },
    basisAuto: {
      true: "basis-auto"
    },
    centerAlign: {
      true: "justify-center items-center"
    },
    gap: flexGapVariants,
    textAlign: {
      left: "text-left",
      center: "text-center",
      right: "text-right",
      end: "text-end",
      start: "text-start",
      justify: "text-justify"
    },
    justify: {
      start: "justify-start",
      end: "justify-end",
      center: "justify-center",
      between: "justify-between",
      around: "justify-around",
      evenly: "justify-evenly"
    },
    align: {
      start: "items-start",
      end: "items-end",
      center: "items-center",
      baseline: "items-baseline",
      stretch: "items-stretch"
    },
    alignSelf: {
      start: "self-start",
      center: "self-center",
      end: "self-end",
      stretch: "self-stretch",
      baseline: "self-baseline",
      auto: "self-auto"
    },
    justifySelf: {
      auto: "justify-self-auto",
      start: "justify-self-start",
      end: "justify-self-end",
      center: "justify-self-center",
      stretch: "justify-self-stretch"
    },
    fullWidth: {
      true: "w-full"
    }
  }
});

// src/components/Popover/Popover.tsx
var Popover_exports = {};
__export(Popover_exports, {
  Anchor: () => Anchor2,
  Close: () => Close2,
  Content: () => Content2,
  Portal: () => Portal2,
  PrimitiveContent: () => PrimitiveContent,
  Root: () => Root2,
  Trigger: () => Trigger2
});
var IconButtonElement = classed("button", ButtonElement, "p-8 shrink-0", {
  variants: {
    size: mergeVariants([sizeVariants.width, sizeVariants.height])
  }
});
var IconButton = forwardRef(
  ({ className, children, ...props }, ref) => {
    return /* @__PURE__ */ jsx(IconButtonElement, { ...props, className, ref, extraRoundedPadding: false, children });
  }
);
var CloseButton = forwardRef(
  ({ className, animated, color = "secondary", ...props }, ref) => {
    return /* @__PURE__ */ jsx(
      IconButton,
      {
        ref,
        size: "sm",
        variant: "ghost",
        color,
        rounded: true,
        ...props,
        className: twMerge$1(
          clsx6("text-content-subtle hover:text-content-weak", {
            "opacity-50 transition-opacity duration-300 ease-in-out group-hover:opacity-100": animated
          }),
          className
        ),
        children: /* @__PURE__ */ jsx(XMarkIcon, { className: clsx6("fill-current") })
      }
    );
  }
);
var PopoverContentElement = classed(
  PopoverPrimitive.Content,
  "bg-surface p-8 rounded border border-highlight relative z-0",
  {
    variants: {
      backgroundNoise: {
        true: "noisy-surface-texture"
      },
      closeButton: {
        true: "pr-40"
      }
    },
    defaultVariants: {
      backgroundNoise: true
    }
  }
);
var PopoverContent = ({
  children,
  showArrow,
  closeOnInteractOutside = true,
  showCloseButton: showCloseButtonProp,
  className,
  backgroundNoise,
  ...props
}) => {
  const showCloseButton = showCloseButtonProp ?? !closeOnInteractOutside;
  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
    PopoverContentElement,
    {
      sideOffset: 5,
      collisionPadding: 5,
      backgroundNoise,
      ...props,
      onInteractOutside: (e) => {
        if (!closeOnInteractOutside) {
          e.preventDefault();
        }
      },
      className,
      closeButton: showCloseButton,
      children: [
        children,
        showCloseButton && /* @__PURE__ */ jsx(PopoverPrimitive.Close, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ jsx(
          CloseButton,
          {
            size: "xs",
            rounded: true,
            color: "secondary",
            className: "absolute right-[3px] top-[5.8px] noisy-surface-texture"
          }
        ) }),
        showArrow && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "fill-highlight-subtle relative top-px" }),
          /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "fill-surface scale-105 relative" })
        ] })
      ]
    }
  ) });
};
var PopoverRoot = (props) => {
  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...props });
};
var PopoverTrigger = (props) => {
  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, ...props });
};
var Close2 = PopoverPrimitive.Close;
var Root2 = PopoverRoot;
var Content2 = PopoverContent;
var Trigger2 = PopoverTrigger;
var PrimitiveContent = PopoverPrimitive.Content;
var Portal2 = PopoverPrimitive.Portal;
var Anchor2 = PopoverPrimitive.Anchor;

// src/components/Text/textComponentProps.ts
var textComponentProps = {
  overline: {
    size: "sm",
    leading: "md",
    color: "subtle",
    fontWeight: "regular",
    maxLines: 2,
    className: void 0
  },
  heading: {
    size: "h3",
    color: "intense",
    leading: "h3",
    fontWeight: "bold",
    className: void 0
  },
  subheading: {
    size: "lg",
    leading: "lg",
    color: "intense",
    className: void 0,
    fontWeight: "medium"
  },
  title: {
    size: "md",
    color: "intense",
    leading: "md",
    fontWeight: "medium",
    maxLines: 2,
    className: void 0
  },
  subtitle: {
    size: "md",
    leading: "md",
    font: "body",
    fontWeight: "regular",
    color: "medium",
    className: "relative"
  },
  body: {
    size: "md",
    color: "weak",
    leading: "md",
    fontWeight: "regular",
    className: void 0,
    font: "body"
    // maxLines: 3,
  },
  description: {
    size: "sm",
    color: "subtle",
    leading: "md",
    fontWeight: "regular",
    className: void 0,
    font: "body"
    // maxLines: 3,
  },
  caption: {
    size: "sm",
    color: "ghost",
    leading: "md",
    className: void 0
  }
};
var TextDotElement = classed("svg", "flex-none fill-current", {
  variants: {
    size: {
      xs: "h-2 w-2",
      sm: "h-4 w-4",
      md: "h-6 w-6",
      lg: "h-8 w-8"
    }
  },
  defaultVariants: {
    size: "md"
  }
});
var Dot = (props) => /* @__PURE__ */ jsx(TextDotElement, { viewBox: "0 0 2 2", ...props, children: /* @__PURE__ */ jsx("circle", { cx: 1, cy: 1, r: 1 }) });
var DuplicateChildren = ({ count, children }) => {
  const renderChildren = useCallback(() => {
    if (count === 1)
      return children;
    return new Array(count).fill(0).map(() => children);
  }, [children, count]);
  return /* @__PURE__ */ jsx(Fragment, { children: renderChildren() });
};
var TextElement = classed("span", {
  variants: {
    size: textVariants.size,
    fontWeight: textVariants.fontWeight,
    color: textVariants.color,
    leading: textVariants.leading,
    align: textVariants.align,
    font: textVariants.font,
    spaceY: textVariants.spaceY,
    spaceX: textVariants.spaceX,
    maxLines: textVariants.maxLines,
    uppercase: {
      true: "uppercase"
    },
    noWrap: {
      true: "whitespace-nowrap"
    },
    bold: {
      true: textVariants.fontWeight.bold
    },
    medium: {
      true: textVariants.fontWeight.medium
    },
    tracking: {
      wide: "tracking-wide",
      tight: "tracking-tight"
    },
    block: {
      true: "block"
    },
    fullWidth: {
      true: "w-full"
    },
    truncate: {
      true: "truncate"
    },
    selectNone: {
      true: "select-none"
    },
    italic: {
      true: "italic"
    }
  },
  defaultVariants: {
    color: "current"
  }
});
var TextComponent = deriveClassed(
  ({ children, className, as, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsx(TextElement, { className, as, ...props, ref: forwardedRef, children });
  }
);
var Header = ({ as, ...props }) => /* @__PURE__ */ jsx(Text, { as, ...props });
var H1 = (props) => /* @__PURE__ */ jsx(Header, { as: "h1", size: "h1", ...props });
var H2 = (props) => /* @__PURE__ */ jsx(Header, { as: "h2", size: "h2", ...props });
var H3 = (props) => /* @__PURE__ */ jsx(Header, { as: "h3", size: "h3", ...props });
var H4 = (props) => /* @__PURE__ */ jsx(Header, { as: "h4", size: "h4", ...props });
var H5 = (props) => /* @__PURE__ */ jsx(Header, { as: "h5", size: "h5", ...props });
var H6 = (props) => /* @__PURE__ */ jsx(Header, { as: "h6", size: "h6", ...props });
var PresetTextComponent = deriveClassed(({ preset, ...props }, forwardedRef) => {
  return /* @__PURE__ */ jsx(TextComponent, { ...textComponentProps[preset], ...props, ref: forwardedRef });
});
var Overline = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "overline", ...props });
var Heading = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "heading", ...props });
var Subheading = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "subheading", ...props });
var Title = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "title", ...props });
var Subtitle = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "subtitle", ...props });
var Body = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "body", ...props });
var Description = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "description", ...props });
var Caption = (props) => /* @__PURE__ */ jsx(PresetTextComponent, { preset: "caption", ...props });
var Br = (props) => /* @__PURE__ */ jsx(DuplicateChildren, { ...props, children: /* @__PURE__ */ jsx("br", {}) });
var Space = (props) => /* @__PURE__ */ jsx(DuplicateChildren, { ...props, children: "\xA0" });
var Blank = (props) => /* @__PURE__ */ jsx(DuplicateChildren, { ...props, children: "\u200D" });
var Dash = (props) => /* @__PURE__ */ jsx(DuplicateChildren, { ...props, children: " \u2013" });
var SubComponents = {
  /** Header 1 */
  H1,
  /** Header 2 */
  H2,
  /** Header 3 */
  H3,
  /** Header 4 */
  H4,
  /** Header 5 */
  H5,
  /** Header 6 */
  H6,
  /** Preset Text component */
  Overline,
  /** Preset Text component */
  Heading,
  /** Preset Text component */
  Subheading,
  /** Preset Text component */
  Title,
  /** Preset Text component */
  Subtitle,
  /** Preset Text component */
  Body,
  /** Preset Text component */
  Caption,
  /** Preset Text component */
  Description,
  /** Line break: <br/> */
  Br,
  /** Simple dot symbol */
  Dot,
  /** White space */
  Space,
  /** Invisible character */
  Blank,
  /** Dash symbol */
  Dash
};
var Text = Object.assign(TextComponent, SubComponents);

// src/utils/environment-utils.ts
function isDevelopment() {
  if (typeof window === "undefined" && typeof process !== "undefined" && process.env.NODE_ENV === "development") {
    return true;
  }
  if (typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")) {
    return true;
  }
  return false;
}
function getByPath(object, path, _maxDepth) {
  return getByPath$1(object, path);
}

// src/utils/objectMap.ts
function objectMap(obj, fn) {
  return Object.fromEntries(
    Object.entries(obj).map(([k, v], index) => fn({ key: k, value: v, index, get: getByPath })).filter(notEmpty)
  );
}

// src/utils/pickProps.ts
var NO_DEFAULT_VALUE = "_pick_";
function pickProps(props, pickedProps, options) {
  const { shouldValidatePickProp = true } = options ?? {};
  const entries = Object.entries(pickedProps).map(([path, defaultValue]) => {
    const prop = get(props, path);
    if (defaultValue === NO_DEFAULT_VALUE) {
      return [path, prop];
    }
    if (shouldValidatePickProp) {
      validatePickProp(defaultValue, pickedProps);
    }
    return [path, prop ?? defaultValue];
  });
  return Object.fromEntries(entries);
}
function validatePickProp(input, pickedProps) {
  if (isDevelopment()) {
    const startsWith = ["_p", "pick"];
    const isLikelyTypo = typeof input === "string" && startsWith.some((typo) => input.startsWith(typo));
    if (isLikelyTypo) {
      const functionName = "`pickProps`";
      throw new Error(`
      Error thrown from ${functionName}
      
      A possible typo was detected in the arguments passed to the ${functionName} function.

      Expected value: "${NO_DEFAULT_VALUE}"

      Received value: "${input}" \u274C

      ${JSON.stringify(
        objectMap(pickedProps, ({ key, value }) => [
          key,
          value === input ? `${value} \u274C` : value
        ]),
        null,
        2
      )}
 
      If this is intended, add \`shouldValidatePickProp: true\` to the options.

      Note: This error is thrown only during development.

      `);
    }
  }
}
var ConfirmationPopoverContent = ({
  title,
  description,
  confirmButtonText = "Confirm",
  cancelButtonText = "Cancel",
  confirmButtonProps,
  cancelButtonProps,
  onConfirm,
  onCancel
}) => {
  return /* @__PURE__ */ jsxs(Flex, { gap: true, children: [
    (title || description) && /* @__PURE__ */ jsxs(Flex, { gap: true, className: "mb-8", children: [
      title && /* @__PURE__ */ jsx(Text.H6, { children: title }),
      description && /* @__PURE__ */ jsx(Text, { children: description })
    ] }),
    /* @__PURE__ */ jsxs(Flex, { gap: "sm", children: [
      /* @__PURE__ */ jsx(Popover_exports.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "xs", onClick: onConfirm, color: "danger", ...confirmButtonProps, children: confirmButtonText }) }),
      /* @__PURE__ */ jsx(Popover_exports.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "xs", variant: "ghost", onClick: onCancel, ...cancelButtonProps, children: cancelButtonText }) })
    ] })
  ] });
};
var ConfirmationPopover = (props) => {
  const { children, ...popoverRootProps } = pickProps(props, {
    children: "_pick_",
    defaultOpen: "_pick_",
    modal: "_pick_",
    onOpenChange: "_pick_",
    open: "_pick_"
  });
  const confirmationPopoverContentProps = pickProps(props, {
    cancelButtonProps: "_pick_",
    cancelButtonText: "_pick_",
    confirmButtonProps: "_pick_",
    confirmButtonText: "_pick_",
    description: "_pick_",
    onCancel: "_pick_",
    onConfirm: "_pick_",
    title: "_pick_"
  });
  const popoverContentProps = pickProps(props, {
    showArrow: true,
    align: "_pick_",
    alignOffset: "_pick_",
    arrowPadding: "_pick_",
    asChild: "_pick_",
    avoidCollisions: "_pick_",
    trapFocus: "_pick_",
    closeOnInteractOutside: "_pick_",
    disableOutsidePointerEvents: "_pick_",
    showCloseButton: "_pick_",
    collisionBoundary: "_pick_",
    collisionPadding: "_pick_",
    hideWhenDetached: "_pick_",
    onCloseAutoFocus: "_pick_",
    onEscapeKeyDown: "_pick_",
    onFocusOutside: "_pick_",
    onInteractOutside: "_pick_",
    onOpenAutoFocus: "_pick_",
    onPointerDownOutside: "_pick_",
    side: "_pick_",
    sideOffset: "_pick_",
    sticky: "_pick_"
  });
  return /* @__PURE__ */ jsxs(Popover_exports.Root, { ...popoverRootProps, children: [
    /* @__PURE__ */ jsx(Popover_exports.Trigger, { children }),
    /* @__PURE__ */ jsx(Popover_exports.Content, { ...popoverContentProps, className: "p-4 rounded-md", children: /* @__PURE__ */ jsx(ConfirmationPopoverContent, { ...confirmationPopoverContentProps }) })
  ] });
};

export { ConfirmationPopover };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map