@plasmicapp/react-web 0.2.82 → 0.2.89

package/dist/all.d.ts

@@ -19,7 +19,7 @@ type ClassNamesExport = ClassNamesFn & { default: ClassNamesFn };
 declare function pick<T>(obj: T, ...keys: (string | number | symbol)[]): Partial<T>;
 declare function omit<T>(obj: T, ...keys: (keyof T)[]): Partial<T>;
 
-declare type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? {} : "Unexpected extraneous props";
+declare type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? {} : Partial<"Unexpected extraneous props">;
 declare type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<React__default.ComponentProps<T>["ref"], string>;
 
 interface Variants {
@@ -110,6 +110,7 @@ interface PlasmicImgProps extends ImgTagProps {
         src: string;
         fullHeight: number;
         fullWidth: number;
+        aspectRatio?: number;
     };
     /**
      * className applied to the wrapper element if one is used.
@@ -123,6 +124,22 @@ interface PlasmicImgProps extends ImgTagProps {
      * css height
      */
     displayHeight?: number | string;
+    /**
+     * css min-width
+     */
+    displayMinWidth?: number | string;
+    /**
+     * css min-height
+     */
+    displayMinHeight?: number | string;
+    /**
+     * css max-width
+     */
+    displayMaxWidth?: number | string;
+    /**
+     * css max-height
+     */
+    displayMaxHeight?: number | string;
     /**
      * For variable quality formats like jpg, the quality from 0 to 100
      */
@@ -138,12 +155,13 @@ interface PlasmicImgProps extends ImgTagProps {
      */
     style?: React__default.CSSProperties;
     /**
-     * Ref for the wrapper element.  The normal <PlasmicImg ref={...} />
-     * prop gives you the wrap to the img element.
+     * Ref for the img element.  The normal <PlasmicImg ref={...} />
+     * prop gives the root element instead, which may be the img element
+     * or a wrapper element
      */
-    containerRef?: React__default.Ref<HTMLDivElement>;
+    imgRef?: React__default.Ref<HTMLImageElement>;
 }
-declare const PlasmicImg: React__default.ForwardRefExoticComponent<PlasmicImgProps & React__default.RefAttributes<HTMLImageElement>>;
+declare const PlasmicImg: React__default.ForwardRefExoticComponent<PlasmicImgProps & React__default.RefAttributes<HTMLElement>>;
 
 declare function PlasmicLink(props: any): JSX.Element;
 
@@ -557,6 +575,40 @@ declare type PlasmicClassVariants<C extends AnyPlasmicClass> = C extends Plasmic
 declare type PlasmicClassArgs<C extends AnyPlasmicClass> = C extends PlasmicClass<any, infer A, any> ? A : unknown;
 declare type PlasmicClassOverrides<C extends AnyPlasmicClass> = C extends PlasmicClass<any, any, infer O> ? O : unknown;
 
+interface CommonProps {
+    showStartIcon?: boolean;
+    showEndIcon?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+}
+interface HtmlButtonProps extends Omit<React.ComponentProps<"button">, "ref" | "disabled"> {
+}
+interface HtmlAnchorProps extends Omit<React.ComponentProps<"a">, "ref" | "href"> {
+    link?: string;
+}
+declare type BaseButtonProps = CommonProps & HtmlButtonProps & HtmlAnchorProps;
+declare type HtmlAnchorOnlyProps = Exclude<keyof HtmlAnchorProps, keyof HtmlButtonProps>;
+declare type HtmlButtonOnlyProps = Exclude<keyof HtmlButtonProps, keyof HtmlAnchorProps>;
+declare type ButtonRef = React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+interface ButtonConfig<C extends AnyPlasmicClass> {
+    showStartIconVariant: VariantDef<PlasmicClassVariants<C>>;
+    showEndIconVariant?: VariantDef<PlasmicClassVariants<C>>;
+    isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;
+    startIconSlot?: keyof PlasmicClassArgs<C>;
+    endIconSlot?: keyof PlasmicClassArgs<C>;
+    contentSlot: keyof PlasmicClassArgs<C>;
+    root: keyof PlasmicClassOverrides<C>;
+}
+declare function useButton<P extends BaseButtonProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: ButtonConfig<C>, ref?: ButtonRef): {
+    plasmicProps: {
+        variants: PlasmicClassVariants<C>;
+        args: PlasmicClassArgs<C>;
+        overrides: PlasmicClassOverrides<C>;
+    };
+};
+
 interface StyleProps {
     className?: string;
     style?: React.CSSProperties;
@@ -1052,6 +1104,40 @@ declare function useSwitch<P extends SwitchProps, C extends AnyPlasmicClass>(pla
     state: SwitchState;
 };
 
+interface BaseTextInputProps extends Omit<React.ComponentProps<"input">, "type" | "disabled"> {
+    showStartIcon?: boolean;
+    showEndIcon?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    isDisabled?: boolean;
+    type?: "text" | "password" | "email" | "url";
+    inputClassName?: string;
+    inputStyle?: React.CSSProperties;
+}
+interface TextInputRefValue {
+    focus: () => void;
+    blur: () => void;
+    getRoot: () => HTMLElement | null;
+    getInput: () => HTMLInputElement | null;
+}
+declare type TextInputRef = React.Ref<TextInputRefValue>;
+interface TextInputConfig<C extends AnyPlasmicClass> {
+    showStartIconVariant: VariantDef<PlasmicClassVariants<C>>;
+    showEndIconVariant?: VariantDef<PlasmicClassVariants<C>>;
+    isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;
+    startIconSlot?: keyof PlasmicClassArgs<C>;
+    endIconSlot?: keyof PlasmicClassArgs<C>;
+    root: keyof PlasmicClassOverrides<C>;
+    input: keyof PlasmicClassOverrides<C>;
+}
+declare function useTextInput<P extends BaseTextInputProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: TextInputConfig<C>, ref?: TextInputRef): {
+    plasmicProps: {
+        variants: PlasmicClassVariants<C>;
+        args: PlasmicClassArgs<C>;
+        overrides: PlasmicClassOverrides<C>;
+    };
+};
+
 interface BaseTriggeredOverlayProps extends StyleProps, DOMProps {
     children?: React.ReactNode;
 }
@@ -1073,4 +1159,4 @@ declare function useTriggeredOverlay<P extends BaseTriggeredOverlayProps, C exte
     };
 };
 
-export { BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTriggeredOverlayProps, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TriggeredOverlayConfig, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useCheckbox, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, TriggeredOverlayConfig, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./index-common";
+export * from "./plume/button";
 export * from "./plume/checkbox";
 export * from "./plume/menu";
 export * from "./plume/menu-button";
@@ -6,4 +7,5 @@ export { setPlumeStrictMode } from "./plume/plume-utils";
 export { getDataProps } from "./plume/props-utils";
 export * from "./plume/select";
 export * from "./plume/switch";
+export * from "./plume/text-input";
 export * from "./plume/triggered-overlay";

package/dist/plume/button/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants, VariantDef } from "../plume-utils";
+interface CommonProps {
+    showStartIcon?: boolean;
+    showEndIcon?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+}
+interface HtmlButtonProps extends Omit<React.ComponentProps<"button">, "ref" | "disabled"> {
+}
+interface HtmlAnchorProps extends Omit<React.ComponentProps<"a">, "ref" | "href"> {
+    link?: string;
+}
+export declare type BaseButtonProps = CommonProps & HtmlButtonProps & HtmlAnchorProps;
+export declare type HtmlAnchorOnlyProps = Exclude<keyof HtmlAnchorProps, keyof HtmlButtonProps>;
+export declare type HtmlButtonOnlyProps = Exclude<keyof HtmlButtonProps, keyof HtmlAnchorProps>;
+export declare type ButtonRef = React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+interface ButtonConfig<C extends AnyPlasmicClass> {
+    showStartIconVariant: VariantDef<PlasmicClassVariants<C>>;
+    showEndIconVariant?: VariantDef<PlasmicClassVariants<C>>;
+    isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;
+    startIconSlot?: keyof PlasmicClassArgs<C>;
+    endIconSlot?: keyof PlasmicClassArgs<C>;
+    contentSlot: keyof PlasmicClassArgs<C>;
+    root: keyof PlasmicClassOverrides<C>;
+}
+export declare function useButton<P extends BaseButtonProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: ButtonConfig<C>, ref?: ButtonRef): {
+    plasmicProps: {
+        variants: PlasmicClassVariants<C>;
+        args: PlasmicClassArgs<C>;
+        overrides: PlasmicClassOverrides<C>;
+    };
+};
+export {};

package/dist/plume/text-input/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants, VariantDef } from "../plume-utils";
+export interface BaseTextInputProps extends Omit<React.ComponentProps<"input">, "type" | "disabled"> {
+    showStartIcon?: boolean;
+    showEndIcon?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    isDisabled?: boolean;
+    type?: "text" | "password" | "email" | "url";
+    inputClassName?: string;
+    inputStyle?: React.CSSProperties;
+}
+export interface TextInputRefValue {
+    focus: () => void;
+    blur: () => void;
+    getRoot: () => HTMLElement | null;
+    getInput: () => HTMLInputElement | null;
+}
+export declare type TextInputRef = React.Ref<TextInputRefValue>;
+interface TextInputConfig<C extends AnyPlasmicClass> {
+    showStartIconVariant: VariantDef<PlasmicClassVariants<C>>;
+    showEndIconVariant?: VariantDef<PlasmicClassVariants<C>>;
+    isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;
+    startIconSlot?: keyof PlasmicClassArgs<C>;
+    endIconSlot?: keyof PlasmicClassArgs<C>;
+    root: keyof PlasmicClassOverrides<C>;
+    input: keyof PlasmicClassOverrides<C>;
+}
+export declare function useTextInput<P extends BaseTextInputProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: TextInputConfig<C>, ref?: TextInputRef): {
+    plasmicProps: {
+        variants: PlasmicClassVariants<C>;
+        args: PlasmicClassArgs<C>;
+        overrides: PlasmicClassOverrides<C>;
+    };
+};
+export {};

package/dist/react-utils.d.ts

@@ -13,7 +13,7 @@ export declare function isReactText(child: React.ReactNode): child is React.Reac
 export declare function isReactChild(child: React.ReactNode): child is React.ReactChild;
 export declare function isReactFragment(child: React.ReactNode): child is React.ReactElement;
 export declare function isReactNode(x: any): boolean;
-export declare type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? {} : "Unexpected extraneous props";
+export declare type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? {} : Partial<"Unexpected extraneous props">;
 export declare type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<React.ComponentProps<T>["ref"], string>;
 export declare function mergeProps(props: Record<string, any>, ...restProps: Record<string, any>[]): Record<string, any>;
 export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): (value: T) => void;

package/dist/react-web.cjs.development.js

@@ -807,77 +807,161 @@ function PlasmicIcon(props) {
 var IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
 var DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
 var ALL_SIZES = /*#__PURE__*/[].concat(IMG_SIZES, DEVICE_SIZES);
-var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(props, ref) {
+var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(props, outerRef) {
   var src = props.src,
       className = props.className,
       displayWidth = props.displayWidth,
       displayHeight = props.displayHeight,
+      displayMinWidth = props.displayMinWidth,
+      displayMinHeight = props.displayMinHeight,
+      displayMaxWidth = props.displayMaxWidth,
+      displayMaxHeight = props.displayMaxHeight,
       quality = props.quality,
       loader = props.loader,
-      containerRef = props.containerRef,
+      imgRef = props.imgRef,
       style = props.style,
-      rest = _objectWithoutPropertiesLoose(props, ["src", "className", "displayWidth", "displayHeight", "quality", "loader", "containerRef", "style"]);
+      loading = props.loading,
+      rest = _objectWithoutPropertiesLoose(props, ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "imgRef", "style", "loading"]);
+
+  var imgProps = Object.assign({}, rest, {
+    // Default loading to "lazy" if not specified (which is different from the
+    // html img, which defaults to eager!)
+    loading: loading != null ? loading : "lazy"
+  });
 
   var _ref = typeof src === "string" || !src ? {
     fullWidth: undefined,
-    fullHeight: undefined
+    fullHeight: undefined,
+    aspectRatio: undefined
   } : src,
       fullWidth = _ref.fullWidth,
-      fullHeight = _ref.fullHeight;
+      fullHeight = _ref.fullHeight,
+      aspectRatio = _ref.aspectRatio;
 
   var srcStr = src ? typeof src === "string" ? src : src.src : ""; // Assume external image if either dimension is null and use usual <img>
-  // (or if the image is an SVG)
 
-  if (fullHeight == null || fullWidth == null || srcStr.endsWith(".svg")) {
+  if (fullHeight == null || fullWidth == null) {
     return React__default.createElement("img", Object.assign({
       src: srcStr,
       className: className,
       style: style
-    }, rest, {
-      ref: ref
+    }, imgProps, {
+      loading: loading,
+      ref: mergeRefs(imgRef, outerRef)
     }));
   }
 
+  if (isSvg(srcStr) && (displayHeight == null || displayHeight === "auto") && (displayWidth == null || displayWidth === "auto")) {
+    displayWidth = "100%";
+  }
+
   if (fullWidth && fullHeight && (!displayWidth || displayWidth === "auto") && !!getPixelLength(displayHeight)) {
     // If there's a pixel length specified for displayHeight but not displayWidth,
     // then we can derive the pixel length for displayWidth.  Having an explicit
     // displayWidth makes this a fixed-size image, which makes it possible for us to
     // generate better markup!
-    displayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
+    if (!isSvg(srcStr)) {
+      // We shouldn't do it for SVGs though, because `fullWidth` and
+      // `fullHeight` might have rounded values so the final
+      // `displayWidth` could differ by 1px or so.
+      displayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
+    }
+  }
+
+  var spacerWidth = fullWidth;
+  var spacerHeight = fullHeight;
+
+  if (aspectRatio && isFinite(aspectRatio) && isSvg(srcStr)) {
+    // For SVGs, fullWidth and fullHeight can be rounded values, which would
+    // cause some discrepancy between the actual aspect ratio and the aspect
+    // ratio from those values. So, for those cases, we set large width / height
+    // values to get a more precise ratio from the spacer.
+    spacerWidth = DEFAULT_SVG_WIDTH;
+    spacerHeight = Math.round(spacerWidth / aspectRatio);
   }
 
-  var _getWidths = getWidths(displayWidth, fullWidth),
+  var _getWidths = getWidths(displayWidth, fullWidth, {
+    minWidth: displayMinWidth
+  }),
       sizes = _getWidths.sizes,
       widthDescs = _getWidths.widthDescs;
 
   var imageLoader = getImageLoader(loader);
-  var spacerSvg = "<svg width=\"" + fullWidth + "\" height=\"" + fullHeight + "\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>";
+  var spacerSvg = "<svg width=\"" + spacerWidth + "\" height=\"" + spacerHeight + "\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>";
   var spacerSvgBase64 = typeof window === "undefined" ? Buffer.from(spacerSvg).toString("base64") : window.btoa(spacerSvg);
+
+  var wrapperStyle = _extends({}, style || {});
+
+  var spacerStyle = pick(style || {}, "objectFit", "objectPosition");
+
+  if (displayWidth != null && displayWidth !== "auto") {
+    // If width is set, set it on the wrapper along with min/max width
+    // and just use `width: 100%` on the spacer
+    spacerStyle.width = "100%";
+    wrapperStyle.width = displayWidth;
+    wrapperStyle.minWidth = displayMinWidth;
+    wrapperStyle.maxWidth = displayMaxWidth;
+  } else {
+    // Otherwise, we want auto sizing from the spacer, so set width there.
+    //
+    // But if we have min/max width, it should be set in the wrapper and it
+    // can be percentage values (and we add corresponding min/max width to
+    // 100% in the spacer). In general it ends up with the correct effect,
+    // but some edge cases might make `min-width: 100%` shrink the image more
+    // than it should.
+    spacerStyle.width = displayWidth;
+    wrapperStyle.width = "auto";
+
+    if (displayMinWidth) {
+      spacerStyle.minWidth = "100%";
+      wrapperStyle.minWidth = displayMinWidth;
+    }
+
+    if (displayMaxWidth != null && displayMaxWidth !== "none") {
+      spacerStyle.maxWidth = "100%";
+      wrapperStyle.maxWidth = displayMaxWidth;
+    }
+  }
+
+  if (displayHeight != null && displayHeight !== "auto") {
+    spacerStyle.height = "100%";
+    wrapperStyle.height = displayHeight;
+    wrapperStyle.minHeight = displayMinHeight;
+    wrapperStyle.maxHeight = displayMaxHeight;
+  } else {
+    spacerStyle.height = displayHeight;
+    wrapperStyle.height = "auto";
+
+    if (displayMinHeight) {
+      spacerStyle.minHeight = "100%";
+      wrapperStyle.minHeight = displayMinHeight;
+    }
+
+    if (displayMaxHeight != null && displayMaxHeight !== "none") {
+      spacerStyle.maxHeight = "100%";
+      wrapperStyle.maxHeight = displayMaxHeight;
+    }
+  }
+
   return React__default.createElement("div", {
     className: classNames$1(className, "__wab_img-wrapper"),
-    ref: containerRef,
-    style: _extends({}, style, {
-      width: isPercentage(displayWidth) ? displayWidth : undefined,
-      height: isPercentage(displayHeight) ? displayHeight : undefined
-    })
+    ref: outerRef,
+    style: wrapperStyle
   }, React__default.createElement("img", {
     alt: "",
     "aria-hidden": true,
     className: "__wab_img-spacer-svg",
     src: "data:image/svg+xml;base64," + spacerSvgBase64,
-    style: _extends({
-      width: isPercentage(displayWidth) ? "100%" : displayWidth,
-      height: isPercentage(displayHeight) ? "100%" : displayHeight
-    }, style ? pick(style, "objectFit", "objectPosition") : {})
+    style: spacerStyle
   }), makePicture({
     imageLoader: imageLoader,
     widthDescs: widthDescs,
     sizes: sizes,
     src: srcStr,
     quality: quality,
-    ref: ref,
+    ref: imgRef,
     style: style ? pick(style, "objectFit", "objectPosition") : undefined,
-    imgProps: rest,
+    imgProps: imgProps,
     className: "__wab_img"
   }));
 });
@@ -923,7 +1007,7 @@ function makePicture(opts) {
         width: wd.width
       }) + " " + wd.desc;
     }).join(", ") : undefined,
-    sizes: imageLoader ? sizes : undefined,
+    sizes: imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined,
     style: _extends({}, style ? pick(style, "objectFit", "objectPosition") : {}, {
       width: 0,
       height: 0
@@ -931,6 +1015,12 @@ function makePicture(opts) {
   })));
 }
 
+var DEFAULT_SVG_WIDTH = 10000;
+
+function isSvg(src) {
+  return src.endsWith(".svg") || src.startsWith("data:image/svg");
+}
+
 function getClosestPresetSize(width, fullWidth) {
   var _ALL_SIZES$findIndex;
 
@@ -959,17 +1049,19 @@ function getClosestPresetSize(width, fullWidth) {
  */
 
 
-function getWidths(width, fullWidth) {
+function getWidths(width, fullWidth, extra) {
+  var minWidth = extra == null ? void 0 : extra.minWidth;
   var pixelWidth = getPixelLength(width);
+  var pixelMinWidth = getPixelLength(minWidth);
 
-  if (pixelWidth != null) {
+  if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {
     // If there's an exact width, then we just need to display it at 1x and 2x density
     return {
       widthDescs: [{
-        width: getClosestPresetSize(pixelWidth, fullWidth),
+        width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth != null ? pixelMinWidth : 0), fullWidth),
         desc: "1x"
       }, {
-        width: getClosestPresetSize(pixelWidth * 2, fullWidth),
+        width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth != null ? pixelMinWidth : 0) * 2, fullWidth),
         desc: "2x"
       }],
       sizes: undefined
@@ -1015,16 +1107,6 @@ function getWidths(width, fullWidth) {
   };
 }
 
-function isPercentage(width) {
-  var _parseNumeric;
-
-  if (typeof width !== "string") {
-    return false;
-  }
-
-  return ((_parseNumeric = parseNumeric(width)) == null ? void 0 : _parseNumeric.units) === "%";
-}
-
 function getPixelLength(length) {
   if (length == null || length == "") {
     return undefined;
@@ -1071,7 +1153,7 @@ function getImageLoader(loader) {
 
 var PLASMIC_IMAGE_LOADER = {
   supportsUrl: function supportsUrl(src) {
-    return src.startsWith("https://img.plasmic.app");
+    return src.startsWith("https://img.plasmic.app") && !isSvg(src);
   },
   transformUrl: function transformUrl(opts) {
     var _opts$quality;
@@ -1423,6 +1505,53 @@ function getPlumeType(child) {
   return childType.__plumeType || (childType.getPlumeType == null ? void 0 : childType.getPlumeType(child.props));
 }
 
+function useButton(plasmicClass, props, config, ref) {
+  var _ref, _ref2, _extends2, _overrides;
+
+  if (ref === void 0) {
+    ref = null;
+  }
+
+  var link = props.link,
+      isDisabled = props.isDisabled,
+      startIcon = props.startIcon,
+      endIcon = props.endIcon,
+      showStartIcon = props.showStartIcon,
+      showEndIcon = props.showEndIcon,
+      children = props.children,
+      rest = _objectWithoutPropertiesLoose(props, ["link", "isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "children"]);
+
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.showStartIconVariant,
+    active: showStartIcon
+  }, {
+    def: config.showEndIconVariant,
+    active: showEndIcon
+  }, {
+    def: config.isDisabledVariant,
+    active: isDisabled
+  }));
+
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2), (_extends2 = {}, _extends2[config.contentSlot] = children, _extends2));
+
+  var overrides = (_overrides = {}, _overrides[config.root] = {
+    as: !!link ? "a" : "button",
+    props: _extends({
+      ref: ref,
+      disabled: isDisabled
+    }, !!link && {
+      href: link
+    }, rest)
+  }, _overrides);
+  return {
+    plasmicProps: {
+      variants: variants,
+      args: args,
+      overrides: overrides
+    }
+  };
+}
+
 function getStyleProps(props) {
   return pick(props, "className", "style");
 }
@@ -2680,6 +2809,83 @@ function useSwitch(plasmicClass, props, config, ref) {
   };
 }
 
+function useTextInput(plasmicClass, props, config, ref) {
+  var _ref, _ref2, _overrides;
+
+  if (ref === void 0) {
+    ref = null;
+  }
+
+  var isDisabled = props.isDisabled,
+      startIcon = props.startIcon,
+      endIcon = props.endIcon,
+      showStartIcon = props.showStartIcon,
+      showEndIcon = props.showEndIcon,
+      className = props.className,
+      style = props.style,
+      inputClassName = props.inputClassName,
+      inputStyle = props.inputStyle,
+      rest = _objectWithoutPropertiesLoose(props, ["isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "className", "style", "inputClassName", "inputStyle"]);
+
+  var rootRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var _inputRef$current;
+
+        (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      },
+      blur: function blur() {
+        var _inputRef$current2;
+
+        (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
+      },
+      getRoot: function getRoot() {
+        return rootRef.current;
+      },
+      getInput: function getInput() {
+        return inputRef.current;
+      }
+    };
+  }, [rootRef, inputRef]);
+
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.showStartIconVariant,
+    active: showStartIcon
+  }, {
+    def: config.showEndIconVariant,
+    active: showEndIcon
+  }, {
+    def: config.isDisabledVariant,
+    active: isDisabled
+  }));
+
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2));
+
+  var overrides = (_overrides = {}, _overrides[config.root] = {
+    props: {
+      ref: rootRef,
+      className: className,
+      style: style
+    }
+  }, _overrides[config.input] = {
+    props: _extends({
+      disabled: isDisabled,
+      ref: inputRef,
+      className: inputClassName,
+      style: inputStyle
+    }, rest)
+  }, _overrides);
+  return {
+    plasmicProps: {
+      variants: variants,
+      args: args,
+      overrides: overrides
+    }
+  };
+}
+
 function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
   var _extends2, _overrides;
 
@@ -2779,9 +2985,7 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
     restoreFocus: true
   }, React.createElement(reactAria.DismissButton, {
     onDismiss: state.close
-  }), children, React.createElement(reactAria.DismissButton, {
-    onDismiss: state.close
-  })), _extends2));
+  }), children), _extends2));
 
   var overrides = (_overrides = {}, _overrides[config.root] = {
     props: mergeProps(overlayProps, getStyleProps(props), {
@@ -2825,6 +3029,7 @@ exports.omit = omit;
 exports.pick = pick;
 exports.renderPlasmicSlot = renderPlasmicSlot;
 exports.setPlumeStrictMode = setPlumeStrictMode;
+exports.useButton = useButton;
 exports.useCheckbox = useCheckbox;
 exports.useIsSSR = useIsSSR;
 exports.useMenu = useMenu;
@@ -2835,6 +3040,7 @@ exports.useSelect = useSelect;
 exports.useSelectOption = useSelectOption;
 exports.useSelectOptionGroup = useSelectOptionGroup;
 exports.useSwitch = useSwitch;
+exports.useTextInput = useTextInput;
 exports.useTrigger = useTrigger;
 exports.useTriggeredOverlay = useTriggeredOverlay;
 exports.wrapWithClassName = wrapWithClassName;