qstd 0.1.5 → 0.1.6

package/dist/react/index.cjs

@@ -11,7 +11,6 @@ var reactSpinners = require('react-spinners');
 var reactLoaderSpinner = require('react-loader-spinner');
 var jsxRuntime = require('react/jsx-runtime');
 var nanoid = require('nanoid');
-var mmb = require('music-metadata-browser');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
 var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
@@ -38,7 +37,8 @@ function _interopNamespace(e) {
 }
 
 var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
-var mmb__namespace = /*#__PURE__*/_interopNamespace(mmb);
+
+// src/react/index.ts
 
 // styled-system/helpers.mjs
 function isObject(value) {
@@ -905,7 +905,8 @@ var extractImageMetadata = (f) => {
   });
 };
 var extractAudioMetadata = async (f) => {
-  const meta = await mmb__namespace.parseBlob(f, { duration: true });
+  const mmb = await import('music-metadata-browser');
+  const meta = await mmb.parseBlob(f, { duration: true });
   return new Promise((res, rej) => {
     if (!f) rej("No audio file provided.");
     const ext = f.name.split(".").pop();

package/dist/react/index.d.cts

@@ -1,17 +1,15 @@
-import * as React$1 from 'react';
+import * as React from 'react';
 import React__default, { ElementType, ComponentType, Component, JSX, ComponentPropsWithRef } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IAudioMetadata } from 'music-metadata-browser';
-import * as framer_motion from 'framer-motion';
-import { VariantLabels, Transition } from 'framer-motion';
 import { IconName, SizeProp } from '@fortawesome/fontawesome-svg-core';
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
-import { TargetAndTransition } from 'motion-dom';
 import { Placement as Placement$1 } from '@floating-ui/react';
 import { IconType } from 'react-icons/lib';
 import * as Panda from '@pandacss/dev';
 import * as react_loader_spinner from 'react-loader-spinner';
 import { BeatLoader } from 'react-spinners';
+import * as framer_motion from 'framer-motion';
+import { Transition } from 'framer-motion';
 
 /* eslint-disable */
 interface ConditionOptions {
@@ -19989,9 +19987,9 @@ interface PatchedHTMLProps {
   htmlContent?: string
 }
 
-type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'
+type OmittedHTMLProps$1 = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'
 
-type WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps
+type WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps$1> & PatchedHTMLProps
 
 type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<
   WithHTMLProps<T>,
@@ -20121,38 +20119,6 @@ type SlotRecipeConfig<
   T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
 > = SlotRecipeDefinition<S, T> & RecipeConfigMeta
 
-/* eslint-disable */
-
-
-interface Dict {
-  [k: string]: unknown
-}
-
-interface UnstyledProps {
-  /**
-   * Whether to remove recipe styles
-   */
-  unstyled?: boolean | undefined
-}
-
-interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
-  ? JSX.LibraryManagedAttributes<T, P>
-  : ComponentPropsWithRef<T>
-
-interface StyledComponent<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string | undefined
-}
-
-type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
-
 /* eslint-disable */
 interface Part {
   selector: string
@@ -20481,130 +20447,75 @@ declare module '@pandacss/dev' {
   export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>
 }
 
-declare const base: StyledComponent<"div", {}>;
-declare const tags: {
-    readonly div: StyledComponent<"div", {}>;
-    readonly a: StyledComponent<"a", {}>;
-    readonly br: StyledComponent<"br", {}>;
-    readonly button: StyledComponent<"button", {}>;
-    readonly canvas: StyledComponent<"canvas", {}>;
-    readonly form: StyledComponent<"form", {}>;
-    readonly h1: StyledComponent<"h1", {}>;
-    readonly h2: StyledComponent<"h2", {}>;
-    readonly h3: StyledComponent<"h3", {}>;
-    readonly hr: StyledComponent<"hr", {}>;
-    readonly nav: StyledComponent<"nav", {}>;
-    readonly main: StyledComponent<"main", {}>;
-    readonly aside: StyledComponent<"aside", {}>;
-    readonly article: StyledComponent<"article", {}>;
-    readonly section: StyledComponent<"section", {}>;
-    readonly details: StyledComponent<"details", {}>;
-    readonly header: StyledComponent<"header", {}>;
-    readonly footer: StyledComponent<"footer", {}>;
-    readonly strong: StyledComponent<"strong", {}>;
-    readonly em: StyledComponent<"em", {}>;
-    readonly img: StyledComponent<"img", {}>;
-    readonly del: StyledComponent<"del", {}>;
-    readonly ins: StyledComponent<"ins", {}>;
-    readonly kbd: StyledComponent<"kbd", {}>;
-    readonly code: StyledComponent<"code", {}>;
-    readonly mark: StyledComponent<"mark", {}>;
-    readonly samp: StyledComponent<"samp", {}>;
-    readonly small: StyledComponent<"small", {}>;
-    readonly sub: StyledComponent<"sub", {}>;
-    readonly sup: StyledComponent<"sup", {}>;
-    readonly u: StyledComponent<"u", {}>;
-    readonly var: StyledComponent<"var", {}>;
-    readonly input: StyledComponent<"input", {}>;
-    readonly label: StyledComponent<"label", {}>;
-    readonly legend: StyledComponent<"legend", {}>;
-    readonly p: StyledComponent<"p", {}>;
-    readonly select: StyledComponent<"select", {}>;
-    readonly span: StyledComponent<"span", {}>;
-    readonly svg: StyledComponent<"svg", {}>;
-    readonly textarea: StyledComponent<"textarea", {}>;
-    readonly table: StyledComponent<"table", {}>;
-    readonly tr: StyledComponent<"tr", {}>;
-    readonly th: StyledComponent<"th", {}>;
-    readonly td: StyledComponent<"td", {}>;
-    readonly tbody: StyledComponent<"tbody", {}>;
-    readonly thead: StyledComponent<"thead", {}>;
-    readonly tfoot: StyledComponent<"tfoot", {}>;
-    readonly progress: StyledComponent<"progress", {}>;
-    readonly ol: StyledComponent<"ol", {}>;
-    readonly ul: StyledComponent<"ul", {}>;
-    readonly li: StyledComponent<"li", {}>;
-    readonly blockquote: StyledComponent<"blockquote", {}>;
-    readonly pre: StyledComponent<"pre", {}>;
-};
-declare const motionTags: {
-    readonly div: StyledComponent<framer_motion.ForwardRefComponent<HTMLDivElement, framer_motion.HTMLMotionProps<"div">>, {}>;
-    readonly a: StyledComponent<framer_motion.ForwardRefComponent<HTMLAnchorElement, framer_motion.HTMLMotionProps<"a">>, {}>;
-    readonly br: StyledComponent<framer_motion.ForwardRefComponent<HTMLBRElement, framer_motion.HTMLMotionProps<"br">>, {}>;
-    readonly button: StyledComponent<framer_motion.ForwardRefComponent<HTMLButtonElement, framer_motion.HTMLMotionProps<"button">>, {}>;
-    readonly canvas: StyledComponent<framer_motion.ForwardRefComponent<HTMLCanvasElement, framer_motion.HTMLMotionProps<"canvas">>, {}>;
-    readonly form: StyledComponent<framer_motion.ForwardRefComponent<HTMLFormElement, framer_motion.HTMLMotionProps<"form">>, {}>;
-    readonly h1: StyledComponent<framer_motion.ForwardRefComponent<HTMLHeadingElement, framer_motion.HTMLMotionProps<"h1">>, {}>;
-    readonly h2: StyledComponent<framer_motion.ForwardRefComponent<HTMLHeadingElement, framer_motion.HTMLMotionProps<"h2">>, {}>;
-    readonly h3: StyledComponent<framer_motion.ForwardRefComponent<HTMLHeadingElement, framer_motion.HTMLMotionProps<"h3">>, {}>;
-    readonly hr: StyledComponent<framer_motion.ForwardRefComponent<HTMLHRElement, framer_motion.HTMLMotionProps<"hr">>, {}>;
-    readonly nav: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"nav">>, {}>;
-    readonly main: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"main">>, {}>;
-    readonly aside: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"aside">>, {}>;
-    readonly article: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"article">>, {}>;
-    readonly section: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"section">>, {}>;
-    readonly details: StyledComponent<framer_motion.ForwardRefComponent<HTMLDetailsElement, framer_motion.HTMLMotionProps<"details">>, {}>;
-    readonly header: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"header">>, {}>;
-    readonly footer: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"footer">>, {}>;
-    readonly strong: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"strong">>, {}>;
-    readonly em: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"em">>, {}>;
-    readonly img: StyledComponent<framer_motion.ForwardRefComponent<HTMLImageElement, framer_motion.HTMLMotionProps<"img">>, {}>;
-    readonly del: StyledComponent<framer_motion.ForwardRefComponent<HTMLModElement, framer_motion.HTMLMotionProps<"del">>, {}>;
-    readonly ins: StyledComponent<framer_motion.ForwardRefComponent<HTMLModElement, framer_motion.HTMLMotionProps<"ins">>, {}>;
-    readonly kbd: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"kbd">>, {}>;
-    readonly code: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"code">>, {}>;
-    readonly mark: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"mark">>, {}>;
-    readonly samp: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"samp">>, {}>;
-    readonly small: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"small">>, {}>;
-    readonly sub: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"sub">>, {}>;
-    readonly sup: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"sup">>, {}>;
-    readonly u: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"u">>, {}>;
-    readonly var: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"var">>, {}>;
-    readonly input: StyledComponent<framer_motion.ForwardRefComponent<HTMLInputElement, framer_motion.HTMLMotionProps<"input">>, {}>;
-    readonly label: StyledComponent<framer_motion.ForwardRefComponent<HTMLLabelElement, framer_motion.HTMLMotionProps<"label">>, {}>;
-    readonly legend: StyledComponent<framer_motion.ForwardRefComponent<HTMLLegendElement, framer_motion.HTMLMotionProps<"legend">>, {}>;
-    readonly p: StyledComponent<framer_motion.ForwardRefComponent<HTMLParagraphElement, framer_motion.HTMLMotionProps<"p">>, {}>;
-    readonly select: StyledComponent<framer_motion.ForwardRefComponent<HTMLSelectElement, framer_motion.HTMLMotionProps<"select">>, {}>;
-    readonly span: StyledComponent<framer_motion.ForwardRefComponent<HTMLSpanElement, framer_motion.HTMLMotionProps<"span">>, {}>;
-    readonly svg: StyledComponent<framer_motion.ForwardRefComponent<SVGSVGElement, framer_motion.SVGMotionProps<SVGSVGElement>>, {}>;
-    readonly textarea: StyledComponent<framer_motion.ForwardRefComponent<HTMLTextAreaElement, framer_motion.HTMLMotionProps<"textarea">>, {}>;
-    readonly table: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableElement, framer_motion.HTMLMotionProps<"table">>, {}>;
-    readonly tr: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableRowElement, framer_motion.HTMLMotionProps<"tr">>, {}>;
-    readonly th: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableHeaderCellElement, framer_motion.HTMLMotionProps<"th">>, {}>;
-    readonly td: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableDataCellElement, framer_motion.HTMLMotionProps<"td">>, {}>;
-    readonly tbody: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableSectionElement, framer_motion.HTMLMotionProps<"tbody">>, {}>;
-    readonly thead: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableSectionElement, framer_motion.HTMLMotionProps<"thead">>, {}>;
-    readonly tfoot: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableSectionElement, framer_motion.HTMLMotionProps<"tfoot">>, {}>;
-    readonly progress: StyledComponent<framer_motion.ForwardRefComponent<HTMLProgressElement, framer_motion.HTMLMotionProps<"progress">>, {}>;
-    readonly ol: StyledComponent<framer_motion.ForwardRefComponent<HTMLOListElement, framer_motion.HTMLMotionProps<"ol">>, {}>;
-    readonly ul: StyledComponent<framer_motion.ForwardRefComponent<HTMLUListElement, framer_motion.HTMLMotionProps<"ul">>, {}>;
-    readonly li: StyledComponent<framer_motion.ForwardRefComponent<HTMLLIElement, framer_motion.HTMLMotionProps<"li">>, {}>;
-    readonly blockquote: StyledComponent<framer_motion.ForwardRefComponent<HTMLQuoteElement, framer_motion.HTMLMotionProps<"blockquote">>, {}>;
-    readonly pre: StyledComponent<framer_motion.ForwardRefComponent<HTMLPreElement, framer_motion.HTMLMotionProps<"pre">>, {}>;
-};
+/* eslint-disable */
+
+
+interface Dict {
+  [k: string]: unknown
+}
+
+interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
+type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
+  ? JSX.LibraryManagedAttributes<T, P>
+  : ComponentPropsWithRef<T>
+
+interface StyledComponent<T extends ElementType, P extends Dict = {}> {
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
+}
+
 declare const loadingIconsMap: {
-    readonly rotatingLines: React$1.FunctionComponent<react_loader_spinner._Props3>;
-    readonly spinner: React$1.FunctionComponent<react_loader_spinner.TailSpinProps>;
+    readonly rotatingLines: React.FunctionComponent<react_loader_spinner._Props3>;
+    readonly spinner: React.FunctionComponent<react_loader_spinner.TailSpinProps>;
     readonly beat: typeof BeatLoader;
-    readonly dots: React$1.FunctionComponent<react_loader_spinner.ThreeDotsProps>;
-    readonly oval: React$1.FunctionComponent<react_loader_spinner.OvalProps>;
+    readonly dots: React.FunctionComponent<react_loader_spinner.ThreeDotsProps>;
+    readonly oval: React.FunctionComponent<react_loader_spinner.OvalProps>;
 };
 
-/**
- * Export file types for consumers
- * Import these in your project if you need ImageFile, AudioFile, VideoFile types
- */
-
+interface AudioMetadataSource {
+    format: {
+        container?: string;
+        codec?: string;
+        sampleRate?: number;
+        numberOfChannels?: number;
+        bitrate?: number;
+        duration?: number;
+    };
+    common: {
+        track?: {
+            no: number | null;
+            of: number | null;
+        };
+        disk?: {
+            no: number | null;
+            of: number | null;
+        };
+        year?: number;
+        title?: string;
+        artist?: string;
+        artists?: string[];
+        albumartist?: string;
+        album?: string;
+        genre?: string[];
+        picture?: {
+            format: string;
+            data: Uint8Array;
+        }[];
+    };
+}
 declare global {
     interface File {
         preview?: string;
@@ -20627,13 +20538,12 @@ declare global {
     interface AudioFile extends File {
         id: string;
         preview: string;
-        source: IAudioMetadata["common"] & IAudioMetadata["format"];
+        source: AudioMetadataSource["common"] & AudioMetadataSource["format"];
     }
     type MediaFile = File | ImageFile | AudioFile;
 }
-type PropsFor<K extends keyof typeof tags> = React.ComponentProps<(typeof tags)[K]>;
 type Icon = null | IconName | IconType | IconDefinition | React.ReactElement | (() => React.ReactElement);
-type IconProps = {
+interface IconProps {
     iconPrefix?: "solid" | "regular" | "brands";
     className?: string;
     startIcon?: Icon;
@@ -20642,7 +20552,7 @@ type IconProps = {
     iconSize?: SizeProp;
     pulse?: boolean;
     spin?: boolean;
-};
+}
 type LoadingIcon = keyof typeof loadingIconsMap;
 type Icons = Icon | LoadingIcon;
 type LoadingProps = {
@@ -20652,47 +20562,54 @@ type LoadingProps = {
     isLoading?: boolean;
 };
 type BlockMotionProps = {
-    initial?: boolean | TargetAndTransition | VariantLabels;
-    animate?: TargetAndTransition | VariantLabels;
-    exit?: TargetAndTransition | VariantLabels;
-    variants?: {
-        [key: string]: TargetAndTransition;
-    };
-    whileHover?: TargetAndTransition | VariantLabels;
-    whileTap?: TargetAndTransition | VariantLabels;
-    whileFocus?: TargetAndTransition | VariantLabels;
-    layout?: boolean | "position" | "size" | "preserve-aspect";
-    _motion?: Transition;
+    initial?: any;
+    animate?: any;
+    exit?: any;
+    variants?: any;
+    whileHover?: any;
+    whileTap?: any;
+    whileFocus?: any;
+    layout?: any;
+    _motion?: any;
 };
-type BaseBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & IconProps & {
-    is?: undefined;
-    as?: keyof typeof tags;
+interface SharedBlockProps extends JsxStyleProps, BlockMotionProps, IconProps {
     tooltip?: boolean | React.ReactNode | string;
     portalContainer?: Element | DocumentFragment;
     filepicker?: boolean;
     portal?: boolean;
+    as?: React.ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+}
+type OmittedHTMLProps = "color" | "width" | "height" | "translate" | "content" | "as" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragOver" | "onDragEnter" | "onDragLeave" | "onDrop";
+type HTMLProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, OmittedHTMLProps>;
+type BaseBlockProps = SharedBlockProps & HTMLProps<"div"> & {
+    is?: undefined;
 };
-type TxtBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type TxtBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "txt";
     as?: "p" | "span" | "h1" | "h2" | "h3" | "em" | "strong";
 };
-type HrBlockProps = HTMLStyledProps<typeof motionTags.hr> & BlockMotionProps & {
+type HrBlockProps = SharedBlockProps & HTMLProps<"hr"> & {
     is: "hr";
-} & PropsFor<"hr">;
-type SkeletonBlockProps = Pick<HTMLStyledProps<typeof tags.div>, "height" | "h" | "width" | "w" | "size" | "borderRadius" | "br"> & {
+};
+type SkeletonBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "skeleton";
     as: "block";
+    size?: any;
+    br?: any;
 };
-type SkeletonCircleProps = Pick<HTMLStyledProps<typeof tags.div>, "height" | "h" | "width" | "w" | "size" | "borderRadius" | "br"> & {
+type SkeletonCircleProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "skeleton";
     as: "circle";
+    size?: any;
+    br?: any;
 };
-type BtnBlockPropsBase = Omit<HTMLStyledProps<typeof motionTags.button>, "onChange"> & BlockMotionProps & IconProps & LoadingProps & {
+type BtnBlockPropsBase = SharedBlockProps & Omit<HTMLProps<"button">, "onChange"> & LoadingProps & {
     is: "btn";
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
     onClick?: React.MouseEventHandler;
-    tooltip?: boolean | React.ReactNode | string;
 };
 type BtnFilepickerProps = BtnBlockPropsBase & {
     filepicker: true;
@@ -20710,11 +20627,12 @@ type BtnBlockProps = BtnBlockPropsBase & {
     accept?: string;
     onChange?: any;
 };
-type InputBlockProps = HTMLStyledProps<typeof tags.input> & BlockMotionProps & {
+type InputBlockProps = SharedBlockProps & Omit<HTMLProps<"input">, "children"> & {
     is: "input";
     error?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children">;
-type TextareaBlockProps = HTMLStyledProps<typeof tags.textarea> & BlockMotionProps & {
+    children?: React.ReactNode;
+};
+type TextareaBlockProps = SharedBlockProps & Omit<HTMLProps<"textarea">, "children"> & {
     is: "textarea";
     error?: string;
     /** Maximum number of rows the textarea can expand to */
@@ -20725,24 +20643,27 @@ type TextareaBlockProps = HTMLStyledProps<typeof tags.textarea> & BlockMotionPro
     onHeightChange?: (height: number, meta: {
         rowHeight: number;
     }) => void;
-} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "children">;
-type CheckboxBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+    children?: React.ReactNode;
+};
+type CheckboxBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "checkbox";
     onChecked?: (value: boolean) => void;
     indeterminate?: boolean;
     checked?: boolean;
 };
-type ProgressBlockProps = HTMLStyledProps<typeof motionTags.div> & BlockMotionProps & {
+type ProgressBlockProps = SharedBlockProps & HTMLProps<"progress"> & {
     is: "progress";
     value: number;
     max?: number;
     steps?: number;
-} & PropsFor<"progress">;
-type SwitchBlockProps = Omit<HTMLStyledProps<typeof tags.input>, "onChange"> & BlockMotionProps & {
+};
+type SwitchBlockProps = SharedBlockProps & Omit<HTMLProps<"button">, "onChange"> & {
     is: "switch";
     thumbSize?: number;
     onChange?: (checked: boolean) => void;
-} & Omit<PropsFor<"button">, "onChange">;
+    checked?: boolean;
+    defaultChecked?: boolean;
+};
 type AccordionBlockProps = {
     is: "accordion";
     allowToggle?: boolean;
@@ -20750,7 +20671,7 @@ type AccordionBlockProps = {
     defaultOpenIdx?: number[];
     children: React.ReactElement | React.ReactElement[];
 };
-type DrawerBlockProps = HTMLStyledProps<typeof motionTags.div> & BlockMotionProps & {
+type DrawerBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "drawer";
     open: boolean;
     hideHandle?: boolean;
@@ -20766,7 +20687,7 @@ type RadioOption = {
     value: string;
     disabled?: boolean;
 };
-type RadioBlockProps = Omit<HTMLStyledProps<typeof base>, "onChange" | "children"> & BlockMotionProps & {
+type RadioBlockProps = SharedBlockProps & Omit<HTMLProps<"div">, "onChange" | "children"> & {
     is: "radio";
     /** Controlled value for single-select radio group */
     value?: string | null;
@@ -20785,7 +20706,7 @@ type RadioBlockProps = Omit<HTMLStyledProps<typeof base>, "onChange" | "children
     /** Disallow children for the radio container */
     children?: never;
 };
-type MenuBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type MenuBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "menu";
     trigger?: React.ReactNode;
     variant: "click" | "hover";
@@ -20800,96 +20721,120 @@ type MenuBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
     isOpen?: boolean;
     width?: string | number;
 };
-type LinkBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type LinkBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "link";
     href?: string;
     to?: string;
     target?: "_self" | "_blank";
     rel?: string;
 };
-type ImgBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type ImgBlockProps = SharedBlockProps & HTMLProps<"img"> & {
     is: "img";
     src: string;
     alt: string;
 };
-type SelectBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type SelectBlockProps = SharedBlockProps & HTMLProps<"select"> & {
     is: "select";
-} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children">;
-type BlockquoteBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+};
+type BlockquoteBlockProps = SharedBlockProps & HTMLProps<"blockquote"> & {
     is: "blockquote";
-} & PropsFor<"blockquote">;
-type PreBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+};
+type PreBlockProps = SharedBlockProps & HTMLProps<"pre"> & {
     is: "pre";
-} & PropsFor<"pre">;
-type FormBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & (({
+};
+type FormBlockProps = SharedBlockProps & HTMLProps<"form"> & (({
     is: "form";
     as?: undefined;
-} & PropsFor<"form">) | ({
+}) | ({
     is: "form";
     as: "label";
-} & PropsFor<"label">) | ({
+} & HTMLProps<"label">) | ({
     is: "form";
     as: "legend";
-} & PropsFor<"legend">));
-type TableBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & (({
+} & HTMLProps<"legend">));
+type TableBlockProps = SharedBlockProps & HTMLProps<"table"> & (({
     is: "table";
     as?: undefined;
-} & PropsFor<"table">) | ({
+}) | ({
     is: "table";
     as: "tr";
-} & PropsFor<"tr">) | ({
+} & HTMLProps<"tr">) | ({
     is: "table";
     as: "td";
-} & PropsFor<"td">) | ({
+} & HTMLProps<"td">) | ({
     is: "table";
     as: "th";
-} & PropsFor<"th">) | ({
+} & HTMLProps<"th">) | ({
     is: "table";
     as: "tbody";
-} & PropsFor<"tbody">) | ({
+} & HTMLProps<"tbody">) | ({
     is: "table";
     as: "thead";
-} & PropsFor<"thead">) | ({
+} & HTMLProps<"thead">) | ({
     is: "table";
     as: "tfoot";
-} & PropsFor<"tfoot">));
-type ListBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & (({
+} & HTMLProps<"tfoot">));
+type ListBlockProps = SharedBlockProps & HTMLProps<"div"> & (({
     is: "list";
     as: "ul";
-} & PropsFor<"ul">) | ({
+} & HTMLProps<"ul">) | ({
     is: "list";
     as: "ol";
-} & PropsFor<"ol">) | ({
+} & HTMLProps<"ol">) | ({
     is: "list";
     as: "li";
-} & PropsFor<"li">));
-type SeoBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & (({
+} & HTMLProps<"li">));
+type SeoBlockProps = SharedBlockProps & HTMLProps<"div"> & (({
     is: "seo";
     as: "nav";
-} & PropsFor<"nav">) | ({
+} & HTMLProps<"nav">) | ({
     is: "seo";
     as: "main";
-} & PropsFor<"main">) | ({
+} & HTMLProps<"main">) | ({
     is: "seo";
     as: "aside";
-} & PropsFor<"aside">) | ({
+} & HTMLProps<"aside">) | ({
     is: "seo";
     as: "article";
-} & PropsFor<"article">) | ({
+} & HTMLProps<"article">) | ({
     is: "seo";
     as: "section";
-} & PropsFor<"section">) | ({
+} & HTMLProps<"section">) | ({
     is: "seo";
     as: "details";
-} & PropsFor<"details">) | ({
+} & HTMLProps<"details">) | ({
     is: "seo";
     as: "header";
-} & PropsFor<"header">) | ({
+} & HTMLProps<"header">) | ({
     is: "seo";
     as: "footer";
-} & PropsFor<"footer">));
-type AllBlockProps = BaseBlockProps | TxtBlockProps | HrBlockProps | BtnBlockProps | InputBlockProps | TextareaBlockProps | CheckboxBlockProps | ProgressBlockProps | AccordionBlockProps | SwitchBlockProps | DrawerBlockProps | RadioBlockProps | MenuBlockProps | LinkBlockProps | ImgBlockProps | SelectBlockProps | SkeletonCircleProps | SkeletonBlockProps | BlockquoteBlockProps | PreBlockProps | FormBlockProps | TableBlockProps | ListBlockProps | SeoBlockProps;
-type BlockProps = AllBlockProps;
+} & HTMLProps<"footer">));
+type BlockPropsMap = {
+    hr: HrBlockProps;
+    txt: TxtBlockProps;
+    btn: BtnFilepickerProps | BtnStandardProps;
+    input: InputBlockProps;
+    textarea: TextareaBlockProps;
+    checkbox: CheckboxBlockProps;
+    accordion: AccordionBlockProps;
+    progress: ProgressBlockProps;
+    switch: SwitchBlockProps;
+    drawer: DrawerBlockProps;
+    radio: RadioBlockProps;
+    menu: MenuBlockProps;
+    link: LinkBlockProps;
+    img: ImgBlockProps;
+    select: SelectBlockProps;
+    skeleton: SkeletonBlockProps | SkeletonCircleProps;
+    blockquote: BlockquoteBlockProps;
+    pre: PreBlockProps;
+    form: FormBlockProps;
+    table: TableBlockProps;
+    list: ListBlockProps;
+    seo: SeoBlockProps;
+};
+type Is = keyof BlockPropsMap;
+type BlockProps<T extends Is | undefined = undefined> = T extends undefined ? BaseBlockProps : T extends Is ? BlockPropsMap[T] : never;
 
 declare function MenuContainer(props: BaseBlockProps): react_jsx_runtime.JSX.Element;
 
@@ -20995,11 +20940,10 @@ declare namespace TrackFill {
     var displayName: string;
 }
 
-declare function Block(props: BtnFilepickerProps): React$1.ReactElement;
-declare function Block(props: BtnStandardProps): React$1.ReactElement;
-declare function Block(props: BlockProps): React$1.ReactElement;
+declare function Block<T extends Is>(props: BlockProps<T>): React.ReactElement;
+declare function Block(props: BaseBlockProps): React.ReactElement;
 declare const TooltipNamespace: {
-    readonly Container: React$1.ForwardRefExoticComponent<Omit<BaseBlockProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    readonly Container: React.ForwardRefExoticComponent<Omit<BaseBlockProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 declare const MenuNamespace: {
     readonly Container: typeof MenuContainer;

package/dist/react/index.d.ts

@@ -1,17 +1,15 @@
-import * as React$1 from 'react';
+import * as React from 'react';
 import React__default, { ElementType, ComponentType, Component, JSX, ComponentPropsWithRef } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IAudioMetadata } from 'music-metadata-browser';
-import * as framer_motion from 'framer-motion';
-import { VariantLabels, Transition } from 'framer-motion';
 import { IconName, SizeProp } from '@fortawesome/fontawesome-svg-core';
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
-import { TargetAndTransition } from 'motion-dom';
 import { Placement as Placement$1 } from '@floating-ui/react';
 import { IconType } from 'react-icons/lib';
 import * as Panda from '@pandacss/dev';
 import * as react_loader_spinner from 'react-loader-spinner';
 import { BeatLoader } from 'react-spinners';
+import * as framer_motion from 'framer-motion';
+import { Transition } from 'framer-motion';
 
 /* eslint-disable */
 interface ConditionOptions {
@@ -19989,9 +19987,9 @@ interface PatchedHTMLProps {
   htmlContent?: string
 }
 
-type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'
+type OmittedHTMLProps$1 = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'
 
-type WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps
+type WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps$1> & PatchedHTMLProps
 
 type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<
   WithHTMLProps<T>,
@@ -20121,38 +20119,6 @@ type SlotRecipeConfig<
   T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
 > = SlotRecipeDefinition<S, T> & RecipeConfigMeta
 
-/* eslint-disable */
-
-
-interface Dict {
-  [k: string]: unknown
-}
-
-interface UnstyledProps {
-  /**
-   * Whether to remove recipe styles
-   */
-  unstyled?: boolean | undefined
-}
-
-interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
-  ? JSX.LibraryManagedAttributes<T, P>
-  : ComponentPropsWithRef<T>
-
-interface StyledComponent<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string | undefined
-}
-
-type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
-
 /* eslint-disable */
 interface Part {
   selector: string
@@ -20481,130 +20447,75 @@ declare module '@pandacss/dev' {
   export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>
 }
 
-declare const base: StyledComponent<"div", {}>;
-declare const tags: {
-    readonly div: StyledComponent<"div", {}>;
-    readonly a: StyledComponent<"a", {}>;
-    readonly br: StyledComponent<"br", {}>;
-    readonly button: StyledComponent<"button", {}>;
-    readonly canvas: StyledComponent<"canvas", {}>;
-    readonly form: StyledComponent<"form", {}>;
-    readonly h1: StyledComponent<"h1", {}>;
-    readonly h2: StyledComponent<"h2", {}>;
-    readonly h3: StyledComponent<"h3", {}>;
-    readonly hr: StyledComponent<"hr", {}>;
-    readonly nav: StyledComponent<"nav", {}>;
-    readonly main: StyledComponent<"main", {}>;
-    readonly aside: StyledComponent<"aside", {}>;
-    readonly article: StyledComponent<"article", {}>;
-    readonly section: StyledComponent<"section", {}>;
-    readonly details: StyledComponent<"details", {}>;
-    readonly header: StyledComponent<"header", {}>;
-    readonly footer: StyledComponent<"footer", {}>;
-    readonly strong: StyledComponent<"strong", {}>;
-    readonly em: StyledComponent<"em", {}>;
-    readonly img: StyledComponent<"img", {}>;
-    readonly del: StyledComponent<"del", {}>;
-    readonly ins: StyledComponent<"ins", {}>;
-    readonly kbd: StyledComponent<"kbd", {}>;
-    readonly code: StyledComponent<"code", {}>;
-    readonly mark: StyledComponent<"mark", {}>;
-    readonly samp: StyledComponent<"samp", {}>;
-    readonly small: StyledComponent<"small", {}>;
-    readonly sub: StyledComponent<"sub", {}>;
-    readonly sup: StyledComponent<"sup", {}>;
-    readonly u: StyledComponent<"u", {}>;
-    readonly var: StyledComponent<"var", {}>;
-    readonly input: StyledComponent<"input", {}>;
-    readonly label: StyledComponent<"label", {}>;
-    readonly legend: StyledComponent<"legend", {}>;
-    readonly p: StyledComponent<"p", {}>;
-    readonly select: StyledComponent<"select", {}>;
-    readonly span: StyledComponent<"span", {}>;
-    readonly svg: StyledComponent<"svg", {}>;
-    readonly textarea: StyledComponent<"textarea", {}>;
-    readonly table: StyledComponent<"table", {}>;
-    readonly tr: StyledComponent<"tr", {}>;
-    readonly th: StyledComponent<"th", {}>;
-    readonly td: StyledComponent<"td", {}>;
-    readonly tbody: StyledComponent<"tbody", {}>;
-    readonly thead: StyledComponent<"thead", {}>;
-    readonly tfoot: StyledComponent<"tfoot", {}>;
-    readonly progress: StyledComponent<"progress", {}>;
-    readonly ol: StyledComponent<"ol", {}>;
-    readonly ul: StyledComponent<"ul", {}>;
-    readonly li: StyledComponent<"li", {}>;
-    readonly blockquote: StyledComponent<"blockquote", {}>;
-    readonly pre: StyledComponent<"pre", {}>;
-};
-declare const motionTags: {
-    readonly div: StyledComponent<framer_motion.ForwardRefComponent<HTMLDivElement, framer_motion.HTMLMotionProps<"div">>, {}>;
-    readonly a: StyledComponent<framer_motion.ForwardRefComponent<HTMLAnchorElement, framer_motion.HTMLMotionProps<"a">>, {}>;
-    readonly br: StyledComponent<framer_motion.ForwardRefComponent<HTMLBRElement, framer_motion.HTMLMotionProps<"br">>, {}>;
-    readonly button: StyledComponent<framer_motion.ForwardRefComponent<HTMLButtonElement, framer_motion.HTMLMotionProps<"button">>, {}>;
-    readonly canvas: StyledComponent<framer_motion.ForwardRefComponent<HTMLCanvasElement, framer_motion.HTMLMotionProps<"canvas">>, {}>;
-    readonly form: StyledComponent<framer_motion.ForwardRefComponent<HTMLFormElement, framer_motion.HTMLMotionProps<"form">>, {}>;
-    readonly h1: StyledComponent<framer_motion.ForwardRefComponent<HTMLHeadingElement, framer_motion.HTMLMotionProps<"h1">>, {}>;
-    readonly h2: StyledComponent<framer_motion.ForwardRefComponent<HTMLHeadingElement, framer_motion.HTMLMotionProps<"h2">>, {}>;
-    readonly h3: StyledComponent<framer_motion.ForwardRefComponent<HTMLHeadingElement, framer_motion.HTMLMotionProps<"h3">>, {}>;
-    readonly hr: StyledComponent<framer_motion.ForwardRefComponent<HTMLHRElement, framer_motion.HTMLMotionProps<"hr">>, {}>;
-    readonly nav: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"nav">>, {}>;
-    readonly main: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"main">>, {}>;
-    readonly aside: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"aside">>, {}>;
-    readonly article: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"article">>, {}>;
-    readonly section: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"section">>, {}>;
-    readonly details: StyledComponent<framer_motion.ForwardRefComponent<HTMLDetailsElement, framer_motion.HTMLMotionProps<"details">>, {}>;
-    readonly header: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"header">>, {}>;
-    readonly footer: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"footer">>, {}>;
-    readonly strong: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"strong">>, {}>;
-    readonly em: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"em">>, {}>;
-    readonly img: StyledComponent<framer_motion.ForwardRefComponent<HTMLImageElement, framer_motion.HTMLMotionProps<"img">>, {}>;
-    readonly del: StyledComponent<framer_motion.ForwardRefComponent<HTMLModElement, framer_motion.HTMLMotionProps<"del">>, {}>;
-    readonly ins: StyledComponent<framer_motion.ForwardRefComponent<HTMLModElement, framer_motion.HTMLMotionProps<"ins">>, {}>;
-    readonly kbd: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"kbd">>, {}>;
-    readonly code: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"code">>, {}>;
-    readonly mark: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"mark">>, {}>;
-    readonly samp: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"samp">>, {}>;
-    readonly small: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"small">>, {}>;
-    readonly sub: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"sub">>, {}>;
-    readonly sup: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"sup">>, {}>;
-    readonly u: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"u">>, {}>;
-    readonly var: StyledComponent<framer_motion.ForwardRefComponent<HTMLElement, framer_motion.HTMLMotionProps<"var">>, {}>;
-    readonly input: StyledComponent<framer_motion.ForwardRefComponent<HTMLInputElement, framer_motion.HTMLMotionProps<"input">>, {}>;
-    readonly label: StyledComponent<framer_motion.ForwardRefComponent<HTMLLabelElement, framer_motion.HTMLMotionProps<"label">>, {}>;
-    readonly legend: StyledComponent<framer_motion.ForwardRefComponent<HTMLLegendElement, framer_motion.HTMLMotionProps<"legend">>, {}>;
-    readonly p: StyledComponent<framer_motion.ForwardRefComponent<HTMLParagraphElement, framer_motion.HTMLMotionProps<"p">>, {}>;
-    readonly select: StyledComponent<framer_motion.ForwardRefComponent<HTMLSelectElement, framer_motion.HTMLMotionProps<"select">>, {}>;
-    readonly span: StyledComponent<framer_motion.ForwardRefComponent<HTMLSpanElement, framer_motion.HTMLMotionProps<"span">>, {}>;
-    readonly svg: StyledComponent<framer_motion.ForwardRefComponent<SVGSVGElement, framer_motion.SVGMotionProps<SVGSVGElement>>, {}>;
-    readonly textarea: StyledComponent<framer_motion.ForwardRefComponent<HTMLTextAreaElement, framer_motion.HTMLMotionProps<"textarea">>, {}>;
-    readonly table: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableElement, framer_motion.HTMLMotionProps<"table">>, {}>;
-    readonly tr: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableRowElement, framer_motion.HTMLMotionProps<"tr">>, {}>;
-    readonly th: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableHeaderCellElement, framer_motion.HTMLMotionProps<"th">>, {}>;
-    readonly td: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableDataCellElement, framer_motion.HTMLMotionProps<"td">>, {}>;
-    readonly tbody: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableSectionElement, framer_motion.HTMLMotionProps<"tbody">>, {}>;
-    readonly thead: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableSectionElement, framer_motion.HTMLMotionProps<"thead">>, {}>;
-    readonly tfoot: StyledComponent<framer_motion.ForwardRefComponent<HTMLTableSectionElement, framer_motion.HTMLMotionProps<"tfoot">>, {}>;
-    readonly progress: StyledComponent<framer_motion.ForwardRefComponent<HTMLProgressElement, framer_motion.HTMLMotionProps<"progress">>, {}>;
-    readonly ol: StyledComponent<framer_motion.ForwardRefComponent<HTMLOListElement, framer_motion.HTMLMotionProps<"ol">>, {}>;
-    readonly ul: StyledComponent<framer_motion.ForwardRefComponent<HTMLUListElement, framer_motion.HTMLMotionProps<"ul">>, {}>;
-    readonly li: StyledComponent<framer_motion.ForwardRefComponent<HTMLLIElement, framer_motion.HTMLMotionProps<"li">>, {}>;
-    readonly blockquote: StyledComponent<framer_motion.ForwardRefComponent<HTMLQuoteElement, framer_motion.HTMLMotionProps<"blockquote">>, {}>;
-    readonly pre: StyledComponent<framer_motion.ForwardRefComponent<HTMLPreElement, framer_motion.HTMLMotionProps<"pre">>, {}>;
-};
+/* eslint-disable */
+
+
+interface Dict {
+  [k: string]: unknown
+}
+
+interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
+type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
+  ? JSX.LibraryManagedAttributes<T, P>
+  : ComponentPropsWithRef<T>
+
+interface StyledComponent<T extends ElementType, P extends Dict = {}> {
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
+}
+
 declare const loadingIconsMap: {
-    readonly rotatingLines: React$1.FunctionComponent<react_loader_spinner._Props3>;
-    readonly spinner: React$1.FunctionComponent<react_loader_spinner.TailSpinProps>;
+    readonly rotatingLines: React.FunctionComponent<react_loader_spinner._Props3>;
+    readonly spinner: React.FunctionComponent<react_loader_spinner.TailSpinProps>;
     readonly beat: typeof BeatLoader;
-    readonly dots: React$1.FunctionComponent<react_loader_spinner.ThreeDotsProps>;
-    readonly oval: React$1.FunctionComponent<react_loader_spinner.OvalProps>;
+    readonly dots: React.FunctionComponent<react_loader_spinner.ThreeDotsProps>;
+    readonly oval: React.FunctionComponent<react_loader_spinner.OvalProps>;
 };
 
-/**
- * Export file types for consumers
- * Import these in your project if you need ImageFile, AudioFile, VideoFile types
- */
-
+interface AudioMetadataSource {
+    format: {
+        container?: string;
+        codec?: string;
+        sampleRate?: number;
+        numberOfChannels?: number;
+        bitrate?: number;
+        duration?: number;
+    };
+    common: {
+        track?: {
+            no: number | null;
+            of: number | null;
+        };
+        disk?: {
+            no: number | null;
+            of: number | null;
+        };
+        year?: number;
+        title?: string;
+        artist?: string;
+        artists?: string[];
+        albumartist?: string;
+        album?: string;
+        genre?: string[];
+        picture?: {
+            format: string;
+            data: Uint8Array;
+        }[];
+    };
+}
 declare global {
     interface File {
         preview?: string;
@@ -20627,13 +20538,12 @@ declare global {
     interface AudioFile extends File {
         id: string;
         preview: string;
-        source: IAudioMetadata["common"] & IAudioMetadata["format"];
+        source: AudioMetadataSource["common"] & AudioMetadataSource["format"];
     }
     type MediaFile = File | ImageFile | AudioFile;
 }
-type PropsFor<K extends keyof typeof tags> = React.ComponentProps<(typeof tags)[K]>;
 type Icon = null | IconName | IconType | IconDefinition | React.ReactElement | (() => React.ReactElement);
-type IconProps = {
+interface IconProps {
     iconPrefix?: "solid" | "regular" | "brands";
     className?: string;
     startIcon?: Icon;
@@ -20642,7 +20552,7 @@ type IconProps = {
     iconSize?: SizeProp;
     pulse?: boolean;
     spin?: boolean;
-};
+}
 type LoadingIcon = keyof typeof loadingIconsMap;
 type Icons = Icon | LoadingIcon;
 type LoadingProps = {
@@ -20652,47 +20562,54 @@ type LoadingProps = {
     isLoading?: boolean;
 };
 type BlockMotionProps = {
-    initial?: boolean | TargetAndTransition | VariantLabels;
-    animate?: TargetAndTransition | VariantLabels;
-    exit?: TargetAndTransition | VariantLabels;
-    variants?: {
-        [key: string]: TargetAndTransition;
-    };
-    whileHover?: TargetAndTransition | VariantLabels;
-    whileTap?: TargetAndTransition | VariantLabels;
-    whileFocus?: TargetAndTransition | VariantLabels;
-    layout?: boolean | "position" | "size" | "preserve-aspect";
-    _motion?: Transition;
+    initial?: any;
+    animate?: any;
+    exit?: any;
+    variants?: any;
+    whileHover?: any;
+    whileTap?: any;
+    whileFocus?: any;
+    layout?: any;
+    _motion?: any;
 };
-type BaseBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & IconProps & {
-    is?: undefined;
-    as?: keyof typeof tags;
+interface SharedBlockProps extends JsxStyleProps, BlockMotionProps, IconProps {
     tooltip?: boolean | React.ReactNode | string;
     portalContainer?: Element | DocumentFragment;
     filepicker?: boolean;
     portal?: boolean;
+    as?: React.ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+}
+type OmittedHTMLProps = "color" | "width" | "height" | "translate" | "content" | "as" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragOver" | "onDragEnter" | "onDragLeave" | "onDrop";
+type HTMLProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, OmittedHTMLProps>;
+type BaseBlockProps = SharedBlockProps & HTMLProps<"div"> & {
+    is?: undefined;
 };
-type TxtBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type TxtBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "txt";
     as?: "p" | "span" | "h1" | "h2" | "h3" | "em" | "strong";
 };
-type HrBlockProps = HTMLStyledProps<typeof motionTags.hr> & BlockMotionProps & {
+type HrBlockProps = SharedBlockProps & HTMLProps<"hr"> & {
     is: "hr";
-} & PropsFor<"hr">;
-type SkeletonBlockProps = Pick<HTMLStyledProps<typeof tags.div>, "height" | "h" | "width" | "w" | "size" | "borderRadius" | "br"> & {
+};
+type SkeletonBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "skeleton";
     as: "block";
+    size?: any;
+    br?: any;
 };
-type SkeletonCircleProps = Pick<HTMLStyledProps<typeof tags.div>, "height" | "h" | "width" | "w" | "size" | "borderRadius" | "br"> & {
+type SkeletonCircleProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "skeleton";
     as: "circle";
+    size?: any;
+    br?: any;
 };
-type BtnBlockPropsBase = Omit<HTMLStyledProps<typeof motionTags.button>, "onChange"> & BlockMotionProps & IconProps & LoadingProps & {
+type BtnBlockPropsBase = SharedBlockProps & Omit<HTMLProps<"button">, "onChange"> & LoadingProps & {
     is: "btn";
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
     onClick?: React.MouseEventHandler;
-    tooltip?: boolean | React.ReactNode | string;
 };
 type BtnFilepickerProps = BtnBlockPropsBase & {
     filepicker: true;
@@ -20710,11 +20627,12 @@ type BtnBlockProps = BtnBlockPropsBase & {
     accept?: string;
     onChange?: any;
 };
-type InputBlockProps = HTMLStyledProps<typeof tags.input> & BlockMotionProps & {
+type InputBlockProps = SharedBlockProps & Omit<HTMLProps<"input">, "children"> & {
     is: "input";
     error?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children">;
-type TextareaBlockProps = HTMLStyledProps<typeof tags.textarea> & BlockMotionProps & {
+    children?: React.ReactNode;
+};
+type TextareaBlockProps = SharedBlockProps & Omit<HTMLProps<"textarea">, "children"> & {
     is: "textarea";
     error?: string;
     /** Maximum number of rows the textarea can expand to */
@@ -20725,24 +20643,27 @@ type TextareaBlockProps = HTMLStyledProps<typeof tags.textarea> & BlockMotionPro
     onHeightChange?: (height: number, meta: {
         rowHeight: number;
     }) => void;
-} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "children">;
-type CheckboxBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+    children?: React.ReactNode;
+};
+type CheckboxBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "checkbox";
     onChecked?: (value: boolean) => void;
     indeterminate?: boolean;
     checked?: boolean;
 };
-type ProgressBlockProps = HTMLStyledProps<typeof motionTags.div> & BlockMotionProps & {
+type ProgressBlockProps = SharedBlockProps & HTMLProps<"progress"> & {
     is: "progress";
     value: number;
     max?: number;
     steps?: number;
-} & PropsFor<"progress">;
-type SwitchBlockProps = Omit<HTMLStyledProps<typeof tags.input>, "onChange"> & BlockMotionProps & {
+};
+type SwitchBlockProps = SharedBlockProps & Omit<HTMLProps<"button">, "onChange"> & {
     is: "switch";
     thumbSize?: number;
     onChange?: (checked: boolean) => void;
-} & Omit<PropsFor<"button">, "onChange">;
+    checked?: boolean;
+    defaultChecked?: boolean;
+};
 type AccordionBlockProps = {
     is: "accordion";
     allowToggle?: boolean;
@@ -20750,7 +20671,7 @@ type AccordionBlockProps = {
     defaultOpenIdx?: number[];
     children: React.ReactElement | React.ReactElement[];
 };
-type DrawerBlockProps = HTMLStyledProps<typeof motionTags.div> & BlockMotionProps & {
+type DrawerBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "drawer";
     open: boolean;
     hideHandle?: boolean;
@@ -20766,7 +20687,7 @@ type RadioOption = {
     value: string;
     disabled?: boolean;
 };
-type RadioBlockProps = Omit<HTMLStyledProps<typeof base>, "onChange" | "children"> & BlockMotionProps & {
+type RadioBlockProps = SharedBlockProps & Omit<HTMLProps<"div">, "onChange" | "children"> & {
     is: "radio";
     /** Controlled value for single-select radio group */
     value?: string | null;
@@ -20785,7 +20706,7 @@ type RadioBlockProps = Omit<HTMLStyledProps<typeof base>, "onChange" | "children
     /** Disallow children for the radio container */
     children?: never;
 };
-type MenuBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type MenuBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "menu";
     trigger?: React.ReactNode;
     variant: "click" | "hover";
@@ -20800,96 +20721,120 @@ type MenuBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
     isOpen?: boolean;
     width?: string | number;
 };
-type LinkBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type LinkBlockProps = SharedBlockProps & HTMLProps<"div"> & {
     is: "link";
     href?: string;
     to?: string;
     target?: "_self" | "_blank";
     rel?: string;
 };
-type ImgBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type ImgBlockProps = SharedBlockProps & HTMLProps<"img"> & {
     is: "img";
     src: string;
     alt: string;
 };
-type SelectBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+type SelectBlockProps = SharedBlockProps & HTMLProps<"select"> & {
     is: "select";
-} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children">;
-type BlockquoteBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+};
+type BlockquoteBlockProps = SharedBlockProps & HTMLProps<"blockquote"> & {
     is: "blockquote";
-} & PropsFor<"blockquote">;
-type PreBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & {
+};
+type PreBlockProps = SharedBlockProps & HTMLProps<"pre"> & {
     is: "pre";
-} & PropsFor<"pre">;
-type FormBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & (({
+};
+type FormBlockProps = SharedBlockProps & HTMLProps<"form"> & (({
     is: "form";
     as?: undefined;
-} & PropsFor<"form">) | ({
+}) | ({
     is: "form";
     as: "label";
-} & PropsFor<"label">) | ({
+} & HTMLProps<"label">) | ({
     is: "form";
     as: "legend";
-} & PropsFor<"legend">));
-type TableBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & (({
+} & HTMLProps<"legend">));
+type TableBlockProps = SharedBlockProps & HTMLProps<"table"> & (({
     is: "table";
     as?: undefined;
-} & PropsFor<"table">) | ({
+}) | ({
     is: "table";
     as: "tr";
-} & PropsFor<"tr">) | ({
+} & HTMLProps<"tr">) | ({
     is: "table";
     as: "td";
-} & PropsFor<"td">) | ({
+} & HTMLProps<"td">) | ({
     is: "table";
     as: "th";
-} & PropsFor<"th">) | ({
+} & HTMLProps<"th">) | ({
     is: "table";
     as: "tbody";
-} & PropsFor<"tbody">) | ({
+} & HTMLProps<"tbody">) | ({
     is: "table";
     as: "thead";
-} & PropsFor<"thead">) | ({
+} & HTMLProps<"thead">) | ({
     is: "table";
     as: "tfoot";
-} & PropsFor<"tfoot">));
-type ListBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & (({
+} & HTMLProps<"tfoot">));
+type ListBlockProps = SharedBlockProps & HTMLProps<"div"> & (({
     is: "list";
     as: "ul";
-} & PropsFor<"ul">) | ({
+} & HTMLProps<"ul">) | ({
     is: "list";
     as: "ol";
-} & PropsFor<"ol">) | ({
+} & HTMLProps<"ol">) | ({
     is: "list";
     as: "li";
-} & PropsFor<"li">));
-type SeoBlockProps = HTMLStyledProps<typeof base> & BlockMotionProps & (({
+} & HTMLProps<"li">));
+type SeoBlockProps = SharedBlockProps & HTMLProps<"div"> & (({
     is: "seo";
     as: "nav";
-} & PropsFor<"nav">) | ({
+} & HTMLProps<"nav">) | ({
     is: "seo";
     as: "main";
-} & PropsFor<"main">) | ({
+} & HTMLProps<"main">) | ({
     is: "seo";
     as: "aside";
-} & PropsFor<"aside">) | ({
+} & HTMLProps<"aside">) | ({
     is: "seo";
     as: "article";
-} & PropsFor<"article">) | ({
+} & HTMLProps<"article">) | ({
     is: "seo";
     as: "section";
-} & PropsFor<"section">) | ({
+} & HTMLProps<"section">) | ({
     is: "seo";
     as: "details";
-} & PropsFor<"details">) | ({
+} & HTMLProps<"details">) | ({
     is: "seo";
     as: "header";
-} & PropsFor<"header">) | ({
+} & HTMLProps<"header">) | ({
     is: "seo";
     as: "footer";
-} & PropsFor<"footer">));
-type AllBlockProps = BaseBlockProps | TxtBlockProps | HrBlockProps | BtnBlockProps | InputBlockProps | TextareaBlockProps | CheckboxBlockProps | ProgressBlockProps | AccordionBlockProps | SwitchBlockProps | DrawerBlockProps | RadioBlockProps | MenuBlockProps | LinkBlockProps | ImgBlockProps | SelectBlockProps | SkeletonCircleProps | SkeletonBlockProps | BlockquoteBlockProps | PreBlockProps | FormBlockProps | TableBlockProps | ListBlockProps | SeoBlockProps;
-type BlockProps = AllBlockProps;
+} & HTMLProps<"footer">));
+type BlockPropsMap = {
+    hr: HrBlockProps;
+    txt: TxtBlockProps;
+    btn: BtnFilepickerProps | BtnStandardProps;
+    input: InputBlockProps;
+    textarea: TextareaBlockProps;
+    checkbox: CheckboxBlockProps;
+    accordion: AccordionBlockProps;
+    progress: ProgressBlockProps;
+    switch: SwitchBlockProps;
+    drawer: DrawerBlockProps;
+    radio: RadioBlockProps;
+    menu: MenuBlockProps;
+    link: LinkBlockProps;
+    img: ImgBlockProps;
+    select: SelectBlockProps;
+    skeleton: SkeletonBlockProps | SkeletonCircleProps;
+    blockquote: BlockquoteBlockProps;
+    pre: PreBlockProps;
+    form: FormBlockProps;
+    table: TableBlockProps;
+    list: ListBlockProps;
+    seo: SeoBlockProps;
+};
+type Is = keyof BlockPropsMap;
+type BlockProps<T extends Is | undefined = undefined> = T extends undefined ? BaseBlockProps : T extends Is ? BlockPropsMap[T] : never;
 
 declare function MenuContainer(props: BaseBlockProps): react_jsx_runtime.JSX.Element;
 
@@ -20995,11 +20940,10 @@ declare namespace TrackFill {
     var displayName: string;
 }
 
-declare function Block(props: BtnFilepickerProps): React$1.ReactElement;
-declare function Block(props: BtnStandardProps): React$1.ReactElement;
-declare function Block(props: BlockProps): React$1.ReactElement;
+declare function Block<T extends Is>(props: BlockProps<T>): React.ReactElement;
+declare function Block(props: BaseBlockProps): React.ReactElement;
 declare const TooltipNamespace: {
-    readonly Container: React$1.ForwardRefExoticComponent<Omit<BaseBlockProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    readonly Container: React.ForwardRefExoticComponent<Omit<BaseBlockProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 declare const MenuNamespace: {
     readonly Container: typeof MenuContainer;

package/dist/react/index.js

@@ -8,7 +8,6 @@ import { BeatLoader } from 'react-spinners';
 import { Oval, ThreeDots, TailSpin, RotatingLines } from 'react-loader-spinner';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { nanoid } from 'nanoid';
-import * as mmb from 'music-metadata-browser';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { far } from '@fortawesome/free-regular-svg-icons';
@@ -16,6 +15,8 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { useImmer } from 'use-immer';
 
+// src/react/index.ts
+
 // styled-system/helpers.mjs
 function isObject(value) {
   return typeof value === "object" && value != null && !Array.isArray(value);
@@ -881,6 +882,7 @@ var extractImageMetadata = (f) => {
   });
 };
 var extractAudioMetadata = async (f) => {
+  const mmb = await import('music-metadata-browser');
   const meta = await mmb.parseBlob(f, { duration: true });
   return new Promise((res, rej) => {
     if (!f) rej("No audio file provided.");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",