freemium-ui 2.0.0-beta.32 → 2.0.0-beta.34

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Freshworks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/README.md

@@ -0,0 +1,86 @@
+<h1 align="center">Freemium Ui</h1>
+
+## [DEMO](https://freemium-ui.netlify.app)
+
+[React](https://reactjs.org/) based light weight ui components based on [Styled Components](https://styled-components.com/)
+
+## Installation
+
+Peer Dependencies to be installed
+
+```
+npm install styled-components
+```
+
+Install the package
+
+```
+npm install freemium-ui
+```
+
+Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.
+
+## Usage
+
+Here is a quick example to get you started, **it's all you need**:
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from 'freemium-ui';
+// import { Button } from 'freemium-ui/Button';
+
+function App() {
+  return <Button>Freemium Button</Button>;
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'));
+```
+
+## Contribution
+
+Install Dependencies
+
+```
+npm install
+```
+
+Start the app using storybook
+
+```
+npm run storybook
+```
+
+Build Freemium Ui Core Components
+
+```
+npm run build
+```
+
+JavaScript heap out of memory could lead to build failure. Check the [official docs](https://rollupjs.org/troubleshooting/#error-javascript-heap-out-of-memory). Or execute any of the required below config
+
+```
+export NODE_OPTIONS="--max-old-space-size=8192"
+export NODE_OPTIONS="--max-old-space-size=12288"
+export NODE_OPTIONS="--max-old-space-size=16384"
+```
+
+To check the heap size in MB
+
+```
+node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))'
+```
+
+Generate a PAT with `admin:org`, `write:packages`, `read:packages`, `delete:packages`
+
+Authenticate to npm github package
+
+```
+npm login --registry=https://registry.npmjs.org/
+```
+
+Publish the package to npm
+
+```
+npm publish
+```

package/{index.cjs.js → dist/index.cjs.js}

@@ -3625,7 +3625,7 @@ className:"end-adornment"},i)),o&&e.createElement("div",{className:"end-label"
 className:"fui-loader",speed:r,size:n})
 },nm=({type:t="button",...n})=>"button"===t?e.createElement(rm,{...n,
 type:"button"}):e.createElement(am,{...n,type:"input"}),rm=t=>{
-const n=qt(),{itemIdentifier:r="id",label:a,id:o,items:i=[],onChange:l,placeholder:c,readOnly:s=!1,disabled:u=!1,isRequired:d=!1,showTick:h=!0,itemToString:p,name:f,itemComponent:m,width:v,className:g,style:y,defaultSelectedItem:b=null,isErrored:w,isMenuLoading:C,errorText:z,defaultIsOpen:M,isOpen:x}=t,E=e.useMemo((()=>{
+const n=qt(),{itemIdentifier:r="id",label:a,id:o,items:i=[],onChange:l,placeholder:c,readOnly:s=!1,disabled:u=!1,isRequired:d=!1,showTick:h=!0,itemToString:p,name:f,itemComponent:m,width:v,className:g,style:y,defaultSelectedItem:b=null,isErrored:w,isMenuLoading:C,errorText:z,defaultIsOpen:M,isOpen:x,contentProps:E}=t,S=e.useMemo((()=>{
 const e=i.reduce(((e,t)=>{const n=t.group??"default"
 ;return e[n]?e[n].push(t):e[n]=[t],e}),{})
 ;return Object.keys(e).sort(((e,t)=>"default"!==e?1:-1)).map((t=>({key:t,
@@ -3640,11 +3640,11 @@ isErrored:!!w,"aria-invalid":!!w,width:v,style:y},e.createElement(gd,{
 className:"SelectValue",placeholder:c}),e.createElement(Hd,{
 className:"SelectIcon"},e.createElement(Rl,{fill:n.colors.text.primary
 }))),e.createElement(yd,null,e.createElement(zd,{className:"SelectContent",
-position:"popper",side:"bottom",sideOffset:4,sticky:"partial"
+position:"popper",side:"bottom",sideOffset:4,sticky:"partial",...E
 },C?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,e.createElement(Sd,{
 className:"SelectScrollButton"},e.createElement(Rl,{fill:n.colors.text.primary
 })),e.createElement(xd,{className:"SelectViewport"
-},E.map((t=>e.createElement(vd,{key:t.key,className:"SelectGroup"
+},S.map((t=>e.createElement(vd,{key:t.key,className:"SelectGroup"
 },"default"!==t.key&&e.createElement(Cd,{className:"SelectLabel"
 },t.key,e.createElement(wd,null)),t.items.map(((t,n)=>{
 const a="string"==typeof t?t:t?.[r],o=t?.[r]??""
@@ -3654,35 +3654,35 @@ showTick:h}):e.createElement(om,{key:a,value:o||a,disabled:!!t.disabled,
 showTick:h},p(t,"list-item")))})))))),e.createElement(_d,{
 className:"SelectScrollButton"},e.createElement(Rl,{fill:n.colors.text.primary
 })))))),w&&z&&e.createElement(vc,null,z))
-},am=({itemIdentifier:t="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x})=>{
-const E=qt(),[S,_]=e.useState(a),{isOpen:H,selectedItem:D,getToggleButtonProps:L,getLabelProps:V,getMenuProps:A,openMenu:k,highlightedIndex:T,setHighlightedIndex:R,setInputValue:P,inputValue:I,getItemProps:O,getInputProps:N}=ff({
-selectedItem:M,items:S,onSelectedItemChange:({selectedItem:e})=>{
+},am=({itemIdentifier:t="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x,contentProps:E})=>{
+const S=qt(),[_,H]=e.useState(a),{isOpen:D,selectedItem:L,getToggleButtonProps:V,getLabelProps:A,getMenuProps:k,openMenu:T,highlightedIndex:R,setHighlightedIndex:P,setInputValue:I,inputValue:O,getItemProps:N,getInputProps:F}=ff({
+selectedItem:M,items:_,onSelectedItemChange:({selectedItem:e})=>{
 console.log("onSelectedItemChange",{sI:e}),b?.(e??null)},
 onIsOpenChange:({isOpen:e})=>{
-if(e&&(""===I||D&&h&&(I||"").toLowerCase()===`${D?.[h||t]||""}`.toLowerCase()))_(a),
-R(D?a.indexOf(D):-1);else{const t=D?u(D):"";D&&!e&&t!==I&&P(t)}e||_(a)},
+if(e&&(""===O||L&&h&&(O||"").toLowerCase()===`${L?.[h||t]||""}`.toLowerCase()))H(a),
+P(L?a.indexOf(L):-1);else{const t=L?u(L):"";L&&!e&&t!==O&&I(t)}e||H(a)},
 onInputValueChange:({inputValue:e})=>{
-H&&(""===e||D&&h&&(e||"").toLowerCase()===`${D?.[h||t]||""}`.toLowerCase())?_(a):_((n=>n.filter((n=>!e||("string"==typeof n?n:n?.[h||t]).toLowerCase().includes(e.toLowerCase())))))
-},itemToString:e=>e?u(e,"downshift"):"",...w}),F=!l&&!i&&H
-;return e.createElement(ld,{width:p,isOpen:F},e.createElement(wn,{
-className:"input-label",...V({disabled:l,readOnly:i})
-},n,c&&e.createElement(zn,null,"*")),e.createElement(Kf,{...N({name:d,
+D&&(""===e||L&&h&&(e||"").toLowerCase()===`${L?.[h||t]||""}`.toLowerCase())?H(a):H((n=>n.filter((n=>!e||("string"==typeof n?n:n?.[h||t]).toLowerCase().includes(e.toLowerCase())))))
+},itemToString:e=>e?u(e,"downshift"):"",...w}),B=!l&&!i&&D
+;return e.createElement(ld,{width:p,isOpen:B},e.createElement(wn,{
+className:"input-label",...A({disabled:l,readOnly:i})
+},n,c&&e.createElement(zn,null,"*")),e.createElement(Kf,{...F({name:d,
 readOnly:i,disabled:l,id:r}),placeholder:o,
-endAdornment:e.createElement(pd,null,!l&&!i&&!s&&D&&e.createElement(Mn,{
+endAdornment:e.createElement(pd,null,!l&&!i&&!s&&L&&e.createElement(Mn,{
 onClick:e=>{
-console.log("onClick WORKING"),P(""),b?.(null),k(),e.stopPropagation()},style:{
-borderRadius:"50%"}},e.createElement(qn,{fill:E.colors.text.primary
-})),e.createElement(Mn,{...L({disabled:l,readOnly:i})},e.createElement(id,{
-isOpen:F,fill:E.colors.text.primary,width:8,height:8})))
-}),!i&&!l&&e.createElement(sd,{isOpen:H,...A({disabled:l,readOnly:i})
-},x?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,H&&0===S.length&&e.createElement(e.Fragment,null,f?e.createElement(ud,null,e.createElement(dd,{
-onClick:e=>{e.stopPropagation(),m&&m({inputValue:I,customValues:!0}),P("")}
-},y?.(I)||"Click to add")):e.createElement(ud,{readOnly:!0
-},g||"No items")),H&&S.map(((n,r)=>{const a="string"==typeof n?n:n?.[t]
-;return e.createElement(e.Fragment,null,v?v(n,{isHilighted:T===r,
-isSelected:D===n,key:a,...O({item:n,index:r})}):e.createElement(ud,{
-isHilighted:T===r,isSelected:D===n,key:a,...O({item:n,index:r})
-},u(n),D===n&&e.createElement(Lc,{fill:E.colors.common.accent})))
+console.log("onClick WORKING"),I(""),b?.(null),T(),e.stopPropagation()},style:{
+borderRadius:"50%"}},e.createElement(qn,{fill:S.colors.text.primary
+})),e.createElement(Mn,{...V({disabled:l,readOnly:i})},e.createElement(id,{
+isOpen:B,fill:S.colors.text.primary,width:8,height:8})))
+}),!i&&!l&&e.createElement(sd,{isOpen:D,...E,...k({disabled:l,readOnly:i})
+},x?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,D&&0===_.length&&e.createElement(e.Fragment,null,f?e.createElement(ud,null,e.createElement(dd,{
+onClick:e=>{e.stopPropagation(),m&&m({inputValue:O,customValues:!0}),I("")}
+},y?.(O)||"Click to add")):e.createElement(ud,{readOnly:!0
+},g||"No items")),D&&_.map(((n,r)=>{const a="string"==typeof n?n:n?.[t]
+;return e.createElement(e.Fragment,null,v?v(n,{isHilighted:R===r,
+isSelected:L===n,key:a,...N({item:n,index:r})}):e.createElement(ud,{
+isHilighted:R===r,isSelected:L===n,key:a,...N({item:n,index:r})
+},u(n),L===n&&e.createElement(Lc,{fill:S.colors.common.accent})))
 })))),C&&z&&e.createElement(vc,null,z))
 },om=e.forwardRef((({children:t,showTick:n=!0,...r},a)=>{const o=qt()
 ;return e.createElement(bd,{className:"SelectItem",...r,ref:a
@@ -16154,51 +16154,51 @@ open:t,onOpenChange:e=>{e||l?.()}},e.createElement(um,null,e.createElement(dm,{
 forceMount:!0,className:"DialogOverlay",onClick:()=>l?.()}),e.createElement(hm,{
 forceMount:!0,className:`DialogContent ${a??""}`.trim(),size:s??"default",
 fullWidth:o,align:r,position:c,style:i
-},n))),exports.MoreVertical=od,exports.MultiSelectDropdown=({itemIdentifier:t="id",label:n,id:r,items:a=[],onChange:o,placeholder:i,readOnly:l=!1,disabled:c=!1,isRequired:s=!1,itemToString:u,name:d,filterKey:h,width:p,useComboboxProps:f,useMultipleSelectionProps:m,emptyItemsText:v,getCustomMessage:g,onCustomValueAdd:y,customValues:b,inputValue:w,hideClear:C,removeSelectedItem:z,defaultSelectedItems:M=[],handleInputChange:x,isErrored:E,isMenuLoading:S,errorText:_,InputProps:H,itemComponent:D,isDynamicMenu:L,locale:V,maxAllowedLength:A,minAllowedLength:k,onBackSpace:T})=>{
-const R=qt(),[P,I]=e.useState(""),[O,N]=e.useState([]),F=e.useMemo((()=>a.filter((e=>!P||("string"==typeof e?e:e?.[h||t]).toLowerCase().includes(P.toLowerCase())))),[a,h,t,P]),{getSelectedItemProps:B,getDropdownProps:j,removeSelectedItem:U,setSelectedItems:$}=Bf({
-selectedItems:O,onStateChange:({selectedItems:e,type:t})=>{switch(t){
+},n))),exports.MoreVertical=od,exports.MultiSelectDropdown=({itemIdentifier:t="id",label:n,id:r,items:a=[],onChange:o,placeholder:i,readOnly:l=!1,disabled:c=!1,isRequired:s=!1,itemToString:u,name:d,filterKey:h,width:p,useComboboxProps:f,useMultipleSelectionProps:m,emptyItemsText:v,getCustomMessage:g,onCustomValueAdd:y,customValues:b,inputValue:w,hideClear:C,removeSelectedItem:z,defaultSelectedItems:M=[],handleInputChange:x,isErrored:E,isMenuLoading:S,errorText:_,InputProps:H,itemComponent:D,isDynamicMenu:L,locale:V,maxAllowedLength:A,minAllowedLength:k,hideChips:T=!1,onBackSpace:R})=>{
+const P=qt(),[I,O]=e.useState(""),[N,F]=e.useState([...M]),B=e.useMemo((()=>a.filter((e=>!I||("string"==typeof e?e:e?.[h||t]).toLowerCase().includes(I.toLowerCase())))),[a,h,t,I]),{getSelectedItemProps:j,getDropdownProps:U,removeSelectedItem:$,setSelectedItems:Y}=Bf({
+selectedItems:N,onStateChange:({selectedItems:e,type:t})=>{switch(t){
 case Bf.stateChangeTypes.SelectedItemKeyDownBackspace:
 case Bf.stateChangeTypes.SelectedItemKeyDownDelete:
 case Bf.stateChangeTypes.DropdownKeyDownBackspace:
-case Bf.stateChangeTypes.FunctionRemoveSelectedItem:e&&N(e)}},...m
-}),{isOpen:Y,getToggleButtonProps:W,getLabelProps:G,getMenuProps:K,getInputProps:q,highlightedIndex:Z,getItemProps:X}=ff({
-items:F,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,inputValue:P,
+case Bf.stateChangeTypes.FunctionRemoveSelectedItem:e&&F(e)}},...m
+}),{isOpen:W,getToggleButtonProps:G,getLabelProps:K,getMenuProps:q,getInputProps:Z,highlightedIndex:X,getItemProps:Q}=ff({
+items:B,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,inputValue:I,
 stateReducer:(e,t)=>{const{changes:n,type:r}=t;switch(r){
 case ff.stateChangeTypes.InputKeyDownEnter:case ff.stateChangeTypes.ItemClick:
 return{...n,isOpen:!0};default:return n}},
 onStateChange({inputValue:e,type:n,selectedItem:r}){switch(n){
 case ff.stateChangeTypes.InputKeyDownEnter:case ff.stateChangeTypes.ItemClick:
 case ff.stateChangeTypes.InputBlur:
-r&&(O.indexOf(r)>-1?N(O.filter((e=>e?.[t]!==r?.[t]))):N([...O,r]),I(""));break
-;case ff.stateChangeTypes.InputChange:I(e||"")}},...f});e.useEffect((()=>{x?.(P)
-}),[x,P]),e.useEffect((()=>{o?.(O)}),[o,O]),e.useEffect((()=>{N(M??[])
-}),[M]),e.useEffect((()=>{I(w??"")}),[w]);const Q=!c&&!l&&Y
-;return e.createElement(ld,{width:p,isOpen:Q},e.createElement(wn,{
-className:"input-label",...G({disabled:c,readOnly:l})
+r&&(N.indexOf(r)>-1?F(N.filter((e=>e?.[t]!==r?.[t]))):F([...N,r]),O(""));break
+;case ff.stateChangeTypes.InputChange:O(e||"")}},...f});e.useEffect((()=>{x?.(I)
+}),[x,I]),e.useEffect((()=>{o?.(N)}),[o,N]),e.useEffect((()=>{
+M.length>0&&Y([...M])}),[M]),e.useEffect((()=>{O(w??"")}),[w]);const J=!c&&!l&&W
+;return e.createElement(ld,{width:p,isOpen:J},e.createElement(wn,{
+className:"input-label",...K({disabled:c,readOnly:l})
 },n,s&&e.createElement(zn,null,"*")),e.createElement(cd,{disabled:c,
 isErrored:!!E,"aria-invalid":E
-},e.createElement(pm,null,O.map(((t,n)=>e.createElement(_m,{
-key:`selected-item-${n}`,...B({selectedItem:t,index:n}),"aria-disabled":c,
+},e.createElement(pm,null,!T&&N.map(((t,n)=>e.createElement(_m,{
+key:`selected-item-${n}`,...j({selectedItem:t,index:n}),"aria-disabled":c,
 "aria-readonly":l,iconProps:{"aria-disabled":c,disabled:c},onClose:e=>{
-c||l||(e.stopPropagation(),U(t),z?.(t,n))}
-},u?.(t)??""))),e.createElement("input",{placeholder:i,...q(j({
-preventKeyAction:Y,name:d,id:r,disabled:c,readOnly:l})),onKeyDown:e=>{
-"Backspace"!==e.key||P||(U(O[O.length-1]),
-T?.()),"Enter"===e.key&&P&&b&&Z<0&&y?.({inputValue:P,customValues:!0})},...H
+c||l||(e.stopPropagation(),$(t),z?.(t,n))}
+},u?.(t)??""))),e.createElement("input",{placeholder:i,...Z(U({
+preventKeyAction:W,name:d,id:r,disabled:c,readOnly:l})),onKeyDown:e=>{
+"Backspace"!==e.key||I||($(N[N.length-1]),
+R?.()),"Enter"===e.key&&I&&b&&X<0&&y?.({inputValue:I,customValues:!0})},...H
 })),!C&&e.createElement(Mn,{onClick:e=>{
-$([]),e.stopPropagation(),e.preventDefault()}},e.createElement(qn,{
-fill:R.colors.text.primary})),e.createElement(Mn,{...W({disabled:c,readOnly:l})
-},e.createElement(id,{isOpen:Q,fill:R.colors.text.primary,width:8,height:8
-}))),!l&&!c&&e.createElement(sd,{isOpen:Y,...K({disabled:c,readOnly:l})
-},S?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,Y&&(0===F.length||b)&&e.createElement(ud,{
+Y([]),e.stopPropagation(),e.preventDefault()}},e.createElement(qn,{
+fill:P.colors.text.primary})),e.createElement(Mn,{...G({disabled:c,readOnly:l})
+},e.createElement(id,{isOpen:J,fill:P.colors.text.primary,width:8,height:8
+}))),!l&&!c&&e.createElement(sd,{isOpen:W,...q({disabled:c,readOnly:l})
+},S?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,W&&(0===B.length||b)&&e.createElement(ud,{
 readOnly:!0},b?e.createElement(dd,{tabIndex:0,onClick:e=>{
-e.stopPropagation(),y&&y({inputValue:P,customValues:!0})}
-},g?.(P)||"Click to add"):v||"No items"),Y&&F.map(((n,r)=>{
-const a="string"==typeof n?n:n?.[t],o=O.indexOf(n)>-1
-;return e.createElement(ud,{isHilighted:Z===r,isSelected:o,key:a,...X({item:n,
+e.stopPropagation(),y&&y({inputValue:I,customValues:!0})}
+},g?.(I)||"Click to add"):v||"No items"),W&&B.map(((n,r)=>{
+const a="string"==typeof n?n:n?.[t],o=N.indexOf(n)>-1
+;return e.createElement(ud,{isHilighted:X===r,isSelected:o,key:a,...Q({item:n,
 index:r})
 },D?D(n):e.createElement(e.Fragment,null,u?.(n)??"",o&&e.createElement(Lc,{
-fill:R.colors.common.accent})))})))),E&&_&&e.createElement(vc,null,_))
+fill:P.colors.common.accent})))})))),E&&_&&e.createElement(vc,null,_))
 },exports.Popover=bP,
 exports.PopoverClose=yP,exports.Radio=({checked:t,className:n,disabled:r,id:a,isRequired:o,label:i,name:l,readOnly:c,...s})=>e.createElement(CP,{
 className:`RadioGroupRoot ${n??""}`.trim(),id:a,name:l,"aria-label":i,

package/{index.d.ts → dist/index.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react from 'react';
-import react__default from 'react';
+import react__default, { HTMLAttributes } from 'react';
 import * as Popover$1 from '@radix-ui/react-popover';
 import { PopperContentProps } from '@radix-ui/react-popover';
 import { RadioGroupProps as RadioGroupProps$1, RadioGroupContextValue } from '@radix-ui/react-radio-group';
@@ -470,6 +470,7 @@ interface DropdownProps<T extends DefaultDropdownItem = DefaultDropdownItem> ext
      */
     useComboboxProps?: UseComboboxProps<T>;
     itemComponent?: (item: T, props?: DropdownItemProps | DropdownInputItemProps) => React.ReactNode | string;
+    contentProps?: Pick<HTMLAttributes<HTMLElement>, 'style' | 'className'>;
 }
 interface DropdownButtonProps<T extends DefaultDropdownItem = DefaultDropdownItem> extends DropdownProps<T> {
 }
@@ -790,12 +791,13 @@ interface MultiSelectDropdownProps<T extends DefaultMultiSelectDropdownItem = De
         createText: string;
         deleteText: string;
     };
+    hideChips?: boolean;
 }
 
 /**
  * MultiSelectDropdown displays a list or drop-down box that enables selection of an option or multiple options from an available list of values.
  */
-declare const MultiSelectDropdown: <T extends DefaultMultiSelectDropdownItem>({ itemIdentifier, label, id, items, onChange, placeholder, readOnly, disabled, isRequired, itemToString, name, filterKey, width, useComboboxProps, useMultipleSelectionProps, emptyItemsText, getCustomMessage, onCustomValueAdd, customValues, inputValue: iV, hideClear, removeSelectedItem: rSelectedItem, defaultSelectedItems, handleInputChange, isErrored, isMenuLoading, errorText, InputProps, itemComponent, isDynamicMenu, locale, maxAllowedLength, minAllowedLength, onBackSpace, }: MultiSelectDropdownProps<T>) => react__default.JSX.Element;
+declare const MultiSelectDropdown: <T extends DefaultMultiSelectDropdownItem>({ itemIdentifier, label, id, items, onChange, placeholder, readOnly, disabled, isRequired, itemToString, name, filterKey, width, useComboboxProps, useMultipleSelectionProps, emptyItemsText, getCustomMessage, onCustomValueAdd, customValues, inputValue: iV, hideClear, removeSelectedItem: rSelectedItem, defaultSelectedItems, handleInputChange, isErrored, isMenuLoading, errorText, InputProps, itemComponent, isDynamicMenu, locale, maxAllowedLength, minAllowedLength, hideChips, onBackSpace, }: MultiSelectDropdownProps<T>) => react__default.JSX.Element;
 
 type DefaultProps = {
     /**

package/{index.js → dist/index.js}

@@ -3604,7 +3604,7 @@ className:"end-adornment"},i)),o&&t.createElement("div",{className:"end-label"
 className:"fui-loader",speed:r,size:n})
 },_m=({type:e="button",...n})=>"button"===e?t.createElement(Hm,{...n,
 type:"button"}):t.createElement(Dm,{...n,type:"input"}),Hm=e=>{
-const n=vn(),{itemIdentifier:r="id",label:a,id:o,items:i=[],onChange:l,placeholder:c,readOnly:s=!1,disabled:u=!1,isRequired:d=!1,showTick:h=!0,itemToString:p,name:f,itemComponent:m,width:v,className:g,style:y,defaultSelectedItem:b=null,isErrored:w,isMenuLoading:C,errorText:z,defaultIsOpen:M,isOpen:x}=e,S=t.useMemo((()=>{
+const n=vn(),{itemIdentifier:r="id",label:a,id:o,items:i=[],onChange:l,placeholder:c,readOnly:s=!1,disabled:u=!1,isRequired:d=!1,showTick:h=!0,itemToString:p,name:f,itemComponent:m,width:v,className:g,style:y,defaultSelectedItem:b=null,isErrored:w,isMenuLoading:C,errorText:z,defaultIsOpen:M,isOpen:x,contentProps:S}=e,E=t.useMemo((()=>{
 const e=i.reduce(((e,t)=>{const n=t.group??"default"
 ;return e[n]?e[n].push(t):e[n]=[t],e}),{})
 ;return Object.keys(e).sort(((e,t)=>"default"!==e?1:-1)).map((t=>({key:t,
@@ -3619,11 +3619,11 @@ isErrored:!!w,"aria-invalid":!!w,width:v,style:y},t.createElement(jd,{
 className:"SelectValue",placeholder:c}),t.createElement(Jd,{
 className:"SelectIcon"},t.createElement(nc,{fill:n.colors.text.primary
 }))),t.createElement(Ud,null,t.createElement(Gd,{className:"SelectContent",
-position:"popper",side:"bottom",sideOffset:4,sticky:"partial"
+position:"popper",side:"bottom",sideOffset:4,sticky:"partial",...S
 },C?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,t.createElement(Xd,{
 className:"SelectScrollButton"},t.createElement(nc,{fill:n.colors.text.primary
 })),t.createElement(qd,{className:"SelectViewport"
-},S.map((e=>t.createElement(Bd,{key:e.key,className:"SelectGroup"
+},E.map((e=>t.createElement(Bd,{key:e.key,className:"SelectGroup"
 },"default"!==e.key&&t.createElement(Wd,{className:"SelectLabel"
 },e.key,t.createElement(Yd,null)),e.items.map(((e,n)=>{
 const a="string"==typeof e?e:e?.[r],o=e?.[r]??""
@@ -3633,35 +3633,35 @@ showTick:h}):t.createElement(Lm,{key:a,value:o||a,disabled:!!e.disabled,
 showTick:h},p(e,"list-item")))})))))),t.createElement(Qd,{
 className:"SelectScrollButton"},t.createElement(nc,{fill:n.colors.text.primary
 })))))),w&&z&&t.createElement(Oc,null,z))
-},Dm=({itemIdentifier:e="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x})=>{
-const S=vn(),[E,_]=t.useState(a),{isOpen:H,selectedItem:D,getToggleButtonProps:L,getLabelProps:V,getMenuProps:A,openMenu:k,highlightedIndex:T,setHighlightedIndex:P,setInputValue:I,inputValue:R,getItemProps:O,getInputProps:N}=Nf({
-selectedItem:M,items:E,onSelectedItemChange:({selectedItem:e})=>{
+},Dm=({itemIdentifier:e="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x,contentProps:S})=>{
+const E=vn(),[_,H]=t.useState(a),{isOpen:D,selectedItem:L,getToggleButtonProps:V,getLabelProps:A,getMenuProps:k,openMenu:T,highlightedIndex:P,setHighlightedIndex:I,setInputValue:R,inputValue:O,getItemProps:N,getInputProps:F}=Nf({
+selectedItem:M,items:_,onSelectedItemChange:({selectedItem:e})=>{
 console.log("onSelectedItemChange",{sI:e}),b?.(e??null)},
 onIsOpenChange:({isOpen:t})=>{
-if(t&&(""===R||D&&h&&(R||"").toLowerCase()===`${D?.[h||e]||""}`.toLowerCase()))_(a),
-P(D?a.indexOf(D):-1);else{const e=D?u(D):"";D&&!t&&e!==R&&I(e)}t||_(a)},
+if(t&&(""===O||L&&h&&(O||"").toLowerCase()===`${L?.[h||e]||""}`.toLowerCase()))H(a),
+I(L?a.indexOf(L):-1);else{const e=L?u(L):"";L&&!t&&e!==O&&R(e)}t||H(a)},
 onInputValueChange:({inputValue:t})=>{
-H&&(""===t||D&&h&&(t||"").toLowerCase()===`${D?.[h||e]||""}`.toLowerCase())?_(a):_((n=>n.filter((n=>!t||("string"==typeof n?n:n?.[h||e]).toLowerCase().includes(t.toLowerCase())))))
-},itemToString:e=>e?u(e,"downshift"):"",...w}),F=!l&&!i&&H
-;return t.createElement(Ad,{width:p,isOpen:F},t.createElement(Fn,{
-className:"input-label",...V({disabled:l,readOnly:i})
-},n,c&&t.createElement(jn,null,"*")),t.createElement(bm,{...N({name:d,
+D&&(""===t||L&&h&&(t||"").toLowerCase()===`${L?.[h||e]||""}`.toLowerCase())?H(a):H((n=>n.filter((n=>!t||("string"==typeof n?n:n?.[h||e]).toLowerCase().includes(t.toLowerCase())))))
+},itemToString:e=>e?u(e,"downshift"):"",...w}),B=!l&&!i&&D
+;return t.createElement(Ad,{width:p,isOpen:B},t.createElement(Fn,{
+className:"input-label",...A({disabled:l,readOnly:i})
+},n,c&&t.createElement(jn,null,"*")),t.createElement(bm,{...F({name:d,
 readOnly:i,disabled:l,id:r}),placeholder:o,
-endAdornment:t.createElement(Od,null,!l&&!i&&!s&&D&&t.createElement(Un,{
+endAdornment:t.createElement(Od,null,!l&&!i&&!s&&L&&t.createElement(Un,{
 onClick:e=>{
-console.log("onClick WORKING"),I(""),b?.(null),k(),e.stopPropagation()},style:{
-borderRadius:"50%"}},t.createElement(mr,{fill:S.colors.text.primary
-})),t.createElement(Un,{...L({disabled:l,readOnly:i})},t.createElement(Vd,{
-isOpen:F,fill:S.colors.text.primary,width:8,height:8})))
-}),!i&&!l&&t.createElement(Td,{isOpen:H,...A({disabled:l,readOnly:i})
-},x?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,H&&0===E.length&&t.createElement(t.Fragment,null,f?t.createElement(Pd,null,t.createElement(Id,{
-onClick:e=>{e.stopPropagation(),m&&m({inputValue:R,customValues:!0}),I("")}
-},y?.(R)||"Click to add")):t.createElement(Pd,{readOnly:!0
-},g||"No items")),H&&E.map(((n,r)=>{const a="string"==typeof n?n:n?.[e]
-;return t.createElement(t.Fragment,null,v?v(n,{isHilighted:T===r,
-isSelected:D===n,key:a,...O({item:n,index:r})}):t.createElement(Pd,{
-isHilighted:T===r,isSelected:D===n,key:a,...O({item:n,index:r})
-},u(n),D===n&&t.createElement(Jc,{fill:S.colors.common.accent})))
+console.log("onClick WORKING"),R(""),b?.(null),T(),e.stopPropagation()},style:{
+borderRadius:"50%"}},t.createElement(mr,{fill:E.colors.text.primary
+})),t.createElement(Un,{...V({disabled:l,readOnly:i})},t.createElement(Vd,{
+isOpen:B,fill:E.colors.text.primary,width:8,height:8})))
+}),!i&&!l&&t.createElement(Td,{isOpen:D,...S,...k({disabled:l,readOnly:i})
+},x?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,D&&0===_.length&&t.createElement(t.Fragment,null,f?t.createElement(Pd,null,t.createElement(Id,{
+onClick:e=>{e.stopPropagation(),m&&m({inputValue:O,customValues:!0}),R("")}
+},y?.(O)||"Click to add")):t.createElement(Pd,{readOnly:!0
+},g||"No items")),D&&_.map(((n,r)=>{const a="string"==typeof n?n:n?.[e]
+;return t.createElement(t.Fragment,null,v?v(n,{isHilighted:P===r,
+isSelected:L===n,key:a,...N({item:n,index:r})}):t.createElement(Pd,{
+isHilighted:P===r,isSelected:L===n,key:a,...N({item:n,index:r})
+},u(n),L===n&&t.createElement(Jc,{fill:E.colors.common.accent})))
 })))),C&&z&&t.createElement(Oc,null,z))
 },Lm=t.forwardRef((({children:e,showTick:n=!0,...r},a)=>{const o=vn()
 ;return t.createElement($d,{className:"SelectItem",...r,ref:a
@@ -3889,51 +3889,51 @@ className:"StyledTag"},i||l?t.createElement(Km,{className:"AvatarRoot"
 className:"AvatarFallback",delayMs:600
 },l)):t.createElement("div",null),e,t.createElement(Xm,{...n,onClick:r
 },t.createElement(mr,{fill:u.colors.text.primary})))
-},ev=({itemIdentifier:e="id",label:n,id:r,items:a=[],onChange:o,placeholder:i,readOnly:l=!1,disabled:c=!1,isRequired:s=!1,itemToString:u,name:d,filterKey:h,width:p,useComboboxProps:f,useMultipleSelectionProps:m,emptyItemsText:v,getCustomMessage:g,onCustomValueAdd:y,customValues:b,inputValue:w,hideClear:C,removeSelectedItem:z,defaultSelectedItems:M=[],handleInputChange:x,isErrored:S,isMenuLoading:E,errorText:_,InputProps:H,itemComponent:D,isDynamicMenu:L,locale:V,maxAllowedLength:A,minAllowedLength:k,onBackSpace:T})=>{
-const P=vn(),[I,R]=t.useState(""),[O,N]=t.useState([]),F=t.useMemo((()=>a.filter((t=>!I||("string"==typeof t?t:t?.[h||e]).toLowerCase().includes(I.toLowerCase())))),[a,h,e,I]),{getSelectedItemProps:B,getDropdownProps:j,removeSelectedItem:U,setSelectedItems:$}=hm({
-selectedItems:O,onStateChange:({selectedItems:e,type:t})=>{switch(t){
+},ev=({itemIdentifier:e="id",label:n,id:r,items:a=[],onChange:o,placeholder:i,readOnly:l=!1,disabled:c=!1,isRequired:s=!1,itemToString:u,name:d,filterKey:h,width:p,useComboboxProps:f,useMultipleSelectionProps:m,emptyItemsText:v,getCustomMessage:g,onCustomValueAdd:y,customValues:b,inputValue:w,hideClear:C,removeSelectedItem:z,defaultSelectedItems:M=[],handleInputChange:x,isErrored:S,isMenuLoading:E,errorText:_,InputProps:H,itemComponent:D,isDynamicMenu:L,locale:V,maxAllowedLength:A,minAllowedLength:k,hideChips:T=!1,onBackSpace:P})=>{
+const I=vn(),[R,O]=t.useState(""),[N,F]=t.useState([...M]),B=t.useMemo((()=>a.filter((t=>!R||("string"==typeof t?t:t?.[h||e]).toLowerCase().includes(R.toLowerCase())))),[a,h,e,R]),{getSelectedItemProps:j,getDropdownProps:U,removeSelectedItem:$,setSelectedItems:Y}=hm({
+selectedItems:N,onStateChange:({selectedItems:e,type:t})=>{switch(t){
 case hm.stateChangeTypes.SelectedItemKeyDownBackspace:
 case hm.stateChangeTypes.SelectedItemKeyDownDelete:
 case hm.stateChangeTypes.DropdownKeyDownBackspace:
-case hm.stateChangeTypes.FunctionRemoveSelectedItem:e&&N(e)}},...m
-}),{isOpen:Y,getToggleButtonProps:W,getLabelProps:G,getMenuProps:K,getInputProps:q,highlightedIndex:Z,getItemProps:X}=Nf({
-items:F,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,inputValue:I,
+case hm.stateChangeTypes.FunctionRemoveSelectedItem:e&&F(e)}},...m
+}),{isOpen:W,getToggleButtonProps:G,getLabelProps:K,getMenuProps:q,getInputProps:Z,highlightedIndex:X,getItemProps:Q}=Nf({
+items:B,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,inputValue:R,
 stateReducer:(e,t)=>{const{changes:n,type:r}=t;switch(r){
 case Nf.stateChangeTypes.InputKeyDownEnter:case Nf.stateChangeTypes.ItemClick:
 return{...n,isOpen:!0};default:return n}},
 onStateChange({inputValue:t,type:n,selectedItem:r}){switch(n){
 case Nf.stateChangeTypes.InputKeyDownEnter:case Nf.stateChangeTypes.ItemClick:
 case Nf.stateChangeTypes.InputBlur:
-r&&(O.indexOf(r)>-1?N(O.filter((t=>t?.[e]!==r?.[e]))):N([...O,r]),R(""));break
-;case Nf.stateChangeTypes.InputChange:R(t||"")}},...f});t.useEffect((()=>{x?.(I)
-}),[x,I]),t.useEffect((()=>{o?.(O)}),[o,O]),t.useEffect((()=>{N(M??[])
-}),[M]),t.useEffect((()=>{R(w??"")}),[w]);const Q=!c&&!l&&Y
-;return t.createElement(Ad,{width:p,isOpen:Q},t.createElement(Fn,{
-className:"input-label",...G({disabled:c,readOnly:l})
+r&&(N.indexOf(r)>-1?F(N.filter((t=>t?.[e]!==r?.[e]))):F([...N,r]),O(""));break
+;case Nf.stateChangeTypes.InputChange:O(t||"")}},...f});t.useEffect((()=>{x?.(R)
+}),[x,R]),t.useEffect((()=>{o?.(N)}),[o,N]),t.useEffect((()=>{
+M.length>0&&Y([...M])}),[M]),t.useEffect((()=>{O(w??"")}),[w]);const J=!c&&!l&&W
+;return t.createElement(Ad,{width:p,isOpen:J},t.createElement(Fn,{
+className:"input-label",...K({disabled:c,readOnly:l})
 },n,s&&t.createElement(jn,null,"*")),t.createElement(kd,{disabled:c,
 isErrored:!!S,"aria-invalid":S
-},t.createElement(Nm,null,O.map(((e,n)=>t.createElement(Jm,{
-key:`selected-item-${n}`,...B({selectedItem:e,index:n}),"aria-disabled":c,
+},t.createElement(Nm,null,!T&&N.map(((e,n)=>t.createElement(Jm,{
+key:`selected-item-${n}`,...j({selectedItem:e,index:n}),"aria-disabled":c,
 "aria-readonly":l,iconProps:{"aria-disabled":c,disabled:c},onClose:t=>{
-c||l||(t.stopPropagation(),U(e),z?.(e,n))}
-},u?.(e)??""))),t.createElement("input",{placeholder:i,...q(j({
-preventKeyAction:Y,name:d,id:r,disabled:c,readOnly:l})),onKeyDown:e=>{
-"Backspace"!==e.key||I||(U(O[O.length-1]),
-T?.()),"Enter"===e.key&&I&&b&&Z<0&&y?.({inputValue:I,customValues:!0})},...H
+c||l||(t.stopPropagation(),$(e),z?.(e,n))}
+},u?.(e)??""))),t.createElement("input",{placeholder:i,...Z(U({
+preventKeyAction:W,name:d,id:r,disabled:c,readOnly:l})),onKeyDown:e=>{
+"Backspace"!==e.key||R||($(N[N.length-1]),
+P?.()),"Enter"===e.key&&R&&b&&X<0&&y?.({inputValue:R,customValues:!0})},...H
 })),!C&&t.createElement(Un,{onClick:e=>{
-$([]),e.stopPropagation(),e.preventDefault()}},t.createElement(mr,{
-fill:P.colors.text.primary})),t.createElement(Un,{...W({disabled:c,readOnly:l})
-},t.createElement(Vd,{isOpen:Q,fill:P.colors.text.primary,width:8,height:8
-}))),!l&&!c&&t.createElement(Td,{isOpen:Y,...K({disabled:c,readOnly:l})
-},E?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,Y&&(0===F.length||b)&&t.createElement(Pd,{
+Y([]),e.stopPropagation(),e.preventDefault()}},t.createElement(mr,{
+fill:I.colors.text.primary})),t.createElement(Un,{...G({disabled:c,readOnly:l})
+},t.createElement(Vd,{isOpen:J,fill:I.colors.text.primary,width:8,height:8
+}))),!l&&!c&&t.createElement(Td,{isOpen:W,...q({disabled:c,readOnly:l})
+},E?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,W&&(0===B.length||b)&&t.createElement(Pd,{
 readOnly:!0},b?t.createElement(Id,{tabIndex:0,onClick:e=>{
-e.stopPropagation(),y&&y({inputValue:I,customValues:!0})}
-},g?.(I)||"Click to add"):v||"No items"),Y&&F.map(((n,r)=>{
-const a="string"==typeof n?n:n?.[e],o=O.indexOf(n)>-1
-;return t.createElement(Pd,{isHilighted:Z===r,isSelected:o,key:a,...X({item:n,
+e.stopPropagation(),y&&y({inputValue:R,customValues:!0})}
+},g?.(R)||"Click to add"):v||"No items"),W&&B.map(((n,r)=>{
+const a="string"==typeof n?n:n?.[e],o=N.indexOf(n)>-1
+;return t.createElement(Pd,{isHilighted:X===r,isSelected:o,key:a,...Q({item:n,
 index:r})
 },D?D(n):t.createElement(t.Fragment,null,u?.(n)??"",o&&t.createElement(Jc,{
-fill:P.colors.common.accent})))})))),S&&_&&t.createElement(Oc,null,_))}
+fill:I.colors.common.accent})))})))),S&&_&&t.createElement(Oc,null,_))}
 ;function tv(e){
 throw new Error('Could not dynamically require "'+e+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')
 }var nv,rv={exports:{}};(nv=rv).exports=function(){var e,t;function n(){

package/dist/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "freemium-ui",
+  "version": "2.0.0-beta.34",
+  "description": "React Ui Components for Freemium Apps",
+  "main": "./index.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts",
+  "dependencies": {
+    "@blueprintjs/datetime2": "^2.3.2",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@tanstack/react-table": "^8.13.2",
+    "downshift": "^8.4.0",
+    "moment": "^2.30.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5",
+    "styled-components": "^6.1.8",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/freshdesk/freemium-ui.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "Freemiui",
+    "React",
+    "UI",
+    "Material"
+  ],
+  "author": "Freshworks",
+  "bugs": {
+    "url": "https://github.com/freshdesk/freemium-ui/issues"
+  },
+  "homepage": "https://github.com/freshdesk/freemium-ui#readme",
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "private": false
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "freemium-ui",
-  "version": "2.0.0-beta.32",
+  "version": "2.0.0-beta.34",
   "description": "React Ui Components for Freemium Apps",
-  "main": "./index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
   "dependencies": {
     "@blueprintjs/datetime2": "^2.3.2",
     "@dnd-kit/core": "^6.1.0",
@@ -34,6 +34,65 @@
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-onboarding": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/preset-create-react-app": "^8.0.0",
+    "@storybook/preview-api": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.64",
+    "@types/react": "^18.2.63",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-transition-group": "^4.4.10",
+    "@types/rollup-plugin-generate-package-json": "^3.2.8",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.5",
+    "@types/styled-components": "^5.1.34",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^8.0.3",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prop-types": "^15.8.1",
+    "rollup": "^4.12.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "storybook": "^8.0.0",
+    "webpack": "^5.90.3"
+  },
+  "scripts": {
+    "version:beta": "npm version prerelease --preid=beta",
+    "publish:beta": "npm publish ./dist --tag beta",
+    "publish": "npm publish ./dist",
+    "prepublishOnly": "npm run build",
+    "start": "react-scripts start",
+    "build:react-app": "react-scripts build",
+    "build": "npm run rollup && npm run post:build",
+    "post:build": "node ./scripts/frankBuild.js",
+    "rollup": "rm -rf dist && rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "check": "prettier --check .",
+    "format": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "typescript": "tsc -p tsconfig.json",
+    "prepare": "husky install"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/freshdesk/freemium-ui.git"
@@ -70,6 +129,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "private": false
-}
+  }
+}