freemium-ui 2.0.90 → 2.1.0-alpha.0

package/lib/Modal-D5RJHnbn.js

@@ -0,0 +1,51 @@
+import t from"react"
+;import{u as n,_ as e,e as o}from"./styled-components.browser.esm-Bq2p-e5F.js"
+;import{a as i,b as r,c as a,e as p}from"./index-BPxkexqj.js"
+;import{f as x,g as l}from"./index-D8E8s0tV.js"
+;import{a as c,t as m,i as s,j as f,k as u,l as d,m as g,n as h,o as y,p as v}from"./keyframes-PnzFl0I5.js"
+;import{Z as b}from"./index-BnDw8kbT.js";var j,z,w,C,E={"top-center":{from:{
+left:"50%",top:"16px",y:"-8px",x:"-50%"},enter:{left:"50%",top:"16px",y:"0",
+x:"-50%"},leave:{left:"50%",top:"16px",y:"8px",x:"-50%"}},"top-left":{from:{
+left:"16px",top:"16px",y:"-8px",x:"-8px"},enter:{left:"16px",top:"16px",y:"0",
+x:"0"},leave:{left:"16px",top:"16px",y:"8px",x:"8px"}},"top-right":{from:{
+right:"16px",top:"16px",y:"-8px",x:"8px"},enter:{right:"16px",top:"16px",y:"0",
+x:"0"},leave:{right:"16px",top:"16px",y:"8px",x:"-8px"}},"center-center":{from:{
+left:"50%",top:"50%",y:"-50%",x:"-50%"},enter:{left:"50%",top:"50%",y:"-50%",
+x:"-50%"},leave:{left:"50%",top:"50%",y:"-50%",x:"-50%"}},"center-left":{from:{
+left:"16px",top:"50%",y:"-50%",x:"-8px"},enter:{left:"16px",top:"50%",y:"-50%",
+x:"0"},leave:{left:"16px",top:"50%",y:"-50%",x:"8px"}},"center-right":{from:{
+right:"16px",top:"50%",y:"-50%",x:"8px"},enter:{right:"16px",top:"50%",y:"-50%",
+x:"0"},leave:{right:"16px",top:"50%",y:"-50%",x:"-8px"}},"bottom-center":{from:{
+left:"50%",bottom:"16px",y:"8px",x:"-50%"},enter:{left:"50%",bottom:"16px",
+y:"0px",x:"-50%"},leave:{left:"50%",bottom:"16px",y:"-8px",x:"-50%"}},
+"bottom-left":{from:{left:"16px",bottom:"16px",y:"8px",x:"-8px"},enter:{
+left:"16px",bottom:"16px",y:"0",x:"0"},leave:{left:"16px",bottom:"16px",
+y:"-8px",x:"8px"}},"bottom-right":{from:{right:"16px",bottom:"16px",y:"8px",
+x:"8px"},enter:{right:"16px",bottom:"16px",y:"0",x:"0"},leave:{right:"16px",
+bottom:"16px",y:"-8px",x:"-8px"}}},M={default:"512px",small:"424px",
+medium:"600px",large:"800px","x-large":"1200px"},k={"top-center":m,"top-left":s,
+"top-right":f,"center-center":u,"center-left":d,"center-right":g,
+"bottom-center":h,"bottom-left":y,"bottom-right":v
+},D=n(i)(j||(j=e([""],[""]))),O=n(r)(z||(z=e([""],[""]))),W=n(a)(w||(w=e(["\n  ","\n"],["\n  ","\n"])),x),I=n(p)(C||(C=e(["\n  ","\n  border-radius: 8px;\n  max-width: ",";\n  width: ",";\n  max-height: 85vh;\n  position: fixed;\n  direction: ",";\n  z-index: ",";\n  transform: translate(\n    ",",\n    ","\n  );\n  top: ",";\n  bottom: ",";\n  left: ",";\n  right: ",";\n  animation-duration: ",";\n  animation-timing-function: ",";\n  &[data-state='open'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n"],["\n  ","\n  border-radius: 8px;\n  max-width: ",";\n  width: ",";\n  max-height: 85vh;\n  position: fixed;\n  direction: ",";\n  z-index: ",";\n  transform: translate(\n    ",",\n    ","\n  );\n  top: ",";\n  bottom: ",";\n  left: ",";\n  right: ",";\n  animation-duration: ",";\n  animation-timing-function: ",";\n  &[data-state='open'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n"])),l,(function(t){
+var n=t.size;return M[n]}),(function(t){return t.fullWidth?"100%":"unset"
+}),(function(t){return t.theme.direction}),(function(t){
+return t.theme.zIndex.modal||b.modal}),(function(t){var n=t.align,e=t.position
+;return E["".concat(n,"-").concat(e)].enter.x}),(function(t){
+var n=t.align,e=t.position;return E["".concat(n,"-").concat(e)].enter.y
+}),(function(t){var n=t.align,e=t.position
+;return E["".concat(n,"-").concat(e)].enter.top}),(function(t){
+var n=t.align,e=t.position;return E["".concat(n,"-").concat(e)].enter.bottom
+}),(function(t){var n=t.align,e=t.position
+;return E["".concat(n,"-").concat(e)].enter.left}),(function(t){
+var n=t.align,e=t.position;return E["".concat(n,"-").concat(e)].enter.right
+}),(function(t){return t.theme.transitions.duration.standard}),(function(t){
+return t.theme.transitions.easing.easeIn}),(function(t){
+var n=t.align,e=t.position;return k["".concat(n,"-").concat(e)]
+}),c),N=function(n){
+var e=n.isOpen,i=n.children,r=n.align,a=void 0===r?"center":r,p=n.customClass,x=void 0===p?"":p,l=n.fullWidth,c=void 0!==l&&l,m=n.customModalContentStyles,s=void 0===m?{}:m,f=n.onDismiss,u=n.position,d=void 0===u?"center":u,g=n.size,h=o()
+;return t.createElement(D,{open:e,onOpenChange:function(t){t||null==f||f()}
+},t.createElement(O,null,t.createElement(W,{forceMount:!0,
+className:"DialogOverlay",onClick:function(){return null==f?void 0:f()}
+}),t.createElement(I,{forceMount:!0,dir:h.direction,
+className:"DialogContent ".concat(null!=x?x:"").trim(),size:null!=g?g:"default",
+fullWidth:c,align:a,position:d,style:s},i)))};export{N as M};

package/lib/Modal.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import React$1 from 'react';
+
+type ModalAlignType = 'top' | 'center' | 'bottom';
+type ModalPositionType = 'left' | 'center' | 'right';
+type ModalSizeType = 'default' | 'medium' | 'small' | 'large' | 'x-large';
+interface ModalProps {
+    /**
+     * The children or label
+     */
+    children?: React.ReactNode | string;
+    /**
+     * Is the button inline
+     */
+    isOpen?: boolean;
+    /**
+     * Is the button inline
+     */
+    fullWidth?: boolean;
+    /**
+     * Is the button inline
+     */
+    align?: ModalAlignType;
+    /**
+     * Is the button inline
+     */
+    position?: ModalPositionType;
+    /**
+     * Is the button inline
+     */
+    size?: ModalSizeType;
+    /**
+     * How large should the button be?
+     */
+    onDismiss?: () => void;
+    /**
+     * The children or label
+     */
+    customClass?: string;
+    /**
+     * The children or label
+     */
+    customModalContentStyles?: React.CSSProperties;
+}
+
+/**
+ * Modals are used as an overlay to display information. It can also be used as confirm boxes to take user inputs.
+ */
+declare const Modal: ({ isOpen, children, align, customClass, fullWidth, customModalContentStyles, onDismiss, position, size, }: ModalProps) => React$1.JSX.Element;
+
+export { Modal, type ModalAlignType, type ModalPositionType, type ModalProps, type ModalSizeType };

package/lib/Modal.js

@@ -0,0 +1,7 @@
+export{M as Modal}from"./Modal-D5RJHnbn.js";import"react"
+;import"./styled-components.browser.esm-Bq2p-e5F.js";import"./index-BPxkexqj.js"
+;import"./index-ByHJlnsx.js";import"react-dom";import"./index-CeIB4COQ.js"
+;import"./index-BdTXfGkV.js";import"./index-BxNZ3C71.js"
+;import"./index-COoRg_pp.js";import"./Combination-AmN1Cqrf.js"
+;import"./index-Dy5ztCxm.js";import"./index-D8E8s0tV.js"
+;import"./index-BnDw8kbT.js";import"./keyframes-PnzFl0I5.js";

package/lib/MultiSelectDropdown-DblSkVpv.js

@@ -0,0 +1,84 @@
+import{u as e,_ as n,e as t,b as l}from"./styled-components.browser.esm-Bq2p-e5F.js"
+;import i from"react"
+;import{p as o,u as a,D as r,q as s,o as d,I as c,j as u,L as m,T as p}from"./styles-BlCCKAZq.js"
+;import{S as g,R as f,a as h}from"./index-D8E8s0tV.js"
+;import{E as y}from"./ErrorText-Uvye7uop.js"
+;import{C as v}from"./Cross-CIeKwtq6.js"
+;import{T as C}from"./TickIcon-BJqSAG4_.js"
+;import{L as I}from"./Loader-b8lHCp4N.js";import{T as w}from"./Tag-Cu75ReQP.js"
+;var x,E,b=e.div(x||(x=n(["\n  flex: 1;\n  gap: 8px;\n  display: flex;\n  flex-wrap: wrap;\n  direction: ",";\n  input {\n    color: ",";\n    min-width: 150px;\n    flex: 1;\n    display: inline-block;\n    outline: none;\n    padding: 0 8px;\n    margin: 0;\n    border: none;\n    background: none;\n    font-weight: 500;\n    font-family: ",";\n    font-size: ",";\n    line-height: ",";\n  }\n"],["\n  flex: 1;\n  gap: 8px;\n  display: flex;\n  flex-wrap: wrap;\n  direction: ",";\n  input {\n    color: ",";\n    min-width: 150px;\n    flex: 1;\n    display: inline-block;\n    outline: none;\n    padding: 0 8px;\n    margin: 0;\n    border: none;\n    background: none;\n    font-weight: 500;\n    font-family: ",";\n    font-size: ",";\n    line-height: ",";\n  }\n"])),(function(e){
+return e.theme.direction}),(function(e){return e.theme.colors.text.primary
+}),(function(e){return e.theme.typography.fontFamily}),(function(e){
+return e.theme.typography.primary.fontSize}),(function(e){
+return e.theme.typography.primary.lineHeight}));e.span(E||(E=n([""],[""])))
+;var S=function(e){
+var n,x=e.itemIdentifier,E=void 0===x?"id":x,S=e.label,k=e.id,T=e.items,D=void 0===T?[]:T,P=e.onChange,O=e.placeholder,j=e.readOnly,K=void 0!==j&&j,L=e.disabled,M=void 0!==L&&L,B=e.isRequired,V=void 0!==B&&B,A=e.itemToString,F=e.name,$=e.filterKey,N=e.width,R=e.useComboboxProps,z=e.useMultipleSelectionProps,q=e.emptyItemsText,H=e.getCustomMessage,_=e.onCustomValueAdd,G=e.customValues,J=e.inputValue,Q=e.hideClear,U=e.hideArrow
+;e.removeSelectedItem
+;var W=e.defaultSelectedItems,X=void 0===W?[]:W,Y=e.handleInputChange,Z=e.isErrored,ee=e.isMenuLoading,ne=e.errorText,te=e.InputProps,le=e.itemComponent
+;e.isDynamicMenu,e.locale,e.maxAllowedLength,e.minAllowedLength
+;var ie=e.hideChips,oe=void 0!==ie&&ie,ae=e.hideSelectedItem,re=void 0!==ae&&ae,se=e.onBackSpace,de=t(),ce=i.useState(null!=J?J:""),ue=ce[0],me=ce[1],pe=o(l({
+initialSelectedItems:X,onStateChange:function(e){var n=e.selectedItems
+;switch(e.type){case o.stateChangeTypes.FunctionSetSelectedItems:
+case o.stateChangeTypes.SelectedItemKeyDownBackspace:
+case o.stateChangeTypes.SelectedItemKeyDownDelete:
+case o.stateChangeTypes.DropdownKeyDownBackspace:
+case o.stateChangeTypes.FunctionRemoveSelectedItem:
+case o.stateChangeTypes.FunctionAddSelectedItem:n&&(null==P||P(n))}}
+},z)),ge=pe.getSelectedItemProps,fe=pe.getDropdownProps,he=pe.selectedItems,ye=pe.removeSelectedItem,ve=pe.setSelectedItems,Ce=pe.addSelectedItem,Ie=i.useMemo((function(){
+return D.filter((function(e){var n="string"==typeof e?e:null==e?void 0:e[$||E]
+;return!(re&&he.some((function(n){
+return(null==A?void 0:A(n))===(null==A?void 0:A(e))
+})))&&(!ue||n.toLowerCase().includes(ue.toLowerCase()))}))
+}),[D,ue,$,E,re,he,A]),we=a(l({id:k,items:Ie,itemToString:function(e){
+return e&&A?A(e,"downshift"):""},selectedItem:null,inputValue:ue,
+stateReducer:function(e,n){var t=n.changes;switch(n.type){
+case a.stateChangeTypes.InputKeyDownEnter:case a.stateChangeTypes.ItemClick:
+return l(l({},t),{isOpen:!ue});default:return t}},onStateChange:function(e){
+var n=e.inputValue,t=e.type,l=e.selectedItem;switch(t){
+case a.stateChangeTypes.InputKeyDownEnter:case a.stateChangeTypes.ItemClick:
+case a.stateChangeTypes.InputBlur:l&&(he.find((function(e){
+return(null==e?void 0:e[E])===(null==l?void 0:l[E])
+}))?ye(l):Ce(l),me(""),null==Y||Y(""));break
+;case a.stateChangeTypes.InputChange:
+me(null!=n?n:""),null==Y||Y(null!=n?n:""),Ie.length||n||Ee()}}
+},R)),xe=we.isOpen,Ee=we.closeMenu,be=we.getToggleButtonProps,Se=we.getLabelProps,ke=we.getMenuProps,Te=we.getInputProps,De=we.highlightedIndex,Pe=we.getItemProps,Oe=!M&&!K&&xe,je=Te(fe({
+preventKeyAction:xe,name:F,disabled:M,readOnly:K,dir:de.direction
+})),Ke=function(e){if(e&&G&&_&&De<0){var n=_({inputValue:e,customValues:!0})
+;Ce(n),me("")}};return i.createElement(r,{width:N},i.createElement(g,l({
+className:"input-label"},Se({disabled:M,readOnly:K,dir:de.direction
+})),S,S&&V&&i.createElement(f,null,"*")),i.createElement(s,{disabled:M,
+$isErrored:!!Z,"aria-invalid":Z,className:"dropdown-toggle-button"
+},i.createElement(b,null,!oe&&he.map((function(e,n){var t
+;return i.createElement(w,l({key:"selected-item-".concat(n)},ge({selectedItem:e,
+index:n,dir:de.direction}),{"aria-disabled":M,"aria-readonly":K,iconProps:{
+"aria-disabled":M,disabled:M},onClose:function(n){
+M||K||(n.stopPropagation(),ye(e))}
+}),null!==(t=null==A?void 0:A(e))&&void 0!==t?t:"")
+})),i.createElement("input",l({placeholder:O},je,te,{onKeyDown:function(e){
+var n,t
+;"Backspace"!==e.key||ue||(ye(he[he.length-1]),null==se||se()),"Enter"===e.key&&Ke(ue),
+null===(n=null==je?void 0:je.onKeyDown)||void 0===n||n.call(je,e),
+null===(t=null==te?void 0:te.onKeyDown)||void 0===t||t.call(te,e)},
+onClick:function(e){var n,t
+;null===(n=null==je?void 0:je.onClick)||void 0===n||n.call(je,e),
+null===(t=null==te?void 0:te.onClick)||void 0===t||t.call(te,e),
+Ie.length||ue||Ee()}}))),!Q&&i.createElement(h,{"aria-label":"Clear",
+onClick:function(e){ve([]),me(""),e.stopPropagation(),e.preventDefault()}
+},i.createElement(v,{fill:de.colors.text.primary
+})),!U&&i.createElement(h,l({},be({disabled:M,readOnly:K,dir:de.direction
+})),i.createElement(d,{$isOpen:Oe,fill:de.colors.text.primary,width:8,height:8
+}))),!K&&!M&&i.createElement(c,l({className:"ItemsContainer",$isOpen:xe},ke({
+disabled:M,readOnly:K,dir:de.direction
+})),ee?i.createElement(u,null,i.createElement(I,null)):i.createElement(i.Fragment,null,xe&&(0===Ie.length||G)&&i.createElement(m,{
+readOnly:!0},G?i.createElement(p,{tabIndex:0,onClick:function(e){var n
+;e.stopPropagation(),
+Ke(ue),ue&&(null===(n=null==je?void 0:je.onClick)||void 0===n||n.call(je,e))}
+},null!==(n=null==H?void 0:H(ue))&&void 0!==n?n:"Click to add"):null!=q?q:"No items"),xe&&Ie.map((function(e,n){
+var t,o,a,r="string"==typeof e?"".concat(e).concat(n).trim():"".concat(null!==(t=null==e?void 0:e[E])&&void 0!==t?t:"").concat(n).trim(),s=he.map((function(e){
+return null==e?void 0:e[E]
+})).filter(Boolean).indexOf(null!==(o=null==e?void 0:e[E])&&void 0!==o?o:"")>-1
+;return i.createElement(m,l({$isHilighted:De===n,$isSelected:s,key:r},Pe({
+item:e,index:n,dir:de.direction
+})),le?le(e):i.createElement(i.Fragment,null,null!==(a=null==A?void 0:A(e))&&void 0!==a?a:"",s&&i.createElement(C,{
+fill:de.colors.common.accent})))})))),Z&&ne&&i.createElement(y,null,ne))}
+;export{S as M};

package/lib/MultiSelectDropdown.d.ts

@@ -0,0 +1,116 @@
+/// <reference types="react" />
+import React$1 from 'react';
+import { UseMultipleSelectionProps, UseComboboxProps } from 'downshift';
+
+type DefaultMultiSelectDropdownItem = {
+    [key: string]: any;
+};
+interface MultiSelectDropdownProps<T extends DefaultMultiSelectDropdownItem = DefaultMultiSelectDropdownItem> {
+    /**
+     *  dropdown item content
+     */
+    items?: Array<T>;
+    /**
+     * Id of the item
+     */
+    itemIdentifier?: string;
+    /**
+     * selected item of dropdown
+     */
+    defaultSelectedItems?: T[];
+    /**
+     * Called when select an option or input value change
+     */
+    onChange?: (item: T[]) => void;
+    itemToString?: (item: T, type?: 'list-item' | 'display' | 'downshift') => string;
+    /**
+     * Fuction to give the string representation of the item
+     */
+    itemComponent?: (item: T) => React.ReactNode | string;
+    /**
+     * Is the dropdown readonly
+     */
+    readOnly?: boolean;
+    /**
+     * Whether disabled select
+     */
+    disabled?: boolean;
+    /**
+     * name of the drowpdown
+     */
+    name?: string;
+    /**
+     * width of the multi select drowpdown
+     */
+    width?: string;
+    filterKey?: string;
+    getCustomMessage?: (inoutValue: string) => string;
+    /**
+     * Empty items text box
+     */
+    emptyItemsText?: string;
+    /**
+     * Whether to allow hide or clear when click
+     */
+    hideClear?: boolean;
+    /**
+     * Whether to hide or show arrow
+     */
+    hideArrow?: boolean;
+    /**
+     * Error text to be shown
+     */
+    errorText?: string;
+    /**
+     * Is this a error field?
+     */
+    isErrored?: boolean;
+    /**
+     * Is this a required field?
+     */
+    isRequired?: boolean;
+    /**
+     * Is menu loading?
+     */
+    isMenuLoading?: boolean;
+    inputValue?: string | null;
+    handleInputChange?: (inputValue: string) => void;
+    onCustomValueAdd?: (item: {
+        inputValue: string;
+        customValues: boolean;
+    }) => T;
+    removeSelectedItem?: (item: T, index: number) => void;
+    /**
+     * Is this custom value
+     */
+    customValues?: boolean;
+    /**
+     * id of the drowpdown
+     */
+    id?: string;
+    /**
+     * label for the drowpdown
+     */
+    label?: string;
+    placeholder?: string;
+    useMultipleSelectionProps?: UseMultipleSelectionProps<T>;
+    useComboboxProps?: UseComboboxProps<T>;
+    InputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    onBackSpace?: () => void;
+    maxAllowedLength?: number;
+    isDynamicMenu?: boolean;
+    minAllowedLength?: number;
+    locale?: {
+        createText: string;
+        deleteText: string;
+    };
+    hideChips?: boolean;
+    hideSelectedItem?: 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, hideArrow, removeSelectedItem: rSelectedItem, defaultSelectedItems, handleInputChange, isErrored, isMenuLoading, errorText, InputProps, itemComponent, isDynamicMenu, locale, maxAllowedLength, minAllowedLength, hideChips, hideSelectedItem, onBackSpace, }: MultiSelectDropdownProps<T>) => React$1.JSX.Element;
+
+export { type DefaultMultiSelectDropdownItem, MultiSelectDropdown, type MultiSelectDropdownProps };

package/lib/MultiSelectDropdown.js

@@ -0,0 +1,14 @@
+export{M as MultiSelectDropdown}from"./MultiSelectDropdown-DblSkVpv.js"
+;import"./styled-components.browser.esm-Bq2p-e5F.js";import"react"
+;import"./styles-BlCCKAZq.js";import"./index-ByHJlnsx.js";import"react-dom"
+;import"./_commonjsHelpers-fGXyuM93.js";import"./index-CeIB4COQ.js"
+;import"./index-BdTXfGkV.js";import"./index-Cjkk7z9c.js"
+;import"./index-BY9lf-do.js";import"./index-COoRg_pp.js"
+;import"./Combination-AmN1Cqrf.js";import"./index-BxNZ3C71.js"
+;import"./index-BrF1HKA1.js";import"./index-BROhcSiX.js"
+;import"./index-DtzckyT3.js";import"./index-_WvIFKTM.js"
+;import"./keyframes-PnzFl0I5.js";import"./index-BnDw8kbT.js"
+;import"./ChevronUp-BWiG3XYd.js";import"./index-D8E8s0tV.js"
+;import"./ErrorText-Uvye7uop.js";import"./Cross-CIeKwtq6.js"
+;import"./TickIcon-BJqSAG4_.js";import"./Loader-b8lHCp4N.js"
+;import"./Tag-Cu75ReQP.js";

package/lib/Pickers.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import { DateInput3Props, DateRangeInput3Props, TimePrecision } from '@blueprintjs/datetime2';
+
+type DefaultProps = {
+    /**
+     * Is this a required field?
+     */
+    isRequired?: boolean;
+    /**
+     * Is this a error field?
+     */
+    isErrored?: boolean;
+    /**
+     * Error text to be shown
+     */
+    errorText?: string;
+    /**
+     * Id of the date picker
+     */
+    id?: string;
+    /**
+     * name of the date picker
+     */
+    name?: string;
+    /**
+     * label for the picker
+     */
+    label?: string;
+    language?: string;
+    placeholder?: string;
+    /**
+     * Today's date according to the user's timezone in the YYYY-MM-DD format
+     */
+    dateToHilight?: string;
+    /**
+     * Whether disabled select
+     */
+    disabled?: boolean;
+    portalContainer?: HTMLElement;
+    cancelButtonText?: string;
+    updateButtonText?: string;
+};
+type DatePickerProps = DefaultProps & Partial<DateInput3Props> & {
+    displayFormat?: string;
+    useTime?: boolean;
+};
+type DateRangePickerProps = DefaultProps & Partial<DateRangeInput3Props> & {
+    displayFormat?: string;
+    useTime?: boolean;
+};
+type DateTimePickerProps = DefaultProps & Partial<DateInput3Props> & {
+    displayFormat?: string;
+};
+type DateTimeRangePickerProps = DefaultProps & Partial<DateRangeInput3Props> & {
+    displayFormat?: string;
+};
+type TimePickerProps = DefaultProps & {
+    displayFormat?: string;
+    value?: string;
+    onChange?: (dateString: string | null) => void;
+    useAmPm?: boolean;
+    precision?: TimePrecision;
+};
+
+/**
+ * Datepicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.
+ * All the date formats passed as attribute's values must be valid ISO Date format (opens new window).
+ */
+declare const DatePicker: (props: DatePickerProps) => React.JSX.Element;
+
+/**
+ * DateTimePicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.
+ * All the date formats passed as attribute's values must be valid ISO Date format (opens new window).
+ */
+declare const DateTimePicker: (props: DateTimePickerProps) => React.JSX.Element;
+
+/**
+ * DateRangePicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.
+ * All the date formats passed as attribute's values must be valid ISO Date format (opens new window).
+ */
+declare const DateRangePicker: (props: DateRangePickerProps) => React.JSX.Element;
+
+/**
+ * DateTimeRangePicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.
+ * All the date formats passed as attribute's values must be valid ISO Date format (opens new window).
+ */
+declare const DateTimeRangePicker: (props: DateTimeRangePickerProps) => React.JSX.Element;
+
+/**
+ * TimePicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.
+ */
+declare const TimePicker: (props: TimePickerProps) => React.JSX.Element;
+
+export { DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, DateTimeRangePicker, type DateTimeRangePickerProps, type DefaultProps, TimePicker, type TimePickerProps };

package/lib/Pickers.js

@@ -0,0 +1,16 @@
+export{D as DatePicker,b as DateRangePicker,a as DateTimePicker,c as DateTimeRangePicker,T as TimePicker}from"./TimePicker-7Uqb3xJn.js"
+;import"./styled-components.browser.esm-Bq2p-e5F.js";import"react"
+;import"./index-BT1o947S.js";import"./index-BnDw8kbT.js"
+;import"./index-D8E8s0tV.js";import"./index-ByHJlnsx.js";import"react-dom"
+;import"./keyframes-PnzFl0I5.js";import"./ErrorText-Uvye7uop.js"
+;import"./Button-Bd1O8_k7.js";import"./_commonjsHelpers-fGXyuM93.js"
+;import"./isTypedArray-DN-UDJh5.js";import"./styles-BlCCKAZq.js"
+;import"./index-CeIB4COQ.js";import"./index-BdTXfGkV.js"
+;import"./index-Cjkk7z9c.js";import"./index-BY9lf-do.js"
+;import"./index-COoRg_pp.js";import"./Combination-AmN1Cqrf.js"
+;import"./index-BxNZ3C71.js";import"./index-BrF1HKA1.js"
+;import"./index-BROhcSiX.js";import"./index-DtzckyT3.js"
+;import"./index-_WvIFKTM.js";import"./ChevronUp-BWiG3XYd.js"
+;import"./Dropdown-D59u6zOt.js";import"./Cross-CIeKwtq6.js"
+;import"./TickIcon-BJqSAG4_.js";import"./TextArea--fiwZ_QM.js"
+;import"./Loader-b8lHCp4N.js";

package/lib/Popover-BU73-g73.js

@@ -0,0 +1,90 @@
+import{u as o,_ as n,f as e,e as t,b as r}from"./styled-components.browser.esm-Bq2p-e5F.js"
+
+;import a,{useRef as i,useState as s,createElement as l,useCallback as d,forwardRef as p,useEffect as c}from"react"
+;import{T as u}from"./index-D8E8s0tV.js"
+;import{$ as m,a as v,_ as f,b as h}from"./index-ByHJlnsx.js"
+;import{a as g,$ as x}from"./index-CeIB4COQ.js"
+;import{$ as b}from"./index-BdTXfGkV.js"
+;import{a as P,$ as C}from"./index-COoRg_pp.js"
+;import{h as O,R as _,$ as w,a as F}from"./Combination-AmN1Cqrf.js"
+;import{$ as E}from"./index-BxNZ3C71.js"
+;import{$ as y,a as D,b as A,c as j,d as k}from"./index-BrF1HKA1.js"
+;import{$ as I}from"./index-Dy5ztCxm.js"
+;import{s as M,q as T,r as R,u as $,a as z}from"./keyframes-PnzFl0I5.js"
+;import{h as K}from"./index-BnDw8kbT.js"
+;const N="Popover",[q,B]=b(N,[y]),L=y(),[S,U]=q(N),W=p(((o,n)=>{
+const{__scopePopover:e,...t}=o,r=U("PopoverTrigger",e),a=L(e),i=m(n,r.triggerRef),s=l(v.button,f({
+type:"button","aria-haspopup":"dialog","aria-expanded":r.open,
+"aria-controls":r.contentId,"data-state":oo(r.open)},t,{ref:i,
+onClick:x(o.onClick,r.onOpenToggle)}));return r.hasCustomAnchor?s:l(A,f({
+asChild:!0},a),s)})),Z="PopoverPortal",[G,H]=q(Z,{forceMount:void 0
+}),J="PopoverContent",Q=p(((o,n)=>{
+const e=H(J,o.__scopePopover),{forceMount:t=e.forceMount,...r}=o,a=U(J,o.__scopePopover)
+;return l(I,{present:t||a.open},a.modal?l(V,f({},r,{ref:n})):l(X,f({},r,{ref:n
+})))})),V=p(((o,n)=>{const e=U(J,o.__scopePopover),t=i(null),r=m(n,t),a=i(!1)
+;return c((()=>{const o=t.current;if(o)return O(o)}),[]),l(_,{as:h,
+allowPinchZoom:!0},l(Y,f({},o,{ref:r,trapFocus:e.open,
+disableOutsidePointerEvents:!0,onCloseAutoFocus:x(o.onCloseAutoFocus,(o=>{var n
+;o.preventDefault(),
+a.current||null===(n=e.triggerRef.current)||void 0===n||n.focus()})),
+onPointerDownOutside:x(o.onPointerDownOutside,(o=>{
+const n=o.detail.originalEvent,e=0===n.button&&!0===n.ctrlKey,t=2===n.button||e
+;a.current=t}),{checkForDefaultPrevented:!1}),
+onFocusOutside:x(o.onFocusOutside,(o=>o.preventDefault()),{
+checkForDefaultPrevented:!1})})))})),X=p(((o,n)=>{
+const e=U(J,o.__scopePopover),t=i(!1),r=i(!1);return l(Y,f({},o,{ref:n,
+trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{var a,i
+;(null===(a=o.onCloseAutoFocus)||void 0===a||a.call(o,n),
+n.defaultPrevented)||(t.current||null===(i=e.triggerRef.current)||void 0===i||i.focus(),
+n.preventDefault());t.current=!1,r.current=!1},onInteractOutside:n=>{var a,i
+;null===(a=o.onInteractOutside)||void 0===a||a.call(o,n),
+n.defaultPrevented||(t.current=!0,
+"pointerdown"===n.detail.originalEvent.type&&(r.current=!0));const s=n.target
+;(null===(i=e.triggerRef.current)||void 0===i?void 0:i.contains(s))&&n.preventDefault(),
+"focusin"===n.detail.originalEvent.type&&r.current&&n.preventDefault()}}))
+})),Y=p(((o,n)=>{
+const{__scopePopover:e,trapFocus:t,onOpenAutoFocus:r,onCloseAutoFocus:a,disableOutsidePointerEvents:i,onEscapeKeyDown:s,onPointerDownOutside:d,onFocusOutside:p,onInteractOutside:c,...u}=o,m=U(J,e),v=L(e)
+;return w(),l(F,{asChild:!0,loop:!0,trapped:t,onMountAutoFocus:r,
+onUnmountAutoFocus:a},l(C,{asChild:!0,disableOutsidePointerEvents:i,
+onInteractOutside:c,onEscapeKeyDown:s,onPointerDownOutside:d,onFocusOutside:p,
+onDismiss:()=>m.onOpenChange(!1)},l(j,f({"data-state":oo(m.open),role:"dialog",
+id:m.contentId},v,u,{ref:n,style:{...u.style,
+"--radix-popover-content-transform-origin":"var(--radix-popper-transform-origin)",
+"--radix-popover-content-available-width":"var(--radix-popper-available-width)",
+"--radix-popover-content-available-height":"var(--radix-popper-available-height)",
+"--radix-popover-trigger-width":"var(--radix-popper-anchor-width)",
+"--radix-popover-trigger-height":"var(--radix-popper-anchor-height)"}}))))}))
+;function oo(o){return o?"open":"closed"}const no=o=>{
+const{__scopePopover:n,children:e,open:t,defaultOpen:r,onOpenChange:a,modal:p=!1}=o,c=L(n),u=i(null),[m,v]=s(!1),[f=!1,h]=g({
+prop:t,defaultProp:r,onChange:a});return l(D,c,l(S,{scope:n,contentId:E(),
+triggerRef:u,open:f,onOpenChange:h,onOpenToggle:d((()=>h((o=>!o))),[h]),
+hasCustomAnchor:m,onCustomAnchorAdd:d((()=>v(!0)),[]),
+onCustomAnchorRemove:d((()=>v(!1)),[]),modal:p},e))},eo=W,to=o=>{
+const{__scopePopover:n,forceMount:e,children:t,container:r}=o,a=U(Z,n)
+;return l(G,{scope:n,forceMount:e},l(I,{present:e||a.open},l(P,{asChild:!0,
+container:r},t)))},ro=p(((o,n)=>{
+const{__scopePopover:e,...t}=o,r=U("PopoverClose",e);return l(v.button,f({
+type:"button"},t,{ref:n,onClick:x(o.onClick,(()=>r.onOpenChange(!1)))}))
+})),ao=p(((o,n)=>{const{__scopePopover:e,...t}=o,r=L(e);return l(k,f({},r,t,{
+ref:n}))}))
+;var io,so,lo,po,co,uo,mo,vo=o(Q)(so||(so=n(["\n  background: ",";\n  color: ",";\n  border-radius: 8px;\n  box-shadow:\n    "," 0px 10px 38px -10px,\n    "," 0px 10px 20px -15px;\n  animation-duration: ",";\n  animation-timing-function: ",";\n  will-change: transform, opacity;\n  &[data-state='open'][data-side='top'] {\n    animation-name: ",";\n  }\n  &[data-state='open'][data-side='right'] {\n    animation-name: ",";\n  }\n  &[data-state='open'][data-side='bottom'] {\n    animation-name: ",";\n  }\n  &[data-state='open'][data-side='left'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n\n  ","\n"],["\n  background: ",";\n  color: ",";\n  border-radius: 8px;\n  box-shadow:\n    "," 0px 10px 38px -10px,\n    "," 0px 10px 20px -15px;\n  animation-duration: ",";\n  animation-timing-function: ",";\n  will-change: transform, opacity;\n  &[data-state='open'][data-side='top'] {\n    animation-name: ",";\n  }\n  &[data-state='open'][data-side='right'] {\n    animation-name: ",";\n  }\n  &[data-state='open'][data-side='bottom'] {\n    animation-name: ",";\n  }\n  &[data-state='open'][data-side='left'] {\n    animation-name: ",";\n  }\n  &[data-state='closed'] {\n    animation-name: ",";\n  }\n\n  ","\n"])),(function(o){
+return o.theme.colors.fill.surface}),(function(o){
+return o.theme.colors.text.primary}),(function(o){var n=o.theme
+;return K(n.colors.shadow,.35)}),(function(o){var n=o.theme
+;return K(n.colors.shadow,.2)}),(function(o){
+return o.theme.transitions.duration.standard}),(function(o){
+return o.theme.transitions.easing.easeIn}),M,T,R,$,z,(function(o){var t=o.theme
+;return"dark"===t.mode&&e(io||(io=n(["\n      border: 1px solid ",";\n    "],["\n      border: 1px solid ",";\n    "])),t.colors.border.light)
+})),fo=o(ao)(lo||(lo=n(["\n  fill: ",";\n"],["\n  fill: ",";\n"])),(function(o){
+return o.theme.colors.fill.surface
+})),ho=o(no)(po||(po=n([""],[""]))),go=o(eo)(co||(co=n([""],[""]))),xo=o(to)(uo||(uo=n([""],[""]))),bo=o(ro)(mo||(mo=n([""],[""]))),Po=function(o){
+var n,e,i,s,l=o.children,d=o.trigger,p=o.arrow,c=o.hoverOutToClose,m=o.align,v=o.hoverToOpen,f=o.avoidCollisions,h=void 0===f||f,g=o.replaceTrigger,x=void 0!==g&&g,b=o.side,P=o.disabled,C=o.onClose,O=o.popoverContentProps,_=o.popoverRootProps,w=o.anchorOrigin,F=a.useState(!1),E=F[0],y=F[1],D=null!==(s=null!==(i=null!==(e=null!==(n=null!=b?b:"bottom"===(null==w?void 0:w.vertical)&&w.horizontal?"bottom":void 0)&&void 0!==n?n:"top"===(null==w?void 0:w.vertical)&&w.horizontal?"top":void 0)&&void 0!==e?e:"center"===(null==w?void 0:w.vertical)&&"left"===w.horizontal?"left":void 0)&&void 0!==i?i:"center"===(null==w?void 0:w.vertical)&&"right"===w.horizontal?"right":void 0)&&void 0!==s?s:"bottom",A=t()
+;return a.createElement(ho,r({open:E,onOpenChange:function(o){y(o)}
+},_),x?a.createElement(a.Fragment,null,d):a.createElement(go,{dir:A.direction,
+asChild:!0,className:"PopoverTrigger",disabled:P},a.createElement(u,{
+className:"TriggerButtonWrapper",onMouseEnter:function(){v&&y(!0)}
+},d)),a.createElement(xo,null,a.createElement(vo,r({forceMount:!0,
+className:"PopoverContent","data-popover-content":!0,dir:A.direction,
+onMouseLeave:function(){c&&(y(!1),null==C||C())},onInteractOutside:function(){
+y(!1),null==C||C()},side:D,align:m,sideOffset:8,avoidCollisions:h
+},O),l,p&&a.createElement(fo,null))))};export{Po as P,bo as a,go as b};

package/lib/Popover.d.ts

@@ -0,0 +1,94 @@
+/// <reference types="react" />
+import * as react from 'react';
+import react__default from 'react';
+import * as Popover$1 from '@radix-ui/react-popover';
+import * as styled_components from 'styled-components';
+import * as styled_components_dist_types from 'styled-components/dist/types';
+
+type Origin = {
+    vertical?: 'top' | 'center' | 'bottom';
+    horizontal?: 'left' | 'center' | 'right';
+};
+interface PopoverProps {
+    /**
+     * How large should the button be?
+     */
+    onClose?: (event?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * Which variant the button should be
+     */
+    id?: string;
+    /**
+     * Which variant the button should be
+     */
+    disabled?: boolean;
+    replaceTrigger?: boolean;
+    popoverContentProps?: Popover$1.PopoverContentProps;
+    popoverRootProps?: Popover$1.PopoverProps;
+    /**
+     * The children or label
+     */
+    trigger: React.ReactNode | string;
+    /**
+     * The children or label
+     */
+    children?: React.ReactNode | string;
+    /**
+     * Is the button inline
+     */
+    hoverOutToClose?: boolean;
+    /**
+     * Is the button inline
+     */
+    hoverToOpen?: boolean;
+    /**
+     * Is the button inline
+     */
+    arrow?: boolean;
+    /**
+     * Is the button inline
+     */
+    avoidCollisions?: boolean;
+    /**
+     * Is the button inline
+     */
+    side?: Popover$1.PopperContentProps['side'];
+    /**
+     * Is the button inline
+     */
+    align?: Popover$1.PopperContentProps['align'];
+    /**
+     * Is the button inline
+     * @deprecated
+     */
+    anchorOrigin?: Origin;
+    /**
+     * Is the button inline
+     * * @deprecated
+     */
+    transformOrigin?: Origin;
+    /**
+     * Is the button inline
+     * * @deprecated
+     */
+    clickOutToClose?: boolean;
+    /**
+     * Is the button inline
+     * * @deprecated
+     */
+    autoCloseDuration?: number;
+}
+
+/**
+ * Popover need two slots popover-trigger and popover-content. By default on clicking the trigger the content will be displayed. The props can be used to change the position of the content, width of the component and the distance between the trigger and the content.
+ */
+declare const Popover: ({ children, trigger, arrow, hoverOutToClose, align, hoverToOpen, avoidCollisions, replaceTrigger, side: s, disabled, onClose, popoverContentProps, popoverRootProps, anchorOrigin, }: PopoverProps) => react__default.JSX.Element;
+
+declare const PopoverTrigger: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<Omit<Popover$1.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
+}, never>> & Omit<react.ForwardRefExoticComponent<Popover$1.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>, keyof react.Component<any, {}, any>>;
+declare const PopoverClose: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<Omit<Popover$1.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
+}, never>> & Omit<react.ForwardRefExoticComponent<Popover$1.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>, keyof react.Component<any, {}, any>>;
+
+export { type Origin, Popover, PopoverClose, type PopoverProps, PopoverTrigger };

package/lib/Popover.js

@@ -0,0 +1,8 @@
+export{P as Popover,a as PopoverClose,b as PopoverTrigger}from"./Popover-BU73-g73.js"
+;import"./styled-components.browser.esm-Bq2p-e5F.js";import"react"
+;import"./index-D8E8s0tV.js";import"./index-ByHJlnsx.js";import"react-dom"
+;import"./index-BnDw8kbT.js";import"./keyframes-PnzFl0I5.js"
+;import"./index-CeIB4COQ.js";import"./index-BdTXfGkV.js"
+;import"./index-COoRg_pp.js";import"./Combination-AmN1Cqrf.js"
+;import"./index-BxNZ3C71.js";import"./index-BrF1HKA1.js"
+;import"./index-BROhcSiX.js";import"./index-Dy5ztCxm.js";