@atom-learning/components 5.1.0 → 5.2.0-beta.1

package/dist/components/scrollable-container/ScrollableContainer.js

@@ -0,0 +1,2 @@
+import{styled as t}from"@atom-learning/stitches-react";import*as e from"react";import{useCallbackRefState as d}from"../../utilities/hooks/useCallbackRef.js";import{Box as l}from"../box/Box.js";import{ScrollableContainerShadow as p}from"./ScrollableContainerShadow.js";import{useScrollableContainer as b}from"./useScrollableContainer.js";const C=t(l,{position:"relative",overflow:"hidden"}),S=t(l,{width:"100%",height:"100%",overflow:"auto"}),a=e.forwardRef(({children:n,scrollContainerCss:i,...s},c)=>{const{setScrollableEl:m,setContainerEl:r}=b(),[o,f]=d();return e.useEffect(()=>r==null?void 0:r(o),[o,r]),e.useImperativeHandle(c,()=>o,[o]),e.createElement(C,{...s,ref:f,"data-testid":"scrollable-container"},e.createElement(S,{ref:m,css:i},n))}),h=Object.assign(a,{Shadow:p});export{h as ScrollableContainer,a as ScrollableContainerComponent};
+//# sourceMappingURL=ScrollableContainer.js.map

package/dist/components/scrollable-container/ScrollableContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableContainer.js","sources":["../../../src/components/scrollable-container/ScrollableContainer.tsx"],"sourcesContent":["import { styled } from '@atom-learning/stitches-react'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { Box } from '../box'\nimport { ScrollableContainerShadow } from './ScrollableContainerShadow'\nimport { useScrollableContainer } from './useScrollableContainer'\n\nconst ContainerBox = styled(Box, {\n  position: 'relative',\n  overflow: 'hidden'\n})\n\nconst ScrollableBox = styled(Box, {\n  width: '100%',\n  height: '100%',\n  overflow: 'auto'\n})\n\nexport const ScrollableContainerComponent = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof ContainerBox> & {\n  scrollContainerCss?: React.ComponentProps<typeof ScrollableBox>['css']\n}>(({ children, scrollContainerCss, ...rest }, ref\n) => {\n  const { setScrollableEl, setContainerEl: setContainerElContext } = useScrollableContainer()\n  const [containerEl, setContainerEl] = useCallbackRefState()\n  React.useEffect(() => setContainerElContext?.(containerEl), [containerEl, setContainerElContext])\n\n  React.useImperativeHandle(ref, () => containerEl as HTMLDivElement, [containerEl])\n\n  return (\n    <ContainerBox {...rest} ref={setContainerEl} data-testid=\"scrollable-container\">\n      <ScrollableBox ref={setScrollableEl} css={scrollContainerCss}>\n        {children}\n      </ScrollableBox>\n    </ContainerBox>\n  )\n})\n\nexport const ScrollableContainer = Object.assign(ScrollableContainerComponent, {\n  Shadow: ScrollableContainerShadow\n})\n"],"names":["ContainerBox","styled","Box","ScrollableBox","ScrollableContainerComponent","React","children","scrollContainerCss","rest","ref","setScrollableEl","setContainerElContext","useScrollableContainer","containerEl","setContainerEl","useCallbackRefState","ScrollableContainer","ScrollableContainerShadow"],"mappings":"iVASA,MAAMA,EAAeC,EAAOC,EAAK,CAC/B,SAAU,WACV,SAAU,QACZ,CAAC,EAEKC,EAAgBF,EAAOC,EAAK,CAChC,MAAO,OACP,OAAQ,OACR,SAAU,MACZ,CAAC,EAEYE,EAA+BC,EAAM,WAE/C,CAAC,CAAE,SAAAC,EAAU,mBAAAC,KAAuBC,CAAK,EAAGC,IAC1C,CACH,KAAM,CAAE,gBAAAC,EAAiB,eAAgBC,CAAsB,EAAIC,EAC7D,EAAA,CAACC,EAAaC,CAAc,EAAIC,EACtC,EAAA,OAAAV,EAAM,UAAU,IAAMM,GAAA,KAAAA,OAAAA,EAAwBE,CAAc,EAAA,CAACA,EAAaF,CAAqB,CAAC,EAEhGN,EAAM,oBAAoBI,EAAK,IAAMI,EAA+B,CAACA,CAAW,CAAC,EAG/ER,EAAA,cAACL,EAAA,CAAc,GAAGQ,EAAM,IAAKM,EAAgB,cAAY,sBACvDT,EAAAA,EAAA,cAACF,EAAA,CAAc,IAAKO,EAAiB,IAAKH,CACvCD,EAAAA,CACH,CACF,CAEJ,CAAC,EAEYU,EAAsB,OAAO,OAAOZ,EAA8B,CAC7E,OAAQa,CACV,CAAC"}

package/dist/components/scrollable-container/ScrollableContainerShadow.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Box } from '../box';
+export declare const ScrollableContainerShadow: ({ inset, css, ...rest }: React.ComponentProps<typeof Box> & {
+    inset?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+}) => React.JSX.Element;

package/dist/components/scrollable-container/ScrollableContainerShadow.js

@@ -0,0 +1,2 @@
+import*as o from"react";import{Box as i}from"../box/Box.js";import{ScrollableContainerContext as x}from"./ScrollableContainer.context.js";import{styled as h}from"@atom-learning/stitches-react";const e=h(i,{position:"absolute",height:"100%",width:"100%",pointerEvents:"none",boxShadow:"$3",opacity:0}),d=({inset:t,css:a,...n})=>{const{scrollbarWidthXAxis:p,scrollbarWidthYAxis:m,hasScrollYAxis:l,hasScrollXAxis:r,scrollProgressXAxis:s,scrollProgressYAxis:c}=o.useContext(x);return o.createElement(i,{css:{width:`calc(100% - ${p}px)`,height:`calc(100% - ${m}px)`,position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",...a},...n},o.createElement(e,{css:{bottom:`calc(100% + ${-((t==null?void 0:t.top)||0)+1}px)`,opacity:l?c*1:0}}),o.createElement(e,{css:{top:`calc(100% + ${-((t==null?void 0:t.bottom)||0)+1}px)`,transform:"rotate(180deg)",opacity:l?(1-c)*1:0}}),o.createElement(e,{css:{right:`calc(100% + ${-((t==null?void 0:t.left)||0)+1}px)`,opacity:r?s*1:0}}),o.createElement(e,{css:{left:`calc(100% + ${-((t==null?void 0:t.right)||0)+1}px)`,transform:"rotate(180deg)",opacity:r?(1-s)*1:0}}))};export{d as ScrollableContainerShadow};
+//# sourceMappingURL=ScrollableContainerShadow.js.map

package/dist/components/scrollable-container/ScrollableContainerShadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableContainerShadow.js","sources":["../../../src/components/scrollable-container/ScrollableContainerShadow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport { ScrollableContainerContext } from './ScrollableContainer.context'\nimport { styled } from '@atom-learning/stitches-react'\n\n\nconst Shadow = styled(Box, {\n  position: 'absolute',\n  height: '100%',\n  width: '100%',\n  pointerEvents: 'none',\n  boxShadow: '$3',\n  opacity: 0\n})\n\nexport const ScrollableContainerShadow = (\n  { inset, css, ...rest }: React.ComponentProps<typeof Box> & { inset?: { top?: number, right?: number, bottom?: number, left?: number } }\n) => {\n  const { scrollbarWidthXAxis, scrollbarWidthYAxis, hasScrollYAxis, hasScrollXAxis, scrollProgressXAxis, scrollProgressYAxis } = React.useContext(ScrollableContainerContext)\n\n  return (\n    <Box css={{\n      width: `calc(100% - ${scrollbarWidthXAxis}px)`,\n      height: `calc(100% - ${scrollbarWidthYAxis}px)`,\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      pointerEvents: 'none',\n      overflow: 'hidden',\n      ...css\n    }}\n      {...rest}>\n      <Shadow\n        css={{\n          /** Had to add 1px as a fix for Safari, which rounds down and sometimes causes 1px difference */\n          bottom: `calc(100% + ${-(inset?.top || 0) + 1}px)`,\n          opacity: hasScrollYAxis ? scrollProgressYAxis * 1 : 0\n        }}\n      />\n\n      <Shadow\n        css={{\n          /** Had to add 1px as a fix for Safari, which rounds down and sometimes causes 1px difference */\n          top: `calc(100% + ${-(inset?.bottom || 0) + 1}px)`,\n          transform: 'rotate(180deg)',\n          opacity: hasScrollYAxis ? (1 - scrollProgressYAxis) * 1 : 0\n        }}\n      />\n      <Shadow\n        css={{\n          /** Had to add 1px as a fix for Safari, which rounds down and sometimes causes 1px difference */\n          right: `calc(100% + ${-(inset?.left || 0) + 1}px)`,\n          opacity: hasScrollXAxis ? scrollProgressXAxis * 1 : 0\n        }}\n      />\n      <Shadow\n        css={{\n          /** Had to add 1px as a fix for Safari, which rounds down and sometimes causes 1px difference */\n          left: `calc(100% + ${-(inset?.right || 0) + 1}px)`,\n          transform: 'rotate(180deg)',\n          opacity: hasScrollXAxis ? (1 - scrollProgressXAxis) * 1 : 0\n        }}\n      />\n    </Box>\n  )\n}\n"],"names":["Shadow","styled","Box","ScrollableContainerShadow","inset","css","rest","scrollbarWidthXAxis","scrollbarWidthYAxis","hasScrollYAxis","hasScrollXAxis","scrollProgressXAxis","scrollProgressYAxis","React","ScrollableContainerContext"],"mappings":"iMAQA,MAAMA,EAASC,EAAOC,EAAK,CACzB,SAAU,WACV,OAAQ,OACR,MAAO,OACP,cAAe,OACf,UAAW,KACX,QAAS,CACX,CAAC,EAEYC,EAA4B,CACvC,CAAE,MAAAC,EAAO,IAAAC,KAAQC,CAAK,IACnB,CACH,KAAM,CAAE,oBAAAC,EAAqB,oBAAAC,EAAqB,eAAAC,EAAgB,eAAAC,EAAgB,oBAAAC,EAAqB,oBAAAC,CAAoB,EAAIC,EAAM,WAAWC,CAA0B,EAE1K,OACED,EAAA,cAACX,EAAA,CAAI,IAAK,CACR,MAAO,eAAeK,OACtB,OAAQ,eAAeC,OACvB,SAAU,WACV,KAAM,EACN,IAAK,EACL,cAAe,OACf,SAAU,SACV,GAAGH,CACL,EACG,GAAGC,CACJO,EAAAA,EAAA,cAACb,EAAA,CACC,IAAK,CAEH,OAAQ,eAAe,GAAEI,GAAA,KAAAA,OAAAA,EAAO,MAAO,GAAK,OAC5C,QAASK,EAAiBG,EAAsB,EAAI,CACtD,CAAA,CACF,EAEAC,EAAA,cAACb,EAAA,CACC,IAAK,CAEH,IAAK,eAAe,GAAEI,GAAA,KAAA,OAAAA,EAAO,SAAU,GAAK,OAC5C,UAAW,iBACX,QAASK,GAAkB,EAAIG,GAAuB,EAAI,CAC5D,EACF,EACAC,EAAA,cAACb,EAAA,CACC,IAAK,CAEH,MAAO,eAAe,GAAEI,GAAA,YAAAA,EAAO,OAAQ,GAAK,OAC5C,QAASM,EAAiBC,EAAsB,EAAI,CACtD,CACF,CAAA,EACAE,EAAA,cAACb,EAAA,CACC,IAAK,CAEH,KAAM,eAAe,GAAEI,GAAA,KAAAA,OAAAA,EAAO,QAAS,GAAK,OAC5C,UAAW,iBACX,QAASM,GAAkB,EAAIC,GAAuB,EAAI,CAC5D,CAAA,CACF,CACF,CAEJ"}

package/dist/components/scrollable-container/index.d.ts

@@ -0,0 +1,3 @@
+export { ScrollableContainer } from './ScrollableContainer';
+export { ScrollableContainerContext, ScrollableContainerProvider } from './ScrollableContainer.context';
+export { useScrollableContainer } from './useScrollableContainer';

package/dist/components/scrollable-container/useScrollableContainer.d.ts

@@ -0,0 +1,2 @@
+import { type IScrollableContainerContext } from './ScrollableContainer.context';
+export declare const useScrollableContainer: () => IScrollableContainerContext;

package/dist/components/scrollable-container/useScrollableContainer.js

@@ -0,0 +1,2 @@
+import*as o from"react";import{ScrollableContainerContext as r}from"./ScrollableContainer.context.js";const t=()=>{const e=o.useContext(r);return e.hasProvider||console.warn("Ensure that you wrap components with the ScrollableContainerProvider component. Scroll related features may not work as expected."),e};export{t as useScrollableContainer};
+//# sourceMappingURL=useScrollableContainer.js.map

package/dist/components/scrollable-container/useScrollableContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollableContainer.js","sources":["../../../src/components/scrollable-container/useScrollableContainer.ts"],"sourcesContent":["import * as React from 'react'\nimport { ScrollableContainerContext, type IScrollableContainerContext } from './ScrollableContainer.context'\n\nexport const useScrollableContainer = (): IScrollableContainerContext => {\n  const context = React.useContext(ScrollableContainerContext)\n\n  if (!context.hasProvider) {\n    console.warn('Ensure that you wrap components with the ScrollableContainerProvider component. Scroll related features may not work as expected.')\n  }\n\n  return context\n}\n\n"],"names":["useScrollableContainer","context","React","ScrollableContainerContext"],"mappings":"sGAGO,MAAMA,EAAyB,IAAmC,CACvE,MAAMC,EAAUC,EAAM,WAAWC,CAA0B,EAE3D,OAAKF,EAAQ,aACX,QAAQ,KAAK,mIAAmI,EAG3IA,CACT"}

package/dist/components/search-field/SearchField.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
+import { SearchInputProps } from '../../components/search-input';
+type SearchFieldProps = SearchInputProps & FieldElementWrapperProps;
+export declare const SearchField: {
+    ({ css, hideLabel, label, name, validation, prompt, description, ...remainingProps }: SearchFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/search-field/SearchField.js

@@ -0,0 +1,2 @@
+import*as t from"react";import{useFormContext as f}from"react-hook-form";import{FieldWrapper as u}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as F}from"../form/useFieldError.js";import{SearchInput as h}from"../search-input/SearchInput.js";const m=({css:a,hideLabel:p,label:l,name:e,validation:r,prompt:d,description:n,...s})=>{const{register:o}=f(),{error:i}=F(e),c=r?o(r):o;return t.createElement(u,{css:a,description:n,error:i,fieldId:e,hideLabel:p,label:l,prompt:d,required:Boolean(r==null?void 0:r.required)},t.createElement(h,{id:e,name:e,ref:c,...i&&{state:"error"},...s}))};m.displayName="SearchField";export{m as SearchField};
+//# sourceMappingURL=SearchField.js.map

package/dist/components/search-field/SearchField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.js","sources":["../../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { SearchInput, SearchInputProps } from '~/components/search-input'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n  css,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  ...remainingProps\n}: SearchFieldProps) => {\n  const { register } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <SearchInput\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nSearchField.displayName = 'SearchField'\n"],"names":["SearchField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","SearchInput"],"mappings":"4UAYaA,EAAc,CAAC,CAC1B,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcR,CAAI,EAC9BS,EAAMR,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKd,EACL,YAAaM,EACb,MAAOI,EACP,QAASP,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,YAAAA,EAAY,QAAQ,CAEtCS,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIZ,EACJ,KAAMA,EACN,IAAKS,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,EACN,CACF,CAEJ,EAEAR,EAAY,YAAc"}

package/dist/components/search-field/index.d.ts

@@ -0,0 +1 @@
+export { SearchField } from './SearchField';

package/dist/components/search-input/SearchInput.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Input } from '../../components/input';
+import { CSS } from '../../stitches';
+export type SearchInputProps = React.ComponentProps<typeof Input> & {
+    size?: 'sm' | 'md' | 'lg';
+    css?: CSS;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (newValue: string) => void;
+    clearText?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps>;

package/dist/components/search-input/SearchInput.js

@@ -0,0 +1,2 @@
+import{Search as H,Close as $}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Icon as E}from"../icon/Icon.js";import{InputText as L,InputBackground as x}from"../input/Input.js";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as T}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as M}from"../../utilities/hooks/useCallbackRef.js";var N=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(N||{});const O=f(E,{color:"$grey700",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),V=f(L,{"&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button":{display:"none"}}),h=t.forwardRef(({size:e="md",css:C,value:s,defaultValue:l="",onValueChange:n,clearText:d="Clear",onChange:c,...b},v)=>{const[u,R]=M(),[g,m]=t.useState(l),[A,p]=t.useState(l?"CLEAR":"SEARCH");t.useEffect(()=>{typeof s>"u"||(m(s),p(s?"CLEAR":"SEARCH"))},[s]);const z=t.useMemo(()=>T(e),[e]);t.useImperativeHandle(v,()=>u.current);const S=()=>{var r,o;const a=u.current;if(!a)return;const i=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(o=i==null?void 0:i.call)==null||o.call(i,a,"");const y=new Event("input",{bubbles:!0});a.dispatchEvent(y),a.focus(),n==null||n("")},w=r=>{c==null||c(r);const o=r.target.value;m(o),n==null||n(o),p(o?"CLEAR":"SEARCH")},I=()=>A==="SEARCH"?t.createElement(O,{is:H,size:e,css:{size:e=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):t.createElement(k,{label:d,theme:"neutral",size:z,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:S},t.createElement(E,{is:$}));return t.createElement(x,{css:{position:"relative",width:"auto",...C},size:e},t.createElement(V,{ref:R,size:e,type:"search",...b,value:g,onChange:w,css:{pr:e==="sm"?"$5":"$6"}}),I())});h.displayName="SearchInput";export{h as SearchInput};
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon/'\nimport { Input, InputBackground, InputText } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  color: '$grey700',\n  position: 'absolute',\n  pointerEvents: 'none',\n  variants: {\n    size: {\n      sm: {\n        right: '$2',\n        size: '$1'\n      },\n      md: {\n        right: 10,\n        size: 20\n      },\n      lg: {\n        right: 10,\n        size: 20\n      }\n    }\n  }\n})\n\nconst StyledSearchInputText = styled(InputText, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n  React.forwardRef(\n    (\n      {\n        size = 'md',\n        css,\n        value,\n        defaultValue = '',\n        onValueChange,\n        clearText = 'Clear',\n        onChange,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [inputElRef, setInputElRef] = useCallbackRef()\n      const [innerValue, setInnerValue] = React.useState(defaultValue)\n      const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n        defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n      )\n      React.useEffect(() => {\n        if (typeof value === 'undefined') return\n        setInnerValue(value)\n        setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }, [value])\n\n      const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n      React.useImperativeHandle(\n        ref,\n        () => inputElRef.current as HTMLInputElement\n      )\n\n      const handleClear = () => {\n        const inputEl = inputElRef.current\n        if (!inputEl) return\n\n        // https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call?.(inputEl, '')\n        const ev2 = new Event('input', {\n          bubbles: true\n        })\n        inputEl.dispatchEvent(ev2)\n        inputEl.focus()\n        onValueChange?.('')\n      }\n\n      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event)\n\n        const newValue = event.target.value\n        setInnerValue(newValue)\n        onValueChange?.(newValue)\n        setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }\n\n      const getIcon = () => {\n        if (activeIcon === INPUT_ICON.SEARCH)\n          return (\n            <StyledIcon\n              is={Search}\n              size={size}\n              css={{\n                size: size == 'sm' ? '$1' : 20,\n                top: '50%',\n                transform: 'translateY(-50%)'\n              }}\n            />\n          )\n\n        return (\n          <ActionIcon\n            label={clearText}\n            theme=\"neutral\"\n            size={iconSize}\n            css={{\n              position: 'absolute',\n              top: '50%',\n              transform: 'translateY(-50%)',\n              right: '$1'\n            }}\n            onClick={handleClear}\n          >\n            <Icon is={Close} />\n          </ActionIcon>\n        )\n      }\n\n      return (\n        <InputBackground\n          css={{ position: 'relative', width: 'auto', ...css }}\n          size={size}\n        >\n          <StyledSearchInputText\n            ref={setInputElRef}\n            size={size}\n            type=\"search\"\n            {...remainingProps}\n            value={innerValue}\n            onChange={handleOnChange}\n            css={{ pr: size === 'sm' ? '$5' : '$6' }}\n          />\n          {getIcon()}\n        </InputBackground>\n      )\n    }\n  )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInputText","InputText","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","InputBackground"],"mappings":"2mBAoBA,IAAKA,GAAAA,IACHA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,OAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,WACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAW,CAC9C,kGACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,IAC9B,CAACC,EAAYC,CAAa,EAAId,EAAM,SAASI,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIhB,EAAM,SACxCI,EAAe,QAAmB,QACpC,EACAJ,EAAM,UAAU,IAAM,CAChB,OAAOG,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWjB,EAAM,QAAQ,IAAMkB,EAAiBjB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJS,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAvFhC,IAAAC,EAAAC,EAwFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,KAAAA,OAAAA,EAG5B,KACHC,EAAAE,GAAA,YAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EAAA,EACxC,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,MACRjB,EAAAA,GAAA,MAAAA,EAAgB,EAAA,CAClB,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,CAEX,EAAA,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,CAChBX,EAAAA,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CAAA,CACF,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAAAA,EAETnB,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAAA,CAAO,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CACC,IAAK,CAAE,SAAU,WAAY,MAAO,OAAQ,GAAG9B,CAAI,EACnD,KAAMD,CAAAA,EAEND,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIxB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC2B,EACH,CAAA,CAEJ,CACF,EAEF7B,EAAY,YAAc"}

package/dist/components/search-input/index.d.ts

@@ -0,0 +1,2 @@
+export { SearchInput } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';