@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/build/esm/Ripple/useRippleSurface.js

@@ -1,7 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onKeyDown", "onPointerDown", "style", "disabled", "rippleEnabled"];
 import { useMemo } from 'react';
 import { get } from '@styled-system/css';
 import { wrapEvent } from '@basic-ui/core';
@@ -9,108 +5,111 @@ import { useTheme } from '../theme';
 import { rippleStyle } from './Ripple';
 import { useRippleHandlers } from './useRippleHandlers';
 export function useRippleSurface() {
-  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _opts$baseOpacity = opts.baseOpacity,
-      baseOpacity = _opts$baseOpacity === void 0 ? 0 : _opts$baseOpacity,
-      _opts$hoverOpacity = opts.hoverOpacity,
-      hoverOpacity = _opts$hoverOpacity === void 0 ? 0.04 : _opts$hoverOpacity,
-      _opts$focusOpacity = opts.focusOpacity,
-      focusOpacity = _opts$focusOpacity === void 0 ? 0.12 : _opts$focusOpacity,
-      _opts$pressedOpacity = opts.pressedOpacity,
-      pressedOpacity = _opts$pressedOpacity === void 0 ? 0.12 : _opts$pressedOpacity,
-      _opts$rippleColor = opts.rippleColor,
-      rippleColor = _opts$rippleColor === void 0 ? 'on.surface' : _opts$rippleColor,
-      _opts$mouseFocus = opts.mouseFocus,
-      mouseFocus = _opts$mouseFocus === void 0 ? false : _opts$mouseFocus;
-
-  var onKeyDown = opts.onKeyDown,
-      onPointerDown = opts.onPointerDown,
-      _opts$style = opts.style,
-      style = _opts$style === void 0 ? {} : _opts$style,
-      disabled = opts.disabled,
-      _opts$rippleEnabled = opts.rippleEnabled,
-      rippleEnabled = _opts$rippleEnabled === void 0 ? true : _opts$rippleEnabled,
-      rippleProps = _objectWithoutProperties(opts, _excluded);
-
-  var theme = useTheme();
-  rippleColor = get(theme, "colors.".concat(rippleColor)) || rippleColor;
-
+  let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let {
+    // eslint-disable-next-line prefer-const
+    baseOpacity = 0,
+    hoverOpacity = 0.04,
+    focusOpacity = 0.12,
+    pressedOpacity = 0.12,
+    rippleColor = 'on.surface',
+    // eslint-disable-next-line prefer-const
+    mouseFocus = false
+  } = opts;
+  const {
+    onKeyDown,
+    onPointerDown,
+    style = {},
+    disabled,
+    rippleEnabled = true,
+    ...rippleProps
+  } = opts;
+  const theme = useTheme();
+  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;
   if (disabled) {
     hoverOpacity = baseOpacity;
     focusOpacity = baseOpacity;
     pressedOpacity = baseOpacity;
   }
-
-  var _useRippleHandlers = useRippleHandlers(_extends({
+  const {
+    handleKeyDown,
+    handlePointerDown,
+    style: animationStyle,
+    animation
+  } = useRippleHandlers({
     opacity: Number(pressedOpacity),
     backgroundColor: rippleColor,
-    disabled: disabled
-  }, rippleProps)),
-      handleKeyDown = _useRippleHandlers.handleKeyDown,
-      handlePointerDown = _useRippleHandlers.handlePointerDown,
-      animationStyle = _useRippleHandlers.style,
-      animation = _useRippleHandlers.animation;
-
-  var focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
-  var css = useMemo(function () {
-    var _extends4;
-
-    return _extends(_extends(_extends(_defineProperty({
-      overflow: 'hidden',
-      position: 'relative',
-      cursor: 'pointer',
-      // fix overflow: hidden + borderRadius in Safari
-      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-      willChange: 'transform,opacity',
-      WebkitTapHighlightColor: 'transparent',
-      // ripple overlay
-      '&::before': {
-        backgroundColor: rippleColor,
-        boxSizing: 'content-box',
-        position: 'absolute',
-        content: '""',
-        opacity: baseOpacity,
-        pointerEvents: 'none',
-        top: '0',
-        left: '0',
-        width: '100%',
-        height: '100%',
-        transition: 'opacity 75ms linear'
-      },
-      '&:hover::before': {
-        opacity: hoverOpacity
-      }
-    }, "&:".concat(focusPseudoClass, "::before"), {
+    disabled,
+    ...rippleProps
+  });
+  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
+  const css = useMemo(() => ({
+    overflow: 'hidden',
+    position: 'relative',
+    cursor: 'pointer',
+    // fix overflow: hidden + borderRadius in Safari
+    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+    willChange: 'transform,opacity',
+    WebkitTapHighlightColor: 'transparent',
+    // ripple overlay
+    '&::before': {
+      backgroundColor: rippleColor,
+      boxSizing: 'content-box',
+      position: 'absolute',
+      content: '""',
+      opacity: baseOpacity,
+      pointerEvents: 'none',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      transition: 'opacity 75ms linear'
+    },
+    '&:hover::before': {
+      opacity: hoverOpacity
+    },
+    [`&:${focusPseudoClass}::before`]: {
       opacity: focusOpacity
-    }), !rippleEnabled && {
+    },
+    ...(!rippleEnabled && {
       '&:active::before': {
         opacity: pressedOpacity
       }
-    }), {}, _defineProperty({
-      '&[aria-pressed="true"]::before': {
-        opacity: baseOpacity + pressedOpacity
-      },
-      '&[aria-pressed="true"]:hover::before': {
-        opacity: pressedOpacity + hoverOpacity
-      }
-    }, "&[aria-pressed=\"true\"]:".concat(focusPseudoClass, "::before"), {
+    }),
+    '&[aria-pressed="true"]::before': {
+      opacity: baseOpacity + pressedOpacity
+    },
+    '&[aria-pressed="true"]:hover::before': {
+      opacity: pressedOpacity + hoverOpacity
+    },
+    [`&[aria-pressed="true"]:${focusPseudoClass}::before`]: {
       opacity: pressedOpacity + focusOpacity
-    }), !rippleEnabled && {
+    },
+    ...(!rippleEnabled && {
       '&[aria-pressed="true"]:active::before': {
         opacity: pressedOpacity + pressedOpacity
       }
-    }), {}, (_extends4 = {}, _defineProperty(_extends4, '&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before', {
+    }),
+    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']: {
       opacity: 0
-    }), _defineProperty(_extends4, '&:disabled,&[data-disabled]', {
+    },
+    '&:disabled,&[data-disabled]': {
       cursor: 'default'
-    }), _extends4), rippleEnabled && {
-      '&::after': _extends({}, rippleStyle({
-        animation: animation
-      }))
-    });
-  }, [animation, baseOpacity, focusOpacity, focusPseudoClass, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
+    },
+    // ripple
+    ...(rippleEnabled && {
+      '&::after': {
+        ...rippleStyle({
+          animation
+        })
+      }
+    })
+  }), [animation, baseOpacity, focusOpacity, focusPseudoClass, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
   return {
-    style: _extends(_extends({}, animationStyle), style),
+    style: {
+      ...animationStyle,
+      ...style
+    },
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
     onPointerDown: wrapEvent(onPointerDown, handlePointerDown),
     __css: css

package/build/esm/Ripple/useRippleSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRippleSurface.js","names":["useMemo","get","wrapEvent","useTheme","rippleStyle","useRippleHandlers","useRippleSurface","opts","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","mouseFocus","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","opacity","Number","backgroundColor","handleKeyDown","handlePointerDown","animationStyle","animation","focusPseudoClass","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"sources":["../../../src/Ripple/useRippleSurface.ts"],"sourcesContent":["import type {\r\n  CSSProperties,\r\n  KeyboardEventHandler,\r\n  PointerEventHandler,\r\n} from 'react';\r\nimport { useMemo } from 'react';\r\nimport { get } from '@styled-system/css';\r\nimport { wrapEvent } from '@basic-ui/core';\r\n\r\nimport { useTheme } from '../theme';\r\nimport { rippleStyle } from './Ripple';\r\nimport { useRippleHandlers } from './useRippleHandlers';\r\nimport type { SxStyleProp } from '../Box';\r\n\r\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\r\n  baseOpacity?: number;\r\n  hoverOpacity?: number;\r\n  focusOpacity?: number;\r\n  pressedOpacity?: number;\r\n  rippleColor?: string;\r\n  rippleEnabled?: boolean;\r\n  center?: boolean;\r\n  mouseFocus?: boolean;\r\n  disabled?: boolean;\r\n  style?: CSSProperties;\r\n  onPointerDown?: PointerEventHandler<T>;\r\n  onKeyDown?: KeyboardEventHandler<T>;\r\n}\r\n\r\nexport function useRippleSurface<T extends HTMLElement>(\r\n  opts: UseRippleSurfaceOptions<T> = {}\r\n) {\r\n  let {\r\n    // eslint-disable-next-line prefer-const\r\n    baseOpacity = 0,\r\n    hoverOpacity = 0.04,\r\n    focusOpacity = 0.12,\r\n    pressedOpacity = 0.12,\r\n    rippleColor = 'on.surface',\r\n    // eslint-disable-next-line prefer-const\r\n    mouseFocus = false,\r\n  } = opts;\r\n  const {\r\n    onKeyDown,\r\n    onPointerDown,\r\n    style = {},\r\n    disabled,\r\n    rippleEnabled = true,\r\n    ...rippleProps\r\n  } = opts;\r\n\r\n  const theme = useTheme();\r\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\r\n\r\n  if (disabled) {\r\n    hoverOpacity = baseOpacity;\r\n    focusOpacity = baseOpacity;\r\n    pressedOpacity = baseOpacity;\r\n  }\r\n\r\n  const {\r\n    handleKeyDown,\r\n    handlePointerDown,\r\n    style: animationStyle,\r\n    animation,\r\n  } = useRippleHandlers({\r\n    opacity: Number(pressedOpacity),\r\n    backgroundColor: rippleColor,\r\n    disabled,\r\n    ...rippleProps,\r\n  });\r\n\r\n  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';\r\n\r\n  const css: SxStyleProp = useMemo(\r\n    () => ({\r\n      overflow: 'hidden',\r\n      position: 'relative',\r\n      cursor: 'pointer',\r\n      // fix overflow: hidden + borderRadius in Safari\r\n      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\r\n      willChange: 'transform,opacity',\r\n      WebkitTapHighlightColor: 'transparent',\r\n      // ripple overlay\r\n      '&::before': {\r\n        backgroundColor: rippleColor,\r\n        boxSizing: 'content-box',\r\n        position: 'absolute',\r\n        content: '\"\"',\r\n        opacity: baseOpacity,\r\n        pointerEvents: 'none',\r\n        top: '0',\r\n        left: '0',\r\n        width: '100%',\r\n        height: '100%',\r\n        transition: 'opacity 75ms linear',\r\n      },\r\n      '&:hover::before': {\r\n        opacity: hoverOpacity,\r\n      },\r\n      [`&:${focusPseudoClass}::before`]: {\r\n        opacity: focusOpacity,\r\n      },\r\n      ...(!rippleEnabled && {\r\n        '&:active::before': {\r\n          opacity: pressedOpacity,\r\n        },\r\n      }),\r\n      '&[aria-pressed=\"true\"]::before': {\r\n        opacity: baseOpacity + pressedOpacity,\r\n      },\r\n      '&[aria-pressed=\"true\"]:hover::before': {\r\n        opacity: pressedOpacity + hoverOpacity,\r\n      },\r\n      [`&[aria-pressed=\"true\"]:${focusPseudoClass}::before`]: {\r\n        opacity: pressedOpacity + focusOpacity,\r\n      },\r\n      ...(!rippleEnabled && {\r\n        '&[aria-pressed=\"true\"]:active::before': {\r\n          opacity: pressedOpacity + pressedOpacity,\r\n        },\r\n      }),\r\n      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\r\n      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\r\n      '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']:\r\n        {\r\n          opacity: 0,\r\n        },\r\n      '&:disabled,&[data-disabled]': {\r\n        cursor: 'default',\r\n      },\r\n      // ripple\r\n      ...(rippleEnabled && {\r\n        '&::after': { ...rippleStyle({ animation }) },\r\n      }),\r\n    }),\r\n    [\r\n      animation,\r\n      baseOpacity,\r\n      focusOpacity,\r\n      focusPseudoClass,\r\n      hoverOpacity,\r\n      pressedOpacity,\r\n      rippleColor,\r\n      rippleEnabled,\r\n    ]\r\n  );\r\n\r\n  return {\r\n    style: { ...animationStyle, ...style },\r\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\r\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\r\n    __css: css,\r\n  };\r\n}\r\n"],"mappings":"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"}
+{"version":3,"file":"useRippleSurface.js","names":["useMemo","get","wrapEvent","useTheme","rippleStyle","useRippleHandlers","useRippleSurface","opts","arguments","length","undefined","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","mouseFocus","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","handleKeyDown","handlePointerDown","animationStyle","animation","opacity","Number","backgroundColor","focusPseudoClass","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"sources":["../../../src/Ripple/useRippleSurface.ts"],"sourcesContent":["import type {\n  CSSProperties,\n  KeyboardEventHandler,\n  PointerEventHandler,\n} from 'react';\nimport { useMemo } from 'react';\nimport { get } from '@styled-system/css';\nimport { wrapEvent } from '@basic-ui/core';\n\nimport { useTheme } from '../theme';\nimport { rippleStyle } from './Ripple';\nimport { useRippleHandlers } from './useRippleHandlers';\nimport type { SxStyleProp } from '../Box';\n\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\n  baseOpacity?: number;\n  hoverOpacity?: number;\n  focusOpacity?: number;\n  pressedOpacity?: number;\n  rippleColor?: string;\n  rippleEnabled?: boolean;\n  center?: boolean;\n  mouseFocus?: boolean;\n  disabled?: boolean;\n  style?: CSSProperties;\n  onPointerDown?: PointerEventHandler<T>;\n  onKeyDown?: KeyboardEventHandler<T>;\n}\n\nexport interface UseRippleSurfaceResult<T extends HTMLElement> {\n  style: CSSProperties;\n  onKeyDown: KeyboardEventHandler<T>;\n  onPointerDown: PointerEventHandler<T>;\n  __css: Record<string, any>;\n}\n\nexport function useRippleSurface<T extends HTMLElement>(\n  opts: UseRippleSurfaceOptions<T> = {}\n): UseRippleSurfaceResult<T> {\n  let {\n    // eslint-disable-next-line prefer-const\n    baseOpacity = 0,\n    hoverOpacity = 0.04,\n    focusOpacity = 0.12,\n    pressedOpacity = 0.12,\n    rippleColor = 'on.surface',\n    // eslint-disable-next-line prefer-const\n    mouseFocus = false,\n  } = opts;\n  const {\n    onKeyDown,\n    onPointerDown,\n    style = {},\n    disabled,\n    rippleEnabled = true,\n    ...rippleProps\n  } = opts;\n\n  const theme = useTheme();\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\n\n  if (disabled) {\n    hoverOpacity = baseOpacity;\n    focusOpacity = baseOpacity;\n    pressedOpacity = baseOpacity;\n  }\n\n  const {\n    handleKeyDown,\n    handlePointerDown,\n    style: animationStyle,\n    animation,\n  } = useRippleHandlers({\n    opacity: Number(pressedOpacity),\n    backgroundColor: rippleColor,\n    disabled,\n    ...rippleProps,\n  });\n\n  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';\n\n  const css: SxStyleProp = useMemo(\n    () => ({\n      overflow: 'hidden',\n      position: 'relative',\n      cursor: 'pointer',\n      // fix overflow: hidden + borderRadius in Safari\n      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\n      willChange: 'transform,opacity',\n      WebkitTapHighlightColor: 'transparent',\n      // ripple overlay\n      '&::before': {\n        backgroundColor: rippleColor,\n        boxSizing: 'content-box',\n        position: 'absolute',\n        content: '\"\"',\n        opacity: baseOpacity,\n        pointerEvents: 'none',\n        top: '0',\n        left: '0',\n        width: '100%',\n        height: '100%',\n        transition: 'opacity 75ms linear',\n      },\n      '&:hover::before': {\n        opacity: hoverOpacity,\n      },\n      [`&:${focusPseudoClass}::before`]: {\n        opacity: focusOpacity,\n      },\n      ...(!rippleEnabled && {\n        '&:active::before': {\n          opacity: pressedOpacity,\n        },\n      }),\n      '&[aria-pressed=\"true\"]::before': {\n        opacity: baseOpacity + pressedOpacity,\n      },\n      '&[aria-pressed=\"true\"]:hover::before': {\n        opacity: pressedOpacity + hoverOpacity,\n      },\n      [`&[aria-pressed=\"true\"]:${focusPseudoClass}::before`]: {\n        opacity: pressedOpacity + focusOpacity,\n      },\n      ...(!rippleEnabled && {\n        '&[aria-pressed=\"true\"]:active::before': {\n          opacity: pressedOpacity + pressedOpacity,\n        },\n      }),\n      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\n      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\n      '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']:\n        {\n          opacity: 0,\n        },\n      '&:disabled,&[data-disabled]': {\n        cursor: 'default',\n      },\n      // ripple\n      ...(rippleEnabled && {\n        '&::after': { ...rippleStyle({ animation }) },\n      }),\n    }),\n    [\n      animation,\n      baseOpacity,\n      focusOpacity,\n      focusPseudoClass,\n      hoverOpacity,\n      pressedOpacity,\n      rippleColor,\n      rippleEnabled,\n    ]\n  );\n\n  return {\n    style: { ...animationStyle, ...style },\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\n    __css: css,\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/build/esm/SearchBar/SearchBar.d.ts

@@ -1,15 +1,15 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-import type { BoxProps } from '../Box';
-interface InputProps extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
-    as?: 'input';
-}
-export declare type SearchBarProps = InputProps & {
-    containerProps?: Omit<BoxProps, 'color'>;
-    defaultValue?: string;
-    value?: string;
-    error?: boolean | string;
-    leadingIcon?: ReactNode;
-    trailingIcon?: ReactNode;
-};
-export declare const SearchBar: import("react").ForwardRefExoticComponent<Pick<SearchBarProps, "position" | "children" | "form" | "p" | "slot" | "style" | "title" | "pattern" | "__css" | "left" | "right" | "bottom" | "top" | "hidden" | "as" | "sx" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "zIndex" | "boxShadow" | "textShadow" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "type" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "containerProps" | "error" | "leadingIcon" | "trailingIcon"> & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { BoxProps } from '../Box';
+interface InputProps extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+    as?: 'input';
+}
+export type SearchBarProps = InputProps & {
+    containerProps?: Omit<BoxProps, 'color'>;
+    defaultValue?: string;
+    value?: string;
+    error?: boolean | string;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+};
+export declare const SearchBar: import("react").ForwardRefExoticComponent<Omit<SearchBarProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/build/esm/SearchBar/SearchBar.js

@@ -1,90 +1,75 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["type", "id", "color", "value", "defaultValue", "error", "onChange", "leadingIcon", "trailingIcon", "containerProps", "variant", "__css"],
-    _excluded2 = ["__css"];
 import { forwardRef, useId } from 'react';
 import { useControlledState } from '@basic-ui/core';
-import { rem } from 'polished';
 import { Box } from '../Box';
 import { Input } from '../TextField/Input';
 import { IconContainer } from '../TextField/IconContainer';
 import { EASING_STANDARD } from '../motion';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var SearchBar = /*#__PURE__*/forwardRef(function SearchBar(props, forwardedRef) {
-  var _props$type = props.type,
-      type = _props$type === void 0 ? 'text' : _props$type,
-      idProp = props.id,
-      _props$color = props.color,
-      color = _props$color === void 0 ? 'primary' : _props$color,
-      valueProp = props.value,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
-      error = props.error,
-      onChangeProp = props.onChange,
-      _props$leadingIcon = props.leadingIcon,
-      leadingIcon = _props$leadingIcon === void 0 ? null : _props$leadingIcon,
-      _props$trailingIcon = props.trailingIcon,
-      trailingIcon = _props$trailingIcon === void 0 ? null : _props$trailingIcon,
-      containerProps = props.containerProps,
-      variant = props.variant,
-      __css = props.__css,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  var _ref = containerProps || {},
-      __containerCss = _ref.__css,
-      otherContainerProps = _objectWithoutProperties(_ref, _excluded2);
-
-  var _useControlledState = useControlledState(valueProp, onChangeProp, defaultValue, function (setState) {
-    return function (e) {
-      setState(e.target.value);
-    };
-  }),
-      _useControlledState2 = _slicedToArray(_useControlledState, 2),
-      value = _useControlledState2[0],
-      onChange = _useControlledState2[1];
-
-  var fallbackId = useId();
-  var hasError = Boolean(error);
-  var id = idProp || fallbackId;
-  var inputId = "".concat(id, "-search-bar");
-  return /*#__PURE__*/_jsxs(Box, _extends(_extends({
-    __css: _extends({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SearchBar = /*#__PURE__*/forwardRef(function SearchBar(props, forwardedRef) {
+  const {
+    type = 'text',
+    id: idProp,
+    color = 'primary',
+    value: valueProp,
+    defaultValue = '',
+    error,
+    onChange: onChangeProp,
+    leadingIcon = null,
+    trailingIcon = null,
+    containerProps,
+    variant,
+    __css,
+    ...otherProps
+  } = props;
+  const {
+    __css: __containerCss,
+    ...otherContainerProps
+  } = containerProps || {};
+  const [value, onChange] = useControlledState(valueProp, onChangeProp, defaultValue, setState => e => {
+    setState(e.target.value);
+  });
+  const fallbackId = useId();
+  const hasError = Boolean(error);
+  const id = idProp || fallbackId;
+  const inputId = `${id}-search-bar`;
+  return /*#__PURE__*/_jsxs(Box, {
+    __css: {
       display: 'inline-flex',
-      position: 'relative'
-    }, __containerCss)
-  }, otherContainerProps), {}, {
-    children: [/*#__PURE__*/_jsx(Input, _extends({
-      __css: _extends({
+      position: 'relative',
+      ...__containerCss
+    },
+    ...otherContainerProps,
+    children: [/*#__PURE__*/_jsx(Input, {
+      __css: {
         borderRadius: 'full',
         backgroundColor: 'surface-container-high',
         height: "3.5rem",
         pl: leadingIcon ? "3rem" : "1.5rem",
         pr: trailingIcon ? "3rem" : "1.5rem",
         py: 0,
-        transition: "outline-color .2s ".concat(EASING_STANDARD),
-        outlineStyle: 'solid',
-        outlineWidth: "0.125rem",
-        outlineColor: 'transparent',
-        outlineOffset: rem(-1),
+        transition: `border-color .1s ${EASING_STANDARD}`,
+        borderStyle: 'solid',
+        borderWidth: "0.125rem",
+        borderColor: 'transparent',
         '&:focus': {
-          outlineColor: hasError ? 'error' : color
-        }
-      }, __css),
+          borderColor: hasError ? 'error' : color
+        },
+        ...__css
+      },
       type: type,
       ref: forwardedRef,
       hasLabel: false,
       id: inputId,
       value: value,
-      onChange: onChange
-    }, otherProps)), leadingIcon && /*#__PURE__*/_jsx(IconContainer, {
+      onChange: onChange,
+      ...otherProps
+    }), leadingIcon && /*#__PURE__*/_jsx(IconContainer, {
       position: "start",
       children: leadingIcon
     }), trailingIcon && /*#__PURE__*/_jsx(IconContainer, {
       position: "end",
       children: trailingIcon
     })]
-  }));
+  });
 });
 //# sourceMappingURL=SearchBar.js.map

package/build/esm/SearchBar/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":["forwardRef","useId","useControlledState","rem","Box","Input","IconContainer","EASING_STANDARD","SearchBar","props","forwardedRef","type","idProp","id","color","valueProp","value","defaultValue","error","onChangeProp","onChange","leadingIcon","trailingIcon","containerProps","variant","__css","otherProps","__containerCss","otherContainerProps","setState","e","target","fallbackId","hasError","Boolean","inputId","display","position","borderRadius","backgroundColor","height","pl","pr","py","transition","outlineStyle","outlineWidth","outlineColor","outlineOffset"],"sources":["../../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["import type { InputHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useId } from 'react';\nimport { useControlledState } from '@basic-ui/core';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { Input } from '../TextField/Input';\nimport { IconContainer } from '../TextField/IconContainer';\nimport { EASING_STANDARD } from '../motion';\n\ninterface InputProps\n  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {\n  as?: 'input';\n}\n\nexport type SearchBarProps = InputProps & {\n  containerProps?: Omit<BoxProps, 'color'>;\n  defaultValue?: string;\n  value?: string;\n  error?: boolean | string;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n};\n\nexport const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(\n  function SearchBar(props, forwardedRef) {\n    const {\n      type = 'text',\n      id: idProp,\n      color = 'primary',\n      value: valueProp,\n      defaultValue = '',\n      error,\n      onChange: onChangeProp,\n      leadingIcon = null,\n      trailingIcon = null,\n      containerProps,\n      variant,\n      __css,\n      ...otherProps\n    } = props;\n    const { __css: __containerCss, ...otherContainerProps } =\n      containerProps || {};\n    const [value, onChange] = useControlledState(\n      valueProp,\n      onChangeProp,\n      defaultValue,\n      (setState) => (e) => {\n        setState(e.target.value);\n      }\n    );\n\n    const fallbackId = useId();\n\n    const hasError = Boolean(error);\n\n    const id = idProp || fallbackId;\n    const inputId = `${id}-search-bar`;\n\n    return (\n      <Box\n        __css={{\n          display: 'inline-flex',\n          position: 'relative',\n          ...__containerCss,\n        }}\n        {...otherContainerProps}\n      >\n        <Input\n          __css={{\n            borderRadius: 'full',\n            backgroundColor: 'surface-container-high',\n            height: rem(56),\n            pl: leadingIcon ? rem(48) : rem(24),\n            pr: trailingIcon ? rem(48) : rem(24),\n            py: 0,\n            transition: `outline-color .2s ${EASING_STANDARD}`,\n            outlineStyle: 'solid',\n            outlineWidth: rem(2),\n            outlineColor: 'transparent',\n            outlineOffset: rem(-1),\n            '&:focus': {\n              outlineColor: hasError ? ('error' as const) : (color as any),\n            },\n            ...__css,\n          }}\n          type={type}\n          ref={forwardedRef}\n          hasLabel={false}\n          id={inputId}\n          value={value}\n          onChange={onChange}\n          {...otherProps}\n        />\n        {leadingIcon && (\n          <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n        )}\n        {trailingIcon && (\n          <IconContainer position=\"end\">{trailingIcon}</IconContainer>\n        )}\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","names":["forwardRef","useId","useControlledState","Box","Input","IconContainer","EASING_STANDARD","jsx","_jsx","jsxs","_jsxs","SearchBar","props","forwardedRef","type","id","idProp","color","value","valueProp","defaultValue","error","onChange","onChangeProp","leadingIcon","trailingIcon","containerProps","variant","__css","otherProps","__containerCss","otherContainerProps","setState","e","target","fallbackId","hasError","Boolean","inputId","display","position","children","borderRadius","backgroundColor","height","pl","pr","py","transition","borderStyle","borderWidth","borderColor","ref","hasLabel"],"sources":["../../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["import type { InputHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useId } from 'react';\nimport { useControlledState } from '@basic-ui/core';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { Input } from '../TextField/Input';\nimport { IconContainer } from '../TextField/IconContainer';\nimport { EASING_STANDARD } from '../motion';\n\ninterface InputProps\n  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {\n  as?: 'input';\n}\n\nexport type SearchBarProps = InputProps & {\n  containerProps?: Omit<BoxProps, 'color'>;\n  defaultValue?: string;\n  value?: string;\n  error?: boolean | string;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n};\n\nexport const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(\n  function SearchBar(props, forwardedRef) {\n    const {\n      type = 'text',\n      id: idProp,\n      color = 'primary',\n      value: valueProp,\n      defaultValue = '',\n      error,\n      onChange: onChangeProp,\n      leadingIcon = null,\n      trailingIcon = null,\n      containerProps,\n      variant,\n      __css,\n      ...otherProps\n    } = props;\n    const { __css: __containerCss, ...otherContainerProps } =\n      containerProps || {};\n    const [value, onChange] = useControlledState(\n      valueProp,\n      onChangeProp,\n      defaultValue,\n      (setState) => (e) => {\n        setState(e.target.value);\n      }\n    );\n\n    const fallbackId = useId();\n\n    const hasError = Boolean(error);\n\n    const id = idProp || fallbackId;\n    const inputId = `${id}-search-bar`;\n\n    return (\n      <Box\n        __css={{\n          display: 'inline-flex',\n          position: 'relative',\n          ...__containerCss,\n        }}\n        {...otherContainerProps}\n      >\n        <Input\n          __css={{\n            borderRadius: 'full',\n            backgroundColor: 'surface-container-high',\n            height: rem(56),\n            pl: leadingIcon ? rem(48) : rem(24),\n            pr: trailingIcon ? rem(48) : rem(24),\n            py: 0,\n            transition: `border-color .1s ${EASING_STANDARD}`,\n            borderStyle: 'solid',\n            borderWidth: rem(2),\n            borderColor: 'transparent',\n            '&:focus': {\n              borderColor: hasError ? ('error' as const) : (color as any),\n            },\n            ...__css,\n          }}\n          type={type}\n          ref={forwardedRef}\n          hasLabel={false}\n          id={inputId}\n          value={value}\n          onChange={onChange}\n          {...otherProps}\n        />\n        {leadingIcon && (\n          <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n        )}\n        {trailingIcon && (\n          <IconContainer position=\"end\">{trailingIcon}</IconContainer>\n        )}\n      </Box>\n    );\n  }\n);\n"],"mappings":"AACA,SAASA,UAAU,EAAEC,KAAK,QAAQ,OAAO;AACzC,SAASC,kBAAkB,QAAQ,gBAAgB;AAInD,SAASC,GAAG,QAAQ,QAAQ;AAC5B,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAgB5C,OAAO,MAAMC,SAAS,gBAAGX,UAAU,CACjC,SAASW,SAASA,CAACC,KAAK,EAAEC,YAAY,EAAE;EACtC,MAAM;IACJC,IAAI,GAAG,MAAM;IACbC,EAAE,EAAEC,MAAM;IACVC,KAAK,GAAG,SAAS;IACjBC,KAAK,EAAEC,SAAS;IAChBC,YAAY,GAAG,EAAE;IACjBC,KAAK;IACLC,QAAQ,EAAEC,YAAY;IACtBC,WAAW,GAAG,IAAI;IAClBC,YAAY,GAAG,IAAI;IACnBC,cAAc;IACdC,OAAO;IACPC,KAAK;IACL,GAAGC;EACL,CAAC,GAAGjB,KAAK;EACT,MAAM;IAAEgB,KAAK,EAAEE,cAAc;IAAE,GAAGC;EAAoB,CAAC,GACrDL,cAAc,IAAI,CAAC,CAAC;EACtB,MAAM,CAACR,KAAK,EAAEI,QAAQ,CAAC,GAAGpB,kBAAkB,CAC1CiB,SAAS,EACTI,YAAY,EACZH,YAAY,EACXY,QAAQ,IAAMC,CAAC,IAAK;IACnBD,QAAQ,CAACC,CAAC,CAACC,MAAM,CAAChB,KAAK,CAAC;EAC1B,CACF,CAAC;EAED,MAAMiB,UAAU,GAAGlC,KAAK,CAAC,CAAC;EAE1B,MAAMmC,QAAQ,GAAGC,OAAO,CAAChB,KAAK,CAAC;EAE/B,MAAMN,EAAE,GAAGC,MAAM,IAAImB,UAAU;EAC/B,MAAMG,OAAO,GAAG,GAAGvB,EAAE,aAAa;EAElC,oBACEL,KAAA,CAACP,GAAG;IACFyB,KAAK,EAAE;MACLW,OAAO,EAAE,aAAa;MACtBC,QAAQ,EAAE,UAAU;MACpB,GAAGV;IACL,CAAE;IAAA,GACEC,mBAAmB;IAAAU,QAAA,gBAEvBjC,IAAA,CAACJ,KAAK;MACJwB,KAAK,EAAE;QACLc,YAAY,EAAE,MAAM;QACpBC,eAAe,EAAE,wBAAwB;QACzCC,MAAM,UAAS;QACfC,EAAE,EAAErB,WAAW,oBAAoB;QACnCsB,EAAE,EAAErB,YAAY,oBAAoB;QACpCsB,EAAE,EAAE,CAAC;QACLC,UAAU,EAAE,oBAAoB1C,eAAe,EAAE;QACjD2C,WAAW,EAAE,OAAO;QACpBC,WAAW,YAAQ;QACnBC,WAAW,EAAE,aAAa;QAC1B,SAAS,EAAE;UACTA,WAAW,EAAEf,QAAQ,GAAI,OAAO,GAAcnB;QAChD,CAAC;QACD,GAAGW;MACL,CAAE;MACFd,IAAI,EAAEA,IAAK;MACXsC,GAAG,EAAEvC,YAAa;MAClBwC,QAAQ,EAAE,KAAM;MAChBtC,EAAE,EAAEuB,OAAQ;MACZpB,KAAK,EAAEA,KAAM;MACbI,QAAQ,EAAEA,QAAS;MAAA,GACfO;IAAU,CACf,CAAC,EACDL,WAAW,iBACVhB,IAAA,CAACH,aAAa;MAACmC,QAAQ,EAAC,OAAO;MAAAC,QAAA,EAAEjB;IAAW,CAAgB,CAC7D,EACAC,YAAY,iBACXjB,IAAA,CAACH,aAAa;MAACmC,QAAQ,EAAC,KAAK;MAAAC,QAAA,EAAEhB;IAAY,CAAgB,CAC5D;EAAA,CACE,CAAC;AAEV,CACF,CAAC","ignoreList":[]}

package/build/esm/SearchBar/index.d.ts

@@ -1 +1 @@
-export * from './SearchBar';
+export * from './SearchBar';

package/build/esm/SearchBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/SearchBar/index.ts"],"sourcesContent":["export * from './SearchBar';\n"],"mappings":"AAAA,cAAc,aAAd"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/SearchBar/index.ts"],"sourcesContent":["export * from './SearchBar';\n"],"mappings":"AAAA,cAAc,aAAa","ignoreList":[]}

package/build/esm/Select/CustomContainerExample.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import type { FilledContainerProps } from '../';
-export declare const CustomContainer: import("react").ForwardRefExoticComponent<Pick<FilledContainerProps, "position" | "children" | "label" | "p" | "slot" | "style" | "title" | "__css" | "left" | "right" | "bottom" | "top" | "hidden" | "as" | "sx" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "zIndex" | "boxShadow" | "textShadow" | "disabled" | "placeholder" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "error" | "leadingIcon" | "hasFocus" | "labelIsFloating" | "inputId" | "forceActive"> & import("react").RefAttributes<HTMLDivElement>>;
+import type { FilledContainerProps } from '../';
+export declare const CustomContainer: import("react").ForwardRefExoticComponent<Omit<FilledContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;