'use strict';

var color$1 = require('@react-aria/color');
var color = require('@react-stately/color');
var focus = require('@react-aria/focus');
var React = require('react');
var tailwindMerge = require('tailwind-merge');
var lodashEs = require('lodash-es');
var react = require('@tw-classed/react');
var core = require('@tw-classed/core');
var clsx6 = require('clsx');
var createVariatGroupTransfomer = require('tailwind-group-variant');
var jsxRuntime = require('react/jsx-runtime');
var visuallyHidden = require('@react-aria/visually-hidden');
var i18n = require('@react-aria/i18n');
var dotDiver = require('@clickbar/dot-diver');
require('exhaustive');
var changeCase$1 = require('change-case');
var reactAriaComponents = require('react-aria-components');
var useDimensions = require('react-cool-dimensions');
var reactAria = require('react-aria');
var framerMotion = require('framer-motion');
var reactIs = require('react-is');
var TooltipPrimitive = require('@radix-ui/react-tooltip');
var InformationCircleIcon = require('@heroicons/react/24/outline/InformationCircleIcon');
var utils = require('@react-aria/utils');
var reactSlot = require('@radix-ui/react-slot');
var reactStately = require('react-stately');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);
var clsx6__default = /*#__PURE__*/_interopDefault(clsx6);
var createVariatGroupTransfomer__default = /*#__PURE__*/_interopDefault(createVariatGroupTransfomer);
var useDimensions__default = /*#__PURE__*/_interopDefault(useDimensions);
var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
var InformationCircleIcon__default = /*#__PURE__*/_interopDefault(InformationCircleIcon);

// src/components/ColorPicker/ColorArea.tsx
var twMerge = tailwindMerge.extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
var { classed } = react.createClassed({ merger: twMerge });
var { classed: classedCore } = core.createClassed({ merger: twMerge });
function generateCompoundVariants(compoundVariantPropMap) {
  const { commonVariantProps, compoundVariantMapLists } = lodashEs.transform(
    compoundVariantPropMap,
    (result, value, key) => {
      if (typeof value === "boolean" || typeof value === "string") {
        result.commonVariantProps[key] = value;
        return result;
      }
      const compoundVariantMapList = lodashEs.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__default.default({});
function mergeVariants(variants, overrides) {
  const variantArray = Array.isArray(variants) ? variants : Object.values(variants);
  const mergerFn = (objectValue, sourceValue) => tailwindMerge.twMerge(`${objectValue || ""}`, `${sourceValue}`);
  const mergedVariants = lodashEs.mergeWith({}, ...[...variantArray, overrides], mergerFn);
  return mergedVariants;
}
var ColorAreaContainerElement = classed("div", "min-w-[40px]  min-h-[40px]", {
  variants: {
    disabled: {
      true: "opacity-30"
    }
  }
});
var ColorAreaGradientElement = classed("div", "h-full w-full", {
  variants: {
    disabled: {
      true: "bg-highlight-ghost"
    }
  }
});
var ColorAreaThumbStyle = classed(
  "div",
  "border-box rounded-[50%]  transform absolute -translate-x-1/4 -translate-y-1/4",
  // 'shadow-inner',
  "ring-2 ring-palette-white/80",
  // 'cursor-grab active:cursor-grabbing',
  {
    variants: {
      isDisabled: {
        true: "bg-highlight-ghost border-highlight-ghost",
        false: "border-base"
      }
    }
  }
);
function ColorArea({
  height = 192,
  width = "100%",
  focusedThumbSize = 28,
  thumbSize = 20,
  borderRadius = 4,
  className,
  style,
  ...props
}) {
  const { isDisabled } = props;
  const inputXRef = React__namespace.default.useRef(null);
  const inputYRef = React__namespace.default.useRef(null);
  const containerRef = React__namespace.default.useRef(null);
  const state = color.useColorAreaState(props);
  const { colorAreaProps, gradientProps, xInputProps, yInputProps, thumbProps } = color$1.useColorArea(
    { ...props, inputXRef, inputYRef, containerRef },
    state
  );
  const { focusProps, isFocusVisible } = focus.useFocusRing();
  return /* @__PURE__ */ jsxRuntime.jsxs(
    ColorAreaContainerElement,
    {
      ref: containerRef,
      ...colorAreaProps,
      disabled: isDisabled,
      className,
      style: {
        ...colorAreaProps.style,
        width,
        height,
        borderRadius,
        ...style
      },
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          ColorAreaGradientElement,
          {
            disabled: isDisabled,
            ...gradientProps,
            style: {
              ...gradientProps.style,
              borderRadius
              // height,
              // width,
            }
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsxs(
          ColorAreaThumbStyle,
          {
            ...thumbProps,
            style: {
              ...thumbProps.style,
              background: isDisabled ? void 0 : state.getDisplayColor().toString("css"),
              // border: `2px solid ${isDisabled ? 'rgb(142, 142, 142)' : 'white'}`,
              borderRadius: "50%",
              // boxSizing: 'border-box',
              transform: "translate(-50%, -50%)",
              // boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
              height: isFocusVisible ? `calc(${focusedThumbSize} + 4px)` : thumbSize,
              width: isFocusVisible ? `calc(${focusedThumbSize} + 4px)` : thumbSize
            },
            children: [
              /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputXRef, ...xInputProps, ...focusProps }),
              /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputYRef, ...yInputProps, ...focusProps })
            ]
          }
        )
      ]
    }
  );
}

// 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"
    }
  }
});
var sizeVariants = {
  width: {
    xs: clsx6__default.default("w-28"),
    sm: clsx6__default.default("w-34"),
    md: clsx6__default.default("w-40"),
    lg: clsx6__default.default("w-48")
  },
  height: {
    xs: clsx6__default.default("h-28"),
    sm: clsx6__default.default("h-34"),
    md: clsx6__default.default("h-40"),
    lg: clsx6__default.default("h-48")
  },
  inlineWidth: {
    xs: clsx6__default.default("w-16 text-xs"),
    sm: clsx6__default.default("w-20 text-xs"),
    md: clsx6__default.default("w-22 text-xs"),
    lg: clsx6__default.default("w-26 text-xs")
  },
  inlineHeight: {
    xs: clsx6__default.default("h-16 text-xs"),
    sm: clsx6__default.default("h-20 text-xs"),
    md: clsx6__default.default("h-22 text-xs"),
    lg: clsx6__default.default("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__default.default("px-4"),
    sm: clsx6__default.default("px-6"),
    md: clsx6__default.default("px-8"),
    lg: clsx6__default.default("px-10")
  },
  extraPaddingX: {
    xs: clsx6__default.default("px-14"),
    sm: clsx6__default.default("px-16"),
    md: clsx6__default.default("px-18"),
    lg: clsx6__default.default("px-20")
  }
};

// src/utils/environment-utils.ts
function isClientSide() {
  return typeof window !== "undefined";
}
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 dotDiver.getByPath(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
function generatePropPickerFn(pickedRecord) {
  const pickedKeys = Object.keys(pickedRecord);
  const pickerFn = (props, options) => {
    const { defaultProps } = options ?? {};
    return { ...defaultProps, ...lodashEs.pick(props, pickedKeys) };
  };
  pickerFn.pickedKeys = pickedKeys;
  pickerFn.pickedRecord = pickedRecord;
  pickerFn.omit = (props) => lodashEs.omit(props, pickedKeys);
  return pickerFn;
}
var NO_DEFAULT_VALUE = "_pick_";
function pickProps(props, pickedProps, options) {
  const { shouldValidatePickProp = true } = options ?? {};
  const entries = Object.entries(pickedProps).map(([path, defaultValue]) => {
    const prop = lodashEs.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 stringCaseFns = {
  param: changeCase$1.paramCase,
  capital: changeCase$1.capitalCase,
  capitalize: lodashEs.upperFirst,
  camel: changeCase$1.camelCase,
  dot: changeCase$1.dotCase,
  header: changeCase$1.headerCase,
  noCase: changeCase$1.noCase,
  path: changeCase$1.pathCase,
  constant: changeCase$1.constantCase,
  sentence: changeCase$1.sentenceCase,
  snake: changeCase$1.snakeCase,
  pascal: changeCase$1.pascalCase
};
function changeCase(str, stringCase) {
  if (typeof str !== "string") {
    return void 0;
  }
  const caseFn = stringCaseFns[stringCase];
  return caseFn(str);
}

// src/components/Input/Input.styles.ts
var borderRing = clsx6__default.default("ring-1 ring-inset focus:ring-1 focus:ring-inset");
var inputSurfaceClassName = classed(
  "div",
  "group relative rounded-[5px] text-boundary-weak",
  {
    defaultVariants: {
      filled: true,
      border: true,
      shadow: "sm"
    },
    variants: {
      cursor: {
        pointer: "cursor-pointer"
      },
      border: {
        // true: 'ring-1 ring-boundary-weak ring-inset focus:ring-1 focus:ring-boundary-weak focus:ring-inset',
        true: clsx6__default.default(borderRing, "ring-boundary-weak focus:ring-boundary-weak"),
        subtle: clsx6__default.default(borderRing, "ring-highlight-subtle focus:ring-highlight-subtle"),
        false: ""
      },
      shadow: {
        false: "",
        true: "shadow-sm",
        sm: "shadow-sm"
      },
      filled: {
        true: "bg-surface-soft",
        tint: clsx6__default.default("bg-highlight-tint"),
        subtle: clsx6__default.default("bg-highlight-ghost")
      },
      roundedFull: {
        true: "rounded-full"
      }
    }
  }
);
var pickInputSurfaceVariantProps = generatePropPickerFn({
  filled: "_pick_",
  border: "_pick_",
  roundedFull: "_pick_",
  cursor: "_pick_",
  shadow: "_pick_"
});
var primitiveInputClassName = classedCore(
  "p-0",
  "bg-transparent",
  "border-none",
  "focus:ring-0 ring-0",
  "focus:outline-none outline-none",
  "placeholder:text-content-ghost",
  "selection:bg-content-ghost",
  "w-full"
);
var inputComponentWidths = {
  xs: { width: clsx6__default.default("w-80"), minWidth: clsx6__default.default("min-w-[80px]"), maxWidth: clsx6__default.default("max-w-[80px]") },
  sm: { width: clsx6__default.default("w-152"), minWidth: clsx6__default.default("min-w-[152px]"), maxWidth: clsx6__default.default("max-w-[152px]") },
  md: { width: clsx6__default.default("w-216"), minWidth: clsx6__default.default("min-w-[216px]"), maxWidth: clsx6__default.default("max-w-[216px]") },
  lg: { width: clsx6__default.default("w-264"), minWidth: clsx6__default.default("min-w-[264px]"), maxWidth: clsx6__default.default("max-w-[264px]") }
};
var inputWidthPropSizes = objectMap(["width", "minWidth", "maxWidth"], ({ value: widthKey }) => {
  const variants = objectMap(inputComponentWidths, ({ key, value }) => {
    return [key, value[widthKey]];
  });
  return [widthKey, { true: variants.md, ...variants }];
});
var inputSizeClassName = classedCore("div", "w-auto", {
  defaultVariants: {
    fullWidth: false,
    size: "md",
    width: "fixed"
  },
  variants: {
    size: mergeVariants([
      {
        xs: "text-xs",
        sm: "text-sm",
        md: "text-md",
        lg: "text-lg"
      }
      // inputWidthPropSizes.width,
    ]),
    fullWidth: {
      true: "!w-full"
    },
    width: {
      fixed: "",
      auto: "w-auto",
      ...inputWidthPropSizes.width
    },
    minWidth: inputWidthPropSizes.minWidth,
    maxWidth: inputWidthPropSizes.maxWidth
  },
  compoundVariants: [
    ...generateCompoundVariants({
      width: "fixed",
      size: inputWidthPropSizes.width
    })
  ]
});
var pickInputSizeVariantProps = generatePropPickerFn({
  fullWidth: "_pick_",
  minWidth: "_pick_",
  size: "_pick_",
  width: "_pick_",
  maxWidth: "_pick_"
});
var InputGroupElement = classed(
  "div",
  "flex items-stretch",
  "flex-grow focus-within:z-10",
  inputSurfaceClassName,
  inputSizeClassName,
  {
    variants: {
      inputAddonsGap: flexGapVariants
    },
    defaultVariants: {
      size: "md",
      inputAddonsGap: "sm"
    }
  }
);
var pickInputGroupElementVariantProps = generatePropPickerFn({
  ...pickInputSizeVariantProps.pickedRecord,
  ...pickInputSurfaceVariantProps.pickedRecord,
  inputAddonsGap: "_pick_"
});
var InputFieldContainer = classed(
  "div",
  "text-content-intense",
  "border-0",
  "placeholder:select-none",
  "shrink w-full",
  "overflow-hidden",
  {
    variants: {
      size: mergeVariants([sizeVariants.paddingY, sizeVariants.paddingX, sizeVariants.textSize]),
      hasLeadingAddons: {
        false: "rounded-l-[inherit] pl-8",
        true: "pl-0"
      },
      hasTrailingAddons: {
        false: "rounded-none",
        true: "pr-0"
      }
    },
    defaultVariants: {
      size: "md"
    }
  }
);
var defaultInputProps = {
  autoComplete: "off",
  spellCheck: "false",
  formNoValidate: true
};
var BaseInputFieldElement = classed("input", primitiveInputClassName, InputFieldContainer);
BaseInputFieldElement.defaultProps = defaultInputProps;
var BaseInputField = classed(reactAriaComponents.Input, BaseInputFieldElement);
BaseInputField.defaultProps = defaultInputProps;
var headingTextSize = {
  h1: clsx6__default.default("text-h1"),
  h2: clsx6__default.default("text-h2"),
  h3: clsx6__default.default("text-h3"),
  h4: clsx6__default.default("text-h4"),
  h5: clsx6__default.default("text-h5"),
  h6: clsx6__default.default("text-h6")
};
var textSize = {
  xs: clsx6__default.default("text-xs"),
  sm: clsx6__default.default("text-sm"),
  md: clsx6__default.default("text-md"),
  lg: clsx6__default.default("text-lg")
};
var textVariants = {
  fontWeight: {
    regular: clsx6__default.default("font-regular"),
    medium: clsx6__default.default("font-medium"),
    bold: clsx6__default.default("font-bold")
  },
  size: {
    ...textSize,
    ...headingTextSize
  },
  font: {
    body: "font-body",
    heading: "font-heading",
    mono: "font-mono"
  },
  leading: {
    none: clsx6__default.default("leading-none"),
    xs: clsx6__default.default("leading-xs"),
    sm: clsx6__default.default("leading-sm"),
    md: clsx6__default.default("leading-md"),
    lg: clsx6__default.default("leading-lg"),
    h1: clsx6__default.default("leading-h1"),
    h2: clsx6__default.default("leading-h2"),
    h3: clsx6__default.default("leading-h3"),
    h4: clsx6__default.default("leading-h4"),
    h5: clsx6__default.default("leading-h5"),
    h6: clsx6__default.default("leading-h6")
  },
  spaceY: {
    xs: clsx6__default.default("space-y-4"),
    sm: clsx6__default.default("space-y-6"),
    md: clsx6__default.default("space-y-8"),
    lg: clsx6__default.default("space-y-16")
  },
  spaceX: {
    xs: clsx6__default.default("space-x-4"),
    sm: clsx6__default.default("space-x-6"),
    md: clsx6__default.default("space-x-8"),
    lg: clsx6__default.default("space-x-16")
  },
  color: {
    inherit: clsx6__default.default("text-inherit"),
    current: clsx6__default.default("text-current"),
    tint: clsx6__default.default("text-content-tint"),
    ghost: clsx6__default.default("text-content-ghost"),
    subtle: clsx6__default.default("text-content-subtle"),
    medium: clsx6__default.default("text-content"),
    weak: clsx6__default.default("text-content-weak"),
    moderate: clsx6__default.default("text-content-moderate"),
    high: clsx6__default.default("text-content-high"),
    intense: clsx6__default.default("text-content-intense"),
    strong: clsx6__default.default("text-content-intense"),
    inverse: clsx6__default.default("text-inverse"),
    danger: clsx6__default.default("text-danger")
  },
  align: {
    center: clsx6__default.default("text-center"),
    right: clsx6__default.default("text-right"),
    left: clsx6__default.default("text-left"),
    start: clsx6__default.default("text-left"),
    end: clsx6__default.default("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/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__ */ jsxRuntime.jsx(TextDotElement, { viewBox: "0 0 2 2", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 }) });
var DuplicateChildren = ({ count, children }) => {
  const renderChildren = React.useCallback(() => {
    if (count === 1)
      return children;
    return new Array(count).fill(0).map(() => children);
  }, [children, count]);
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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 = react.deriveClassed(
  ({ children, className, as, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsxRuntime.jsx(TextElement, { className, as, ...props, ref: forwardedRef, children });
  }
);
var Header = ({ as, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Text, { as, ...props });
var H1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h1", size: "h1", ...props });
var H2 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h2", size: "h2", ...props });
var H3 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h3", size: "h3", ...props });
var H4 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h4", size: "h4", ...props });
var H5 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h5", size: "h5", ...props });
var H6 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Header, { as: "h6", size: "h6", ...props });
var PresetTextComponent = react.deriveClassed(({ preset, ...props }, forwardedRef) => {
  return /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { ...textComponentProps[preset], ...props, ref: forwardedRef });
});
var Overline = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "overline", ...props });
var Heading = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "heading", ...props });
var Subheading = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "subheading", ...props });
var Title = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "title", ...props });
var Subtitle = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "subtitle", ...props });
var Body = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "body", ...props });
var Description = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "description", ...props });
var Caption = (props) => /* @__PURE__ */ jsxRuntime.jsx(PresetTextComponent, { preset: "caption", ...props });
var Br = (props) => /* @__PURE__ */ jsxRuntime.jsx(DuplicateChildren, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("br", {}) });
var Space = (props) => /* @__PURE__ */ jsxRuntime.jsx(DuplicateChildren, { ...props, children: "\xA0" });
var Blank = (props) => /* @__PURE__ */ jsxRuntime.jsx(DuplicateChildren, { ...props, children: "\u200D" });
var Dash = (props) => /* @__PURE__ */ jsxRuntime.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);
var InputLabelElement = classed(
  "label",
  "text-content-intense text-left",
  "text-sm inline-block  font-medium select-none",
  "relative",
  "leading-xs",
  {
    variants: {
      labelSize: mergeVariants([sizeVariants.textSize, sizeVariants.lineHeight]),
      hideLabel: {
        true: clsx6__default.default("!sr-only"),
        srOnly: "!sr-only",
        invisible: "!invisible"
      },
      bottomMargin: {
        true: "mb-[7px]"
      }
    },
    defaultVariants: {
      hideLabel: false,
      labelSize: "sm"
    }
  }
);
var InputLabel = react.deriveClassed(
  ({
    required = false,
    hideLabel: hideLabelProp,
    children,
    optionalLabel,
    labelDescription,
    inputState,
    ...props
  }) => {
    const optionalLabelText = typeof optionalLabel === "string" ? optionalLabel : "Optional";
    const hasOptionalLabel = !required && optionalLabel;
    const hideLabel = hideLabelProp ?? !Boolean(children);
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: hideLabel === true ? null : /* @__PURE__ */ jsxRuntime.jsxs(InputLabelElement, { ...props, hideLabel, bottomMargin: !labelDescription, children: [
      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "align-middle", children: [
        children ?? /* @__PURE__ */ jsxRuntime.jsx(Text.Blank, {}),
        hasOptionalLabel && /* @__PURE__ */ jsxRuntime.jsx(OptionalLabelElement, { children: optionalLabelText }),
        required && /* @__PURE__ */ jsxRuntime.jsx(
          "span",
          {
            className: clsx6__default.default("ml-px", {
              "text-danger": inputState === "error",
              "text-boundary-moderate": inputState !== "error"
            }),
            children: "*"
          }
        )
      ] }),
      labelDescription && /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "p", size: "xs", className: "leading-sm my-4", color: "weak", children: labelDescription })
    ] }) });
  }
);
var OptionalLabelElement = classed(
  "span",
  "ml-4 px-4 font-medium rounded inline-block text-xs text-content-weak bg-highlight absolute"
);
var InputMessageElement = react.classed(reactAriaComponents.Text, "text-sm mt-[3px] mb-2 ml-2 select-none", {
  variants: {
    inputState: {
      false: "",
      success: clsx6__default.default("text-success"),
      error: clsx6__default.default("text-danger")
    },
    topMargin: {
      true: "mt-6"
    },
    hideMessage: {
      true: "src-only"
    }
  },
  defaultVariants: {
    topMargin: "true",
    inputState: false
  }
});
var InputValidationMessageElement = react.classed(reactAriaComponents.Text, InputMessageElement, {
  variants: {
    inputState: {
      false: "",
      success: clsx6__default.default("text-success"),
      error: clsx6__default.default("text-danger")
    }
  }
});
var InputDescription = ({ ...props }) => {
  return /* @__PURE__ */ jsxRuntime.jsx(InputMessageElement, { ...props });
};
var InputValidationMessage = ({
  inputStateProps,
  ...props
}) => {
  const { inputState, validationMessage } = inputStateProps ?? {};
  return /* @__PURE__ */ jsxRuntime.jsxs(InputValidationMessageElement, { inputState, ...props, children: [
    validationMessage,
    /* @__PURE__ */ jsxRuntime.jsx(Text.Blank, {})
  ] });
};
function resolveInputComponentStateProps({
  error,
  errorMessage,
  success,
  successMessage
}) {
  if (error ?? errorMessage) {
    return {
      error: true,
      success: false,
      inputState: "error",
      validationState: "invalid",
      validationMessage: errorMessage
    };
  }
  if (success ?? successMessage) {
    return {
      success: true,
      error: false,
      inputState: "success",
      validationState: "valid",
      validationMessage: successMessage
    };
  }
  return {
    success: false,
    error: false,
    inputState: void 0,
    validationMessage: void 0,
    validationState: void 0
  };
}
function parseInputStateProps(props) {
  return pickProps(props, {
    error: "_pick_",
    inputState: "_pick_",
    success: "_pick_",
    validationMessage: "_pick_",
    validationState: "_pick_"
  });
}
function useInputWithRefContext() {
  const inputContext = React.useContext(reactAriaComponents.InputContext);
  if (inputContext && "ref" in inputContext) {
    return inputContext;
  }
  return void 0;
}
var InputContainerContext = React.createContext(null);
var InputContainerElement = classed("div", "group inline-block gap-8 flex-wrap", {
  variants: {
    fullWidth: { true: "w-full" }
  }
});
var InputContainer = react.deriveClassed(({ children, ...props }, forwardedRef) => {
  const {
    label,
    labelDescription,
    description,
    optionalLabelIndicator,
    error,
    errorMessage,
    success,
    successMessage,
    inputContainerClassName: className,
    isRequired,
    labelProps,
    hideLabel,
    descriptionProps,
    errorMessageProps,
    showValidationMessageInTooltip,
    hideMessageSlots,
    loading,
    noContainer,
    ...rest
  } = props;
  const inputStateProps = resolveInputComponentStateProps({
    error,
    errorMessage,
    success,
    successMessage
  });
  const { observe, width: childrenWidth } = useDimensions__default.default();
  const showDescriptionSlot = hideMessageSlots ?? Boolean(description);
  const showErrorMessageSlot = hideMessageSlots ?? !showValidationMessageInTooltip;
  const ctxProps = {
    value: { ...props, ...inputStateProps }
  };
  if (noContainer) {
    return /* @__PURE__ */ jsxRuntime.jsx(InputContainerContext.Provider, { ...ctxProps, children });
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(InputContainerElement, { className, ...rest, ref: forwardedRef, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      InputLabel,
      {
        as: reactAriaComponents.Label,
        ...labelProps,
        required: isRequired,
        inputState: inputStateProps.inputState,
        hideLabel,
        optionalLabel: optionalLabelIndicator,
        labelDescription,
        style: { maxWidth: childrenWidth },
        className: "block",
        children: label
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(InputContainerContext.Provider, { ...ctxProps, children: /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ref: observe,
        className: clsx6__default.default({ "inline-block": !props.fullWidth, "w-full": props.fullWidth }),
        children
      }
    ) }),
    showDescriptionSlot && /* @__PURE__ */ jsxRuntime.jsx(InputDescription, { ...descriptionProps, className: "block", slot: "description", children: description }),
    showErrorMessageSlot && /* @__PURE__ */ jsxRuntime.jsx(
      InputValidationMessage,
      {
        ...errorMessageProps,
        inputStateProps,
        className: "block",
        slot: "errorMessage",
        children: errorMessage
      }
    )
  ] });
});
var pickInputContainerProps = generatePropPickerFn({
  label: "_pick_",
  fullWidth: "_pick_",
  children: "_pick_",
  loading: "_pick_",
  descriptionProps: "_pick_",
  errorMessageProps: "_pick_",
  labelProps: "_pick_",
  hideLabel: "_pick_",
  errorMessage: "_pick_",
  hideMessageSlots: "_pick_",
  noContainer: "_pick_",
  description: "_pick_",
  labelDescription: "_pick_",
  optionalLabelIndicator: "_pick_",
  inputContainerClassName: "_pick_",
  successMessage: "_pick_",
  error: "_pick_",
  success: "_pick_",
  isRequired: "_pick_",
  showValidationMessageInTooltip: "_pick_",
  isDisabled: "_pick_"
});
var fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
function getFunctionName(fn) {
  const match = `${fn}`.match(fnNameMatchRegex);
  const name = match && match[1];
  return name || "";
}
function getFunctionComponentName(Component, fallback = "") {
  return Component.displayName || Component.name || getFunctionName(Component) || fallback;
}
function getWrappedName(outerType, innerType, wrapperName) {
  const functionName = getFunctionComponentName(innerType);
  return outerType.displayName || (functionName !== "" ? `${wrapperName}(${functionName})` : wrapperName);
}
function getDisplayName(node) {
  if (!React__namespace.isValidElement(node)) {
    return void 0;
  }
  const component = node.type;
  if (component == null) {
    return void 0;
  }
  if (typeof component === "string") {
    return component;
  }
  const displayName = lodashEs.get(component, "type.displayName");
  if (displayName) {
    return displayName;
  }
  if (typeof component === "function") {
    return getFunctionComponentName(component, "Component");
  }
  if (typeof component === "object") {
    switch (component.$$typeof) {
      case reactIs.ForwardRef:
        return getWrappedName(component, component.render, "ForwardRef");
      case reactIs.Memo:
        return getWrappedName(component, component.type, "memo");
      default:
        return void 0;
    }
  }
  return void 0;
}
var positionVariants = {
  "top-center": "-translate-y-1/2 translate-x-1/2 right-1/2",
  "top-left": "-translate-y-1/2 -translate-x-1/2 right-auto top-0 left-0",
  "top-right": "-translate-y-1/2 translate-x-1/2 left-auto top-0 right-0",
  "middle-center": "-translate-y-1/2 -translate-x-1/2 top-2/4 left-1/2",
  "middle-left": "-translate-y-1/2 -translate-x-1/2 right-auto left-0 top-2/4",
  "middle-right": "-translate-y-1/2 translate-x-1/2 left-auto right-0 top-2/4",
  "bottom-center": "translate-y-1/2 translate-x-1/2 bottom-0 right-1/2",
  "bottom-left": "translate-y-1/2 -translate-x-1/2 right-auto bottom-0 left-0",
  "bottom-right": "translate-y-1/2 translate-x-1/2 left-auto bottom-0 right-0"
};
lodashEs.mapValues(
  positionVariants,
  (className) => clsx6__default.default(className, "absolute")
);
var SpinnerSvg = ({ ...props }) => {
  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", children: /* @__PURE__ */ jsxRuntime.jsxs(
    "svg",
    {
      "aria-hidden": "true",
      viewBox: "0 0 100 101",
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg",
      height: "100%",
      width: "100%",
      className: "fill-current text-current",
      ...props,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          "path",
          {
            d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
            fill: "currentColor"
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          "path",
          {
            d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
            fill: "currentFill"
          }
        )
      ]
    }
  ) });
};
var SpinnerElement = classed(
  SpinnerSvg,
  "w-8 h-8 text-highlight animate-spin fill-primary-light",
  {
    variants: {
      size: mergeVariants([sizeVariants.inlineWidth, sizeVariants.inlineHeight]),
      position: positionVariants,
      autoSize: {
        true: "h-auto w-auto"
      }
      // color: colorVariants.fill,
    },
    defaultVariants: {
      size: "md"
    }
  }
);
var Spinner = (props) => {
  return /* @__PURE__ */ jsxRuntime.jsx(SpinnerElement, { ...props });
};
function Wrap({
  children,
  if: conditionProp,
  wrap: wrapper,
  fallback
}) {
  const fallbackWrapperFn = fallback ?? ((c) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: c }));
  if (!Boolean(conditionProp))
    return fallbackWrapperFn(children);
  const getCondition = () => {
    if (typeof conditionProp === "object") {
      return lodashEs.findKey(conditionProp, (e) => Boolean(e));
    }
    return conditionProp;
  };
  const condition = getCondition();
  const getWrapperFn = () => {
    if (typeof wrapper === "function")
      return wrapper;
    if (typeof wrapper === "object" && typeof condition === "string" && condition in wrapper) {
      return wrapper[condition];
    }
    return fallbackWrapperFn;
  };
  const wrapperFn = getWrapperFn();
  if (typeof condition === "boolean") {
    return Boolean(condition) ? wrapperFn(children) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
  }
  return wrapperFn(children);
}

// src/utils/getElement.ts
function getElement(elementOrRef) {
  if (!elementOrRef)
    return void 0;
  if (elementOrRef instanceof HTMLElement || elementOrRef instanceof Element) {
    return elementOrRef;
  }
  return elementOrRef.current;
}

// src/utils/getNearestColorSchemeAttribute.ts
function getNearestColorSchemeAttribute(element, fallback = "default") {
  if (!isClientSide() || !element)
    return fallback;
  const nearestScheme = element.closest("[data-color-scheme]")?.getAttribute("data-color-scheme");
  return nearestScheme ?? fallback;
}

// src/hooks/useNearestColorSchemeAttribute.tsx
function useNearestColorSchemeAttribute({
  element
}) {
  const [colorSchemeAttribute, setColorSchemeAttribute] = React.useState(
    void 0
  );
  React.useLayoutEffect(() => {
    queueMicrotask(() => {
      const el = getElement(element);
      const colorScheme = getNearestColorSchemeAttribute(el);
      setColorSchemeAttribute(colorScheme);
    });
  }, [element]);
  return colorSchemeAttribute;
}
var TooltipContentElement = classed(
  TooltipPrimitive__namespace.TooltipContent,
  "radix-side-top:animate-slide-down-fade",
  "radix-side-right:animate-slide-left-fade",
  "radix-side-bottom:animate-slide-up-fade",
  "radix-side-left:animate-slide-right-fade",
  "inline-flex items-center py-8 px-10",
  "text-sm font-body",
  "rounded",
  "bg-surface-soft text-content-strong",
  "ring-1 ring-inset ring-content-tint",
  "z-50 relative",
  {
    variants: {
      size: {
        xs: "text-xs py-2 px-4",
        sm: "text-sm py-4 px-6",
        md: "text-md py-6 px-8",
        lg: "text-lg py-4 px-12"
      },
      maxWidth: {
        false: "",
        xs: "max-w-[20ch]",
        sm: "max-w-[30ch]",
        md: "max-w-[38ch]",
        lg: "max-w-[65ch]"
      },
      selectNone: {
        true: "select-none"
      }
    },
    defaultVariants: {
      maxWidth: "md",
      selectNone: true
    }
  }
);
var pickTooltipContentProps = generatePropPickerFn({
  style: "_pick_",
  className: "_pick_",
  "aria-label": "_pick_",
  size: "_pick_",
  align: "_pick_",
  maxWidth: "_pick_",
  selectNone: "_pick_",
  side: "_pick_",
  sideOffset: "_pick_",
  alignOffset: "_pick_",
  arrowPadding: "_pick_",
  collisionBoundary: "_pick_",
  collisionPadding: "_pick_",
  sticky: "_pick_",
  hideWhenDetached: "_pick_",
  avoidCollisions: "_pick_",
  stopPropogation: "_pick_",
  onTooltipClick: "_pick_"
});
var Tooltip = (props) => {
  const triggerRef = React.useRef(null);
  const colorSchemeAttribute = useNearestColorSchemeAttribute({ element: triggerRef });
  const { children, tooltip, triggerProps, triggerAsChild } = pickProps(props, {
    triggerAsChild: true,
    children: "_pick_",
    tooltip: "_pick_",
    triggerProps: {},
    forceMount: "_pick_"
  });
  const tooltipContentProps = pickTooltipContentProps(props);
  const tooltipRootProps = pickProps(props, {
    defaultOpen: "_pick_",
    open: "_pick_",
    onOpenChange: "_pick_",
    delayDuration: "_pick_",
    disableHoverableContent: "_pick_"
  });
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { delayDuration: 100, ...tooltipRootProps, children: [
    /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: triggerAsChild, ref: triggerRef, ...triggerProps, children }),
    /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipContent2, { colorScheme: colorSchemeAttribute, ...tooltipContentProps, children: tooltip }) })
  ] }) });
};
var TooltipContent2 = ({
  children,
  colorScheme,
  onTooltipClick,
  stopPropogation,
  side = "bottom",
  asChild,
  ...contentProps
}) => {
  return /* @__PURE__ */ jsxRuntime.jsx(
    TooltipContentElement,
    {
      size: "md",
      side,
      sideOffset: 4,
      collisionPadding: 4,
      alignOffset: 4,
      "data-color-scheme": colorScheme,
      asChild,
      ...contentProps,
      onClick: (e) => {
        if (stopPropogation) {
          e.stopPropagation();
        }
        onTooltipClick?.(e);
      },
      children
    }
  );
};
Tooltip.Provider = TooltipPrimitive__namespace.Provider;
Tooltip.Root = TooltipPrimitive__namespace.Root;
Tooltip.Trigger = TooltipPrimitive__namespace.Trigger;
Tooltip.Portal = TooltipPrimitive__namespace.Portal;
Tooltip.PrimitiveContent = TooltipPrimitive__namespace.Content;
Tooltip.Content = TooltipContent2;
classed(
  InformationCircleIcon__default.default,
  "rounded-full min-w-[24px] min-h-[24px] h-full w-full"
);
classed("button", "focus:ring-boundary-tint rounded-full");
var InputAddonElement = classed(
  framerMotion.motion.div,
  "group/addon",
  "inline-flex items-center",
  "shrink-0",
  "h-auto w-min",
  "self-stretch",
  "min-h-[20px] min-w-[20px]",
  "cursor-auto",
  "select-none",
  {
    variants: {
      grouping: {
        outside: clsx6__default.default(
          "border-inherit",
          "first:border-r last:border-l",
          "first:rounded-l-[inherit] last:rounded-r-[inherit]"
        ),
        inline: ""
      }
    }
  }
);
var InputAddonInnerElement = classed(
  framerMotion.motion.div,
  "relative z-10",
  "text-sm font-semibold",
  "inline-flex items-center justify-center",
  "align-middle",
  "shrink-0",
  "gap-x-4",
  "ring-inset focus:ring-inset focus:-outline-offset-2",
  "w-auto",
  "px-4",
  "rounded-[inherit]",
  {
    variants: {
      fullHeight: {
        false: "h-min",
        true: "h-auto self-stretch"
      },
      size: mergeVariants([
        sizeVariants.inlineHeight,
        sizeVariants.inlineWidth,
        sizeVariants.textSize,
        sizeVariants.paddingX
      ]),
      cursorPointer: {
        true: "!cursor-pointer"
      },
      noPadding: {
        true: "!p-0"
      },
      invisible: {
        true: "invisible"
      },
      clickable: {
        true: "cursor-pointer"
      }
    }
  }
);
var InputAddon = React.forwardRef((props, forwardedRef) => {
  const {
    children,
    size,
    loadingSpinner,
    iconClassName,
    grouping = "inline",
    className,
    _inputRef,
    tooltip,
    invisible,
    enabled = true,
    enableTooltip,
    preventDefault,
    noPadding,
    focusInputOnClick: focusInputOnClickProp,
    excludeFromTabOrder: excludeFromTabOrderProp,
    onClick,
    onHoverChange,
    onHoverEnd,
    onHoverStart,
    isGroupHovered,
    enterAnimation = false,
    as: asProp,
    ...rest
  } = props;
  const focusInputOnClick = focusInputOnClickProp ?? grouping === "inline";
  const excludeFromTabOrder = excludeFromTabOrderProp ?? grouping === "inline";
  const tooltipEnabled = enableTooltip && Boolean(tooltip) || Boolean(tooltip);
  const { hoverProps, isHovered } = reactAria.useHover({ onHoverChange, onHoverEnd, onHoverStart });
  const as = onClick ? "button" : "div";
  const inputRef = _inputRef && "current" in _inputRef ? _inputRef : void 0;
  const clickable = !focusInputOnClick || invisible || Boolean(onClick);
  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: !enabled ? null : (
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ jsxRuntime.jsx(
      InputAddonElement,
      {
        grouping,
        onClick: () => {
          inputRef?.current?.focus();
        },
        layout: "preserve-aspect",
        children: /* @__PURE__ */ jsxRuntime.jsx(
          Wrap,
          {
            if: tooltipEnabled,
            wrap: (c) => {
              return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Root, { delayDuration: 100, children: [
                /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Content, { side: "bottom", size: "sm", children: tooltip }),
                /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: c })
              ] });
            },
            children: /* @__PURE__ */ jsxRuntime.jsxs(
              InputAddonInnerElement,
              {
                ref: forwardedRef,
                initial: enterAnimation ? { scale: 0 } : {},
                animate: { scale: 1, transition: { delay: 0.2, bounce: 0, duration: 0.3 } },
                exit: { scale: 0 },
                "aria-hidden": invisible,
                disabled: invisible,
                className,
                tabIndex: excludeFromTabOrder ? -1 : void 0,
                clickable,
                cursorPointer: tooltipEnabled,
                noPadding,
                invisible,
                layout: "preserve-aspect",
                ...rest,
                ...hoverProps,
                as,
                onClick: (e) => {
                  if (!focusInputOnClick) {
                    e.stopPropagation();
                  }
                  if (!focusInputOnClick && (preventDefault ?? as === "div")) {
                    e.preventDefault();
                  }
                  if (onClick) {
                    onClick(e);
                  }
                },
                children: [
                  iconClassName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("min-h-[20px] min-w-[20px]", iconClassName) }),
                  loadingSpinner && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm" }) }),
                  typeof children === "function" ? children({
                    size,
                    isHovered,
                    isGroupHovered: Boolean(isGroupHovered)
                  }) : children
                ]
              }
            )
          }
        )
      }
    )
  ) });
});
InputAddon.displayName = "InputAddon";
function useInputAddonList(props) {
  return findInputIcons(props);
}
function findInputIcons({
  leadingIcon,
  trailingIcon,
  loading,
  size,
  inputStateProps,
  children,
  inputRef,
  showValidationMessageInTooltip,
  isGroupHovered,
  defaultInputAddonProps
}) {
  const reducedAddons = React.Children.toArray(children).reduce(
    (acc, childNode) => {
      if (!isInputAddon(childNode)) {
        return acc;
      }
      const child = {
        ...childNode,
        props: { ...defaultInputAddonProps, ...childNode.props, size }
      };
      const { props } = child;
      const { position = "trailing", grouping = "inline" } = props;
      if (position === "leading" && grouping === "inline") {
        acc.leadingInlineAddons.push(child);
        return acc;
      }
      if (position === "trailing" && grouping === "inline") {
        acc.trailingInlineAddons.push(child);
        return acc;
      }
      if (position === "leading" && grouping === "outside") {
        acc.leadingOutsideAddons.push(child);
        return acc;
      }
      if (position === "trailing" && grouping === "outside") {
        acc.trailingOutsideAddons.push(child);
        return acc;
      }
      return acc;
    },
    {
      leadingInlineAddons: [],
      trailingInlineAddons: [],
      trailingOutsideAddons: [],
      leadingOutsideAddons: []
    }
  );
  const { leadingIconAddonProps, trailingIconAddonProps } = lodashEs.mapValues(
    { leadingIconAddonProps: leadingIcon, trailingIconAddonProps: trailingIcon },
    (icon, key) => {
      if (key === "leadingIconAddonProps" && icon) {
        return {
          grouping: "inline",
          children: icon
        };
      }
      if (key === "trailingIconAddonProps" && icon) {
        return {
          grouping: "inline",
          position: "trailing",
          loadingSpinner: loading,
          children: icon,
          enterAnimation: true
        };
      }
      if (key === "trailingIconAddonProps" && loading) {
        return {
          loadingSpinner: loading
        };
      }
      return void 0;
    }
  );
  const leadingIconAddon = leadingIconAddonProps && /* @__PURE__ */ jsxRuntime.jsx(InputAddon, { ...leadingIconAddonProps });
  const trailingIconAddon = trailingIconAddonProps && /* @__PURE__ */ jsxRuntime.jsx(InputAddon, { ...trailingIconAddonProps });
  const { leadingInlineAddons, leadingOutsideAddons, trailingInlineAddons, trailingOutsideAddons } = reducedAddons;
  if (inputStateProps?.inputState) {
    trailingInlineAddons.push(
      /* @__PURE__ */ jsxRuntime.jsx(
        InputStateAddon,
        {
          inputStateProps,
          showValidationMessageInTooltip,
          _inputRef: inputRef
        }
      )
    );
  }
  const leadingAddons = [...leadingOutsideAddons, leadingIconAddon, ...leadingInlineAddons].filter(
    notEmpty
  );
  const trailingAddons = [
    ...trailingInlineAddons,
    trailingIconAddon,
    ...trailingOutsideAddons
  ].filter(notEmpty);
  const addons = objectMap(reducedAddons, ({ key, value }) => {
    return [
      key,
      value.map(
        (e) => React.cloneElement(e, { _inputRef: inputRef, isGroupHovered })
      )
    ];
  });
  return {
    hasLeadingAddons: Boolean(leadingAddons.length),
    hasTrailingAddons: Boolean(trailingAddons.length),
    ...addons,
    leadingIconAddon,
    trailingIconAddon
  };
}
var InputStateAddon = ({
  inputStateProps,
  tooltip,
  showValidationMessageInTooltip,
  ...props
}) => {
  const stateClassNames = {
    error: {
      container: "ring-danger/30",
      text: "text-danger",
      icon: clsx6__default.default("i-heroicons-x-circle-20-solid")
    },
    success: {
      container: "ring-success/30",
      text: "text-success",
      icon: clsx6__default.default("i-heroicons-check-circle-20-solid")
    }
  };
  const { inputState, validationMessage } = inputStateProps ?? {};
  const hasValidationState = inputState && inputState in stateClassNames;
  const stateClassName = hasValidationState ? stateClassNames[inputState] : void 0;
  return /* @__PURE__ */ jsxRuntime.jsx(
    InputAddon,
    {
      grouping: "inline",
      position: "trailing",
      className: "!pr-6",
      excludeFromTabOrder: true,
      focusInputOnClick: true,
      enabled: Boolean(showValidationMessageInTooltip && hasValidationState),
      tooltip: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx6__default.default(stateClassName?.text), children: validationMessage }),
      ...props,
      children: /* @__PURE__ */ jsxRuntime.jsx(
        "div",
        {
          className: clsx6__default.default(
            "rounded-full ring  ring-inset flex items-center justify-center",
            stateClassName?.container
          ),
          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx6__default.default("h-18 w-18", stateClassName?.icon, stateClassName?.text) })
        }
      )
    }
  );
};
function isInputAddon(element) {
  return getDisplayName(element) === "InputAddon";
}
function useInputWithRefContext2() {
  const inputContext = React.useContext(reactAriaComponents.InputContext);
  if (inputContext && "ref" in inputContext) {
    return inputContext;
  }
  return void 0;
}
var MotionInputGroup = framerMotion.motion(InputGroupElement);
var InputAddonGroup = react.deriveClassed(
  ({ children, renderInput, defaultInputAddonProps, ...props }, forwardedRef) => {
    const contextProps = React.useContext(InputContainerContext);
    const inputStateProps = contextProps ? parseInputStateProps(contextProps) : void 0;
    const mergedProps = { ...contextProps, ...props };
    const { leadingIcon, trailingIcon, size, loading, showValidationMessageInTooltip } = mergedProps;
    const { ref } = useInputWithRefContext2() ?? {};
    const { hoverProps, isHovered: isGroupHovered } = reactAria.useHover(props);
    const {
      leadingInlineAddons,
      leadingOutsideAddons,
      trailingInlineAddons,
      trailingOutsideAddons,
      leadingIconAddon,
      hasLeadingAddons,
      hasTrailingAddons,
      trailingIconAddon
    } = useInputAddonList({
      leadingIcon,
      trailingIcon,
      size,
      inputStateProps,
      children,
      loading,
      inputRef: ref,
      showValidationMessageInTooltip,
      isGroupHovered,
      defaultInputAddonProps
    });
    return /* @__PURE__ */ jsxRuntime.jsxs(
      MotionInputGroup,
      {
        role: "button",
        ...props,
        ...pickInputGroupElementVariantProps(mergedProps),
        ref: forwardedRef,
        layout: "preserve-aspect",
        initial: false,
        ...hoverProps,
        children: [
          leadingOutsideAddons,
          leadingIconAddon,
          leadingInlineAddons,
          renderInput({ inputRef: ref, hasLeadingAddons, hasTrailingAddons, size }),
          trailingInlineAddons,
          trailingIconAddon,
          trailingOutsideAddons
        ]
      }
    );
  }
);

// src/components/Input/intlFormatOptionPresets.ts
var intlNumberFormatPresets = {
  currency: {
    style: "currency",
    currency: "USD",
    currencyDisplay: "symbol",
    signDisplay: "auto",
    useGrouping: true,
    minimumIntegerDigits: 1,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
    minimumSignificantDigits: void 0,
    maximumSignificantDigits: void 0
  },
  percent: {
    style: "percent",
    useGrouping: true,
    minimumIntegerDigits: 1,
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
    minimumSignificantDigits: void 0,
    maximumSignificantDigits: void 0
  }
};
function getIntlNumberFormatOptions({
  type,
  formatOptions
}) {
  const preset = type ? intlNumberFormatPresets[type] : void 0;
  if (!formatOptions && !preset)
    return void 0;
  return {
    ...preset,
    ...formatOptions
  };
}
var NumberField = React.forwardRef(({ children, placeholder, name, ...props }, forwardedRef) => {
  return /* @__PURE__ */ jsxRuntime.jsx(
    InputContainer,
    {
      ...props,
      as: reactAriaComponents.NumberField,
      formatOptions: getIntlNumberFormatOptions({
        type: props.type,
        formatOptions: props.formatOptions
      }),
      children: /* @__PURE__ */ jsxRuntime.jsxs(
        InputAddonGroup,
        {
          renderInput: ({ hasLeadingAddons, hasTrailingAddons }) => /* @__PURE__ */ jsxRuntime.jsx(
            BaseInputField,
            {
              ref: forwardedRef,
              name,
              size: props.size,
              placeholder,
              hasLeadingAddons,
              hasTrailingAddons
            }
          ),
          children: [
            children,
            /* @__PURE__ */ jsxRuntime.jsx(InputAddon, { position: "trailing", grouping: "outside", noPadding: true, as: "div", fullHeight: true, children: /* @__PURE__ */ jsxRuntime.jsx(NumberIncrementorButtonGroup, {}) })
          ]
        }
      )
    }
  );
});
var NumberIncrementorButtonElement = classed(
  reactAriaComponents.Button,
  "flex items-center justify-center grow bg-surface-soft hover:bg-surface-dark",
  "min-w-[28px]",
  "relative",
  "transition-colors",
  "hover:text-boundary-moderate active:text-boundary-high",
  "before:w-2/3",
  'before:content-[""]',
  "before:absolute",
  "before:top-1/2 before:left-1/2",
  "before:transform before:-translate-x-1/2 before:-translate-y-1/2",
  {
    variants: {
      variant: {
        increment: "before:i-heroicons-chevron-up-20-solid",
        decrement: "relative before:i-heroicons-chevron-down-20-solid"
      }
    }
  }
);
var NumberIncrementorButtonGroup = () => {
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      className: clsx6__default.default(
        "flex flex-col justify-between",
        "w-full  grow h-full",
        // 'py-1 pr-1',
        "border-r border-y",
        "rounded-[inherit] overflow-hidden",
        "divide-y divide-boundary-weak"
      ),
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(NumberIncrementorButtonElement, { slot: "increment", variant: "increment" }),
        /* @__PURE__ */ jsxRuntime.jsx(NumberIncrementorButtonElement, { slot: "decrement", variant: "decrement" })
      ]
    }
  );
};
var TextField = React.forwardRef(
  ({ children, placeholder, renderInput, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsxRuntime.jsx(InputContainer, { as: reactAriaComponents.TextField, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
      InputAddonGroup,
      {
        renderInput: (renderProps) => {
          if (renderInput)
            return renderInput({
              ...renderProps,
              placeholder,
              loading: props.loading,
              size: props.size
            });
          return /* @__PURE__ */ jsxRuntime.jsx(
            BaseInputField,
            {
              ref: forwardedRef,
              size: props.size,
              placeholder,
              hasLeadingAddons: renderProps.hasLeadingAddons,
              hasTrailingAddons: renderProps.hasTrailingAddons
            }
          );
        },
        children
      }
    ) });
  }
);
function measureElement(elementOrRef, options) {
  const { includeMargin = false, excludePadding = false, excludeBorder = false } = options ?? {};
  const el = getElement(elementOrRef);
  const signs = {
    margin: includeMargin ? 1 : 0,
    padding: excludePadding ? -1 : 0,
    border: excludeBorder ? -1 : 0
  };
  const cssAttributes = getCssAttributeDataMap(el);
  function getSize(value, property) {
    const sum = lodashEs.reduce(
      signs,
      (acc, sign, key) => {
        const size = cssAttributes[key][property];
        return acc + size * sign;
      },
      value
    );
    return Math.round(sum);
  }
  const {
    width = 0,
    height = 0,
    top = 0,
    bottom = 0,
    left = 0,
    right = 0
  } = el?.getBoundingClientRect() ?? {};
  const {
    offsetTop = 0,
    offsetLeft = 0,
    offsetWidth = 0,
    offsetHeight = 0,
    scrollLeft = 0,
    scrollWidth = 0,
    scrollTop = 0,
    scrollHeight = 0,
    clientWidth = 0,
    clientHeight = 0
  } = el ?? {};
  const measurements = {
    width: getSize(width, "width"),
    height: getSize(height, "height"),
    top: getSize(top, "top"),
    bottom: getSize(bottom, "bottom"),
    left: getSize(left, "left"),
    right: getSize(right, "right"),
    offsetTop,
    offsetLeft,
    offsetHeight,
    offsetWidth,
    clientWidth,
    clientHeight,
    scrollLeft,
    scrollWidth,
    scrollTop,
    scrollHeight
  };
  return measurements;
}
function getCssAttributeDataMap(el) {
  return objectMap(["margin", "border", "padding"], ({ value: attribute }) => {
    const properties = objectMap(["top", "bottom", "left", "right"], ({ value: baseProperty }) => {
      const attributeKey = `${attribute}${changeCase(baseProperty, "capitalize")}`;
      const value = el ? lodashEs.parseInt(getComputedStyle(el)[attributeKey]) : 0;
      return [baseProperty, value];
    });
    const { left, right, top, bottom } = properties;
    const width = left + right;
    const height = top + bottom;
    const attributeData = { width, height, left, right, top, bottom };
    return [attribute, attributeData];
  });
}
var TextAreaField = React.forwardRef(({ children, placeholder, resizeable, rows, cols, ...props }, forwardedRef) => {
  return /* @__PURE__ */ jsxRuntime.jsx(InputContainer, { ...props, as: reactAriaComponents.TextField, children: /* @__PURE__ */ jsxRuntime.jsx(
    BaseTextArea,
    {
      ref: forwardedRef,
      size: props.size,
      rows,
      cols,
      placeholder,
      resizeable,
      ...props
    }
  ) });
});
var BaseTextAreaElement = classed(
  "textarea",
  BaseInputFieldElement,
  inputSurfaceClassName,
  inputSizeClassName,
  "p-8 text-content",
  "overflow-auto",
  {
    variants: {
      resizeable: {
        false: clsx6__default.default("resize-none"),
        true: clsx6__default.default("resize-none hover:resize focus:resize active:resize"),
        y: clsx6__default.default("resize-none hover:resize-y focus:resize-y active:resize-y"),
        x: clsx6__default.default("resize-none hover:resize-x focus:resize-x active:resize-x")
      }
    }
  }
);
BaseTextAreaElement.defaultProps = defaultInputProps;
var pickBaseTextAreaProps = generatePropPickerFn({
  filled: "_pick_",
  border: "_pick_",
  shadow: "_pick_",
  cursor: "_pick_",
  roundedFull: "_pick_",
  size: "_pick_",
  fullWidth: "_pick_",
  width: "_pick_",
  minWidth: "_pick_",
  maxWidth: "_pick_",
  hasLeadingAddons: "_pick_",
  hasTrailingAddons: "_pick_",
  resizeable: "_pick_",
  cols: "_pick_",
  rows: "_pick_",
  placeholder: "_pick_"
});
var BaseTextArea = React.forwardRef(
  (props, forwardedRef) => {
    const inputContainerProps = pickInputContainerProps(props);
    const baseTextAreaProps = pickBaseTextAreaProps(props, {
      defaultProps: {
        rows: 4,
        border: "subtle",
        resizeable: false,
        minWidth: false,
        maxWidth: false
      }
    });
    const inputProps = useInputWithRefContext() ?? {};
    const innerRef = React.useRef(null);
    const ref = utils.mergeRefs(
      inputProps.ref,
      innerRef,
      forwardedRef
    );
    const initialHeight = React.useRef();
    React.useLayoutEffect(() => {
      if (!initialHeight.current && innerRef.current) {
        const { height } = measureElement(innerRef);
        initialHeight.current = height;
      }
    }, []);
    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        BaseTextAreaElement,
        {
          ...inputProps,
          onChange: (e) => {
            inputProps.onChange?.(e);
          },
          ...inputContainerProps,
          ref,
          ...baseTextAreaProps,
          style: { minHeight: initialHeight.current }
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Input, { ...props }) })
    ] });
  }
);
var SvgIconWrapper = ({
  children,
  asChild,
  autoSize = true,
  viewbox = "20",
  className,
  svgProps,
  strokeWidth,
  rounded,
  ...props
}) => {
  const Svg = asChild ? reactSlot.Slot : "svg";
  const size = autoSize ? "100%" : viewbox;
  const { className: roundedClassName, ...roundedProps } = (rounded ? {
    className: "rounded-full",
    strokeLinejoin: "round",
    strokeLinecap: "round"
  } : void 0) ?? {};
  return /* @__PURE__ */ jsxRuntime.jsx(
    Svg,
    {
      className: tailwindMerge.twMerge(roundedClassName, className),
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: `0 0 ${viewbox} ${viewbox}`,
      height: size,
      width: size,
      fill: "currentColor",
      stroke: "currentColor",
      ...roundedProps,
      strokeWidth,
      ...props,
      children
    }
  );
};
var svgIcon = (svg, defaultProps) => {
  const SvgIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(SvgIconWrapper, { ...props, ...defaultProps, asChild: true, children: svg });
  return SvgIcon;
};
function getSizeVariant(prop) {
  return objectMap(sizePropVariants, ({ key, value }) => {
    return [key, value[prop]];
  });
}
var sizePropVariants = {
  auto: {
    children: "gap-8",
    checkbox: "h-full w-full"
  },
  xs: {
    checkbox: "h-16 w-16 p-1",
    children: "leading-[16px] text-xs gap-4"
  },
  sm: {
    checkbox: "h-20 w-20 p-[1.5px]",
    children: "leading-[20px] text-sm gap-6"
  },
  md: {
    checkbox: "h-22 w-22 p-2",
    children: "leading-[22px] text-md gap-8"
  },
  lg: {
    checkbox: "h-26 w-26 p-[3px]",
    children: "leading-[26px] text-h4 gap-8"
  }
};
var CheckboxElement = classed(
  "div",
  "shrink-0",
  "cursor-pointer",
  "border border-boundary-weak",
  "rounded-[0.185rem]",
  "text-content-intense",
  "relative",
  "ml-2 mt-2",
  {
    defaultVariants: {
      size: "md",
      focusVisibleRing: true
    },
    variants: {
      size: getSizeVariant("checkbox"),
      isSelected: {
        true: "bg-primary text-primary-content border-highlight",
        false: "bg-highlight-subtle"
      },
      isDisabled: {
        true: "text-content-moderate cursor-auto bg-surface-dark border-highlight-moderate"
      },
      isReadOnly: {
        true: "!cursor-not-allowed"
      },
      focusVisibleRing: {
        true: "group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-content-intense"
      }
    },
    compoundVariants: [
      {
        isReadOnly: true,
        isSelected: true,
        className: clsx6__default.default("bg-primary noisy-surface-texture before:opacity-5 text-primary-soft")
      },
      {
        isReadOnly: true,
        isSelected: false,
        class: "bg-surface-dark"
      }
    ]
  }
);
var CheckboxContainerElement = classed(
  "div",
  "flex items-center gap-8",
  "cursor-pointer select-none",
  "relative",
  "grow",
  {
    defaultVariants: {
      size: "md"
    },
    variants: {
      size: getSizeVariant("children"),
      isDisabled: {
        true: "text-content-moderate"
      },
      isReadOnly: {
        true: "cursor-auto text-content-moderate"
      }
    }
  }
);
var BasicCheckbox = React.forwardRef(
  ({
    children,
    size,
    isSelected: isSelectedProp,
    checkboxContainerClassName,
    checkboxClassName,
    value,
    pointerEventsNone,
    label,
    tooltip,
    containerElement,
    ...props
  }, forwardedRef) => {
    const toggleState = reactStately.useToggleState({
      isSelected: isSelectedProp
    });
    const isSelected = toggleState.isSelected && !props.isIndeterminate;
    return /* @__PURE__ */ jsxRuntime.jsx(
      reactAriaComponents.Checkbox,
      {
        ...props,
        onChange: (e) => {
          props.onChange?.(e);
        },
        ref: forwardedRef,
        value,
        isSelected,
        onKeyDown: (e) => {
          if (e.key === "Enter" || e.key === "Space") {
            toggleState.toggle();
          }
          props.onKeyDown?.(e);
        },
        className: clsx6__default.default("group", { "pointer-events-none": pointerEventsNone }),
        children: (renderFnProps) => {
          const { isSelected: isSelected2, isIndeterminate } = renderFnProps;
          const renderProps = { size, ...renderFnProps };
          return /* @__PURE__ */ jsxRuntime.jsx(
            Wrap,
            {
              if: Boolean(tooltip),
              wrap: (c) => {
                return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Root, { children: [
                  /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Content, { side: "right", align: "center", size: "sm", children: tooltip }),
                  /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: c })
                ] });
              },
              children: /* @__PURE__ */ jsxRuntime.jsxs(
                CheckboxContainerElement,
                {
                  as: containerElement,
                  onClick: () => {
                    toggleState.toggle();
                  },
                  className: renderPropsClassName({
                    className: checkboxContainerClassName,
                    renderProps
                  }),
                  isReadOnly: renderProps.isReadOnly,
                  isDisabled: renderProps.isDisabled,
                  children: [
                    /* @__PURE__ */ jsxRuntime.jsx(
                      CheckboxElement,
                      {
                        isSelected: renderProps.isSelected,
                        isReadOnly: renderProps.isReadOnly,
                        isDisabled: renderProps.isDisabled,
                        className: renderPropsClassName({ className: checkboxClassName, renderProps }),
                        children: isSelected2 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                          !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckedSvg, { autoSize: true }) }),
                          isIndeterminate && /* @__PURE__ */ jsxRuntime.jsx(IndertermidateSvg, { autoSize: true })
                        ] })
                      }
                    ),
                    label && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                      " ",
                      label
                    ] }),
                    typeof children === "function" ? children(renderProps) : children
                  ]
                }
              )
            }
          );
        }
      }
    );
  }
);
var pickCheckboxProps = generatePropPickerFn({
  children: "_pick_",
  label: "_pick_",
  tooltip: "_pick_",
  isRequired: "_pick_",
  size: "_pick_",
  slot: "_pick_",
  style: "_pick_",
  className: "_pick_",
  id: "_pick_",
  "aria-controls": "_pick_",
  "aria-describedby": "_pick_",
  "aria-details": "_pick_",
  "aria-errormessage": "_pick_",
  "aria-label": "_pick_",
  "aria-labelledby": "_pick_",
  onFocus: "_pick_",
  onBlur: "_pick_",
  onChange: "_pick_",
  onKeyDown: "_pick_",
  onKeyUp: "_pick_",
  autoFocus: "_pick_",
  name: "_pick_",
  value: "_pick_",
  excludeFromTabOrder: "_pick_",
  isDisabled: "_pick_",
  isReadOnly: "_pick_",
  validationState: "_pick_",
  onFocusChange: "_pick_",
  isIndeterminate: "_pick_",
  defaultSelected: "_pick_",
  isSelected: "_pick_",
  focusVisibleRing: "_pick_",
  checkboxClassName: "_pick_",
  checkboxContainerClassName: "_pick_",
  pointerEventsNone: "_pick_",
  containerElement: "_pick_"
});
function renderPropsClassName({
  className,
  renderProps
}) {
  return typeof className === "function" ? className(renderProps) : className;
}
var CheckedSvg = svgIcon(
  /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 10", className: "fill-none stroke-current stroke-2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "1.5 6 4.5 9 10.5 1" }) }),
  { autoSize: true, "aria-hidden": true }
);
var IndertermidateSvg = svgIcon(
  /* @__PURE__ */ jsxRuntime.jsx("svg", { strokeWidth: "3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 12H6" }) }),
  { autoSize: true, "aria-hidden": true }
);
var gridColumns = {
  "1": "grid-cols-1",
  "2": "grid-cols-2",
  "3": "grid-cols-3",
  "4": "grid-cols-4",
  "5": "grid-cols-5",
  "6": "grid-cols-6",
  "7": "grid-cols-7",
  "8": "grid-cols-8",
  "9": "grid-cols-9",
  "10": "grid-cols-10",
  "11": "grid-cols-11",
  "12": "grid-cols-12"
};
var CheckboxGroupField = ({
  children,
  placeholder,
  label,
  size,
  options,
  columns = "1",
  ...props
}) => {
  return /* @__PURE__ */ jsxRuntime.jsx(InputContainer, { label, ...props, as: reactAriaComponents.CheckboxGroup, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx6__default.default("grid grid-cols-2 gap-x-8", gridColumns[columns]), children: options.map(({ label: label2, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(InputFieldContainer, { className: "px-0", size, children: /* @__PURE__ */ jsxRuntime.jsx(BasicCheckbox, { size, ...rest, children: label2 }) })) }) });
};
var CheckboxField = React.forwardRef(
  ({
    children,
    placeholder,
    className,
    label,
    size,
    onChange,
    onFocus,
    onBlur,
    onFocusChange,
    onKeyDown,
    onKeyUp,
    style,
    validationState,
    value,
    ...props
  }, forwardedRef) => {
    return /* @__PURE__ */ jsxRuntime.jsx(InputContainer, { ...props, hideLabel: true, children: /* @__PURE__ */ jsxRuntime.jsx(InputGroupElement, { width: "auto", cursor: "pointer", filled: Boolean(label), minWidth: false, children: /* @__PURE__ */ jsxRuntime.jsx(
      BasicCheckbox,
      {
        ...pickCheckboxProps(props),
        ref: forwardedRef,
        onChange,
        focusVisibleRing: false,
        containerElement: InputFieldContainer,
        size,
        children: label
      }
    ) }) });
  }
);

// src/components/Input/Input.tsx
var Input = Object.assign(TextField, {
  TextField,
  NumberField,
  TextAreaField,
  CheckboxField,
  CheckboxGroupField,
  Container: InputContainer,
  Addon: InputAddon,
  AddonGroup: InputAddonGroup,
  BaseInputField,
  Label: InputLabel,
  InputFieldContainer
});
var SliderContainerElement = classed("div", "inline-flex flex-col items-center", "text-xs");
var ThumbElement = classed(
  "div",
  "rounded-[50%] box-border",
  // 'border-2 border-palette-white',
  "border-[3.5px]  border-palette-white ring-palette-white/10",
  "transition-[colors,background-color,width,height,box-shadow]",
  "shadow"
);
var TrackElement = classed("div", "rounded-full w-full cursor-pointer");
function ColorSlider({
  className,
  trackingThickness = 13,
  thumbSize = 20,
  ...props
}) {
  const { locale } = i18n.useLocale();
  const state = color.useColorSliderState({ ...props, locale });
  const trackRef = React__namespace.default.useRef(null);
  const inputRef = React__namespace.default.useRef(null);
  const label = props.label ?? state.value.getChannelName(props.channel, locale);
  const { trackProps, thumbProps, inputProps, labelProps } = color$1.useColorSlider(
    {
      ...props,
      label,
      trackRef,
      inputRef
    },
    state
  );
  const { focusProps, isFocusVisible } = focus.useFocusRing();
  const thumbDiameter = isFocusVisible ? thumbSize + 3.5 : thumbSize;
  const minValue = state.getThumbMinValue(0);
  const maxValue = state.getThumbMaxValue(0);
  return /* @__PURE__ */ jsxRuntime.jsxs(SliderContainerElement, { className, children: [
    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { justify: "between", fullWidth: true, className: "select-none", children: [
      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: "mb-2 font-medium grow", ...labelProps, children: label }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
        Input.NumberField,
        {
          ref: inputRef,
          ...inputProps,
          ...focusProps,
          minValue,
          maxValue,
          onChange: () => {
          },
          style: {
            maxWidth: `${(inputProps.maxLength ?? 3) + 3}ch`,
            minWidth: `${(inputProps.minLength ?? 3) + 3}ch`,
            paddingRight: "1.5ch"
          },
          className: "text-right pr-[1ch] bg-highlight-tint rounded focus-visible::bg-highlight-ghost mb-4 text-sm"
        }
      ) })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(
      TrackElement,
      {
        ...trackProps,
        ref: trackRef,
        style: {
          ...trackProps.style,
          height: trackingThickness
        },
        children: /* @__PURE__ */ jsxRuntime.jsx(
          ThumbElement,
          {
            ...thumbProps,
            style: {
              // border: '2px solid white',
              borderRadius: "50%",
              // boxSizing: 'border-box',
              // boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
              ...thumbProps.style,
              top: trackingThickness / 2,
              width: thumbDiameter,
              height: thumbDiameter,
              background: state.getDisplayColor().toString("css")
            },
            children: /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, ...inputProps, ...focusProps }) })
          }
        )
      }
    )
  ] });
}

exports.ColorArea = ColorArea;
exports.ColorSlider = ColorSlider;
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.cjs.map