design-system-silkhaus 3.1.3 → 3.2.0-beta.dropdown.1

package/dist/app/index.d.ts

@@ -1,5 +1,9 @@
 import { default as default_2 } from 'react';
+import { FC } from 'react';
 import { HTMLAttributes } from 'react';
+import { Placement } from '@floating-ui/react';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 
 export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
 
@@ -63,4 +67,83 @@ export declare interface ButtonsGroupSelectorProps extends HTMLAttributes<HTMLDi
     buttonClassName?: string;
 }
 
+export declare const DesktopDropdown: FC<PropsWithChildren<DropdownProps>>;
+
+/**
+ * A dropdown component to be used in webapps that display a list of options.
+ * It will display a default dropdown by default. You can pass the trigger element as a prop if you want customized trigger
+ */
+export declare const Dropdown: FC<PropsWithChildren<DropdownProps>>;
+
+export declare type DropdownOption = {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    thumbnailUrl?: string;
+    disabled?: boolean;
+};
+
+export declare interface DropdownProps {
+    /**
+     * The options of the dropdown
+     */
+    options: DropdownOption[];
+    /**
+     * The value of selected dropdown option
+     */
+    value?: string | string[];
+    /**
+     * The placeholder text for the dropdown, when no value is selected
+     */
+    placeholder?: string;
+    /**
+     * Callback when dropdown value is changed
+     */
+    onChange?: (selectedOption: DropdownOption) => void;
+    /**
+     * Pass this callback function if you want to override the default selected value display text.
+     * By default the dropdown will display the label from the selected option
+     */
+    getSelectedValueDisplayText?: (selectedOption: DropdownOption | DropdownOption[]) => string;
+    /**
+     * Callback when dropdown is opened or closed
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * The element that triggers the dropdown.
+     * This parameter is optional. By default it is a button with selected option label and chevron icon.
+     */
+    trigger?: ReactNode;
+    /**
+     * The direction in which the dropdown will open
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
+    /**
+     * The trigger of the dropdown is wrapped in a container. This classname is added to that container
+     */
+    triggerContainerClassName?: string;
+    /**
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Adjust the height of the dropdown popover to fit the content in viewport
+     */
+    adjustHeight?: boolean | number;
+    /**
+     * Adjust the width of the dropdown popover to fit the content in viewport
+     */
+    adjustWidth?: boolean;
+    /**
+     * Indicates if the dropdown is multi-select
+     * @default false
+     */
+    isMultiSelect?: boolean;
+}
+
+export declare const findOptionByValue: (value: string | string[] | undefined, options: DropdownOption[]) => DropdownOption | DropdownOption[] | undefined;
+
+export declare const MobileDropdown: FC<PropsWithChildren<DropdownProps>>;
+
 export { }

package/dist/app/index.js

@@ -1 +1 @@
-"use strict";var z=Object.defineProperty,P=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var N=(e,s,t)=>s in e?z(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,y=(e,s)=>{for(var t in s||(s={}))B.call(s,t)&&N(e,t,s[t]);if(b)for(var t of b(s))C.call(s,t)&&N(e,t,s[t]);return e},F=(e,s)=>P(e,G(s));var R=(e,s)=>{var t={};for(var r in e)B.call(e,r)&&s.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&b)for(var r of b(e))s.indexOf(r)<0&&C.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../utils-k1RektY7.cjs"),x=require("react"),D=({children:e,size:s="small"})=>d.jsxRuntimeExports.jsx("div",{className:`ds-flex ds-items-center ds-justify-center ${s==="small"?"ds-h-5 ds-w-5":"ds-h-6 ds-w-6"}`,children:e}),$={primary:"ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-rounded-sm hover:ds-text-Text-textPrimaryDark hover:ds-bg-Background-accentEggplant-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentEggplant-darkened focus:ds-bg-Background-accentEggplant-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentEggplant-20 ds-text-mediumFootnoteEmphasized",secondary:"ds-text-black ds-rounded-sm ds-border ds-border-Fills-terciary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-terciary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"},q={primary:"ds-rounded-sm ds-border ds-text-black ds-border-Fills-terciary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized",secondary:"ds-rounded-sm ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"},_=x.forwardRef((h,E)=>{var c=h,{color:e="primary",disabled:s=!1,className:t,children:r,startIcon:o,selected:m,endIcon:i,trackingId:p,helperText:u,helpterTextClassName:j,buttonClassName:f}=c,g=R(c,["color","disabled","className","children","startIcon","selected","endIcon","trackingId","helperText","helpterTextClassName","buttonClassName"]);return d.jsxRuntimeExports.jsxs("div",{className:d.cn("ds-flex ds-flex-col ds-gap-1",t),children:[d.jsxRuntimeExports.jsxs("button",F(y({"data-tracking-id":p,ref:E,disabled:s,className:d.twMerge(d.clsx({[q[e]]:m,[$[e]]:!m},"ds-px-2 ds-py-1","ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",f))},g),{children:[o&&d.jsxRuntimeExports.jsx(D,{children:o}),r&&d.jsxRuntimeExports.jsx("div",{className:`${o?"ds-ml-1":""} ${i?"ds-mr-1":""}`,children:r}),i&&d.jsxRuntimeExports.jsx(D,{children:i})]})),u&&d.jsxRuntimeExports.jsx("div",{className:d.cn("ds-w-full ds-text-right ds-text-mediumFootnoteRegular",j),children:u})]})});_.displayName="Button";const I=x.forwardRef((e,s)=>{const S=e,{value:t,options:r,onSelectionChange:o=()=>{},isMultiSelect:m,noDataError:i,buttonMinWidth:p,buttonWidth:u,minSelectionError:j,buttonsContainerClassName:f,buttonClassName:g}=S,E=R(S,["value","options","onSelectionChange","isMultiSelect","noDataError","buttonMinWidth","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[h,c]=x.useState([]),[w,v]=x.useState("");x.useEffect(()=>{t&&t.length?c(t):c([])},[t]);const T=(a,l)=>{l.currentTarget.blur();const n=[...h],k=n.findIndex(W=>W.value===a.value);k!==-1?n.length>1?(n.splice(k,1),v("")):v(j):(n.push(a),v("")),c(n),o(n)},M=(a,l)=>{l.currentTarget.blur();const n=[a];c(n),o(n)};return d.jsxRuntimeExports.jsxs("div",F(y({ref:s},E),{children:[d.jsxRuntimeExports.jsx("div",{className:d.cn("ds-flex ds-flex-wrap ds-gap-2",f),children:r.length>0?r.map(a=>d.jsxRuntimeExports.jsx(x.Fragment,{children:m?d.jsxRuntimeExports.jsx(_,{selected:h.some(l=>l.value===a.value),onClick:l=>T(a,l),color:"secondary",style:{minWidth:p,width:u},className:g,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label}):d.jsxRuntimeExports.jsx(_,{selected:h.some(l=>l.value===a.value),onClick:l=>M(a,l),color:"secondary",style:{minWidth:p,width:u},className:g,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label})},a.value)):d.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:i})}),w&&d.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:w})]}))});I.displayName="ButtonsGroupSelector";exports.Button=_;exports.ButtonsGroupSelector=I;
+"use strict";var Y=Object.defineProperty,Z=Object.defineProperties;var O=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var W=(e,t,d)=>t in e?Y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:d}):e[t]=d,w=(e,t)=>{for(var d in t||(t={}))P.call(t,d)&&W(e,d,t[d]);if(z)for(var d of z(t))T.call(t,d)&&W(e,d,t[d]);return e},F=(e,t)=>Z(e,O(t));var A=(e,t)=>{var d={};for(var r in e)P.call(e,r)&&t.indexOf(r)<0&&(d[r]=e[r]);if(e!=null&&z)for(var r of z(e))t.indexOf(r)<0&&T.call(e,r)&&(d[r]=e[r]);return d};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../Checkbox-D0PLHW4-.cjs"),f=require("react"),U=({children:e,size:t="small"})=>s.jsxRuntimeExports.jsx("div",{className:`ds-flex ds-items-center ds-justify-center ${t==="small"?"ds-h-5 ds-w-5":"ds-h-6 ds-w-6"}`,children:e}),ss={primary:"ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-rounded-sm hover:ds-text-Text-textPrimaryDark hover:ds-bg-Background-accentEggplant-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentEggplant-darkened focus:ds-bg-Background-accentEggplant-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentEggplant-20 ds-text-mediumFootnoteEmphasized",secondary:"ds-text-black ds-rounded-sm ds-border ds-border-Fills-terciary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-terciary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"},es={primary:"ds-rounded-sm ds-border ds-text-black ds-border-Fills-terciary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized",secondary:"ds-rounded-sm ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"},D=f.forwardRef((E,y)=>{var l=E,{color:e="primary",disabled:t=!1,className:d,children:r,startIcon:n,selected:p,endIcon:x,trackingId:i,helperText:j,helpterTextClassName:R,buttonClassName:h}=l,c=A(l,["color","disabled","className","children","startIcon","selected","endIcon","trackingId","helperText","helpterTextClassName","buttonClassName"]);return s.jsxRuntimeExports.jsxs("div",{className:s.cn("ds-flex ds-flex-col ds-gap-1",d),children:[s.jsxRuntimeExports.jsxs("button",F(w({"data-tracking-id":i,ref:y,disabled:t,className:s.twMerge(s.clsx({[es[e]]:p,[ss[e]]:!p},"ds-px-2 ds-py-1","ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",h))},c),{children:[n&&s.jsxRuntimeExports.jsx(U,{children:n}),r&&s.jsxRuntimeExports.jsx("div",{className:`${n?"ds-ml-1":""} ${x?"ds-mr-1":""}`,children:r}),x&&s.jsxRuntimeExports.jsx(U,{children:x})]})),j&&s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-w-full ds-text-right ds-text-mediumFootnoteRegular",R),children:j})]})});D.displayName="Button";const $=f.forwardRef((e,t)=>{const C=e,{value:d,options:r,onSelectionChange:n=()=>{},isMultiSelect:p,noDataError:x,buttonMinWidth:i,buttonWidth:j,minSelectionError:R,buttonsContainerClassName:h,buttonClassName:c}=C,y=A(C,["value","options","onSelectionChange","isMultiSelect","noDataError","buttonMinWidth","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[E,l]=f.useState([]),[b,u]=f.useState("");f.useEffect(()=>{d&&d.length?l(d):l([])},[d]);const g=(a,o)=>{o.currentTarget.blur();const m=[...E],B=m.findIndex(I=>I.value===a.value);B!==-1?m.length>1?(m.splice(B,1),u("")):u(R):(m.push(a),u("")),l(m),n(m)},k=(a,o)=>{o.currentTarget.blur();const m=[a];l(m),n(m)};return s.jsxRuntimeExports.jsxs("div",F(w({ref:t},y),{children:[s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-flex ds-flex-wrap ds-gap-2",h),children:r.length>0?r.map(a=>s.jsxRuntimeExports.jsx(f.Fragment,{children:p?s.jsxRuntimeExports.jsx(D,{selected:E.some(o=>o.value===a.value),onClick:o=>g(a,o),color:"secondary",style:{minWidth:i,width:j},className:c,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label}):s.jsxRuntimeExports.jsx(D,{selected:E.some(o=>o.value===a.value),onClick:o=>k(a,o),color:"secondary",style:{minWidth:i,width:j},className:c,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label})},a.value)):s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:x})}),b&&s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:b})]}))});$.displayName="ButtonsGroupSelector";const G=e=>window.innerWidth<s.tabletMinWidth?s.jsxRuntimeExports.jsx(V,w({},e)):s.jsxRuntimeExports.jsx(M,w({},e));G.displayName="Dropdown";const M=({placement:e="bottom-start",trigger:t,triggerContainerClassName:d,disabled:r,onOpenChange:n,adjustHeight:p,adjustWidth:x,options:i,getSelectedValueDisplayText:j=K,placeholder:R,value:h,isMultiSelect:c})=>{const[y,E]=f.useState(),l=typeof h=="undefined"?y:h,b=typeof h=="undefined"?E:()=>{},[u,g]=f.useState(!1),{refs:k,floatingStyles:C,context:a}=s.useFloating({open:u,onOpenChange:v=>{g(v),n&&n(v)},middleware:[s.offset(8),s.flip({crossAxis:e.includes("-"),fallbackAxisSideDirection:"end"}),s.shift({padding:4}),s.size({apply({availableWidth:v,availableHeight:N,elements:_}){p&&(_.floating.style.maxHeight=`${N-4}px`),x&&(_.floating.style.maxWidth=`${v-4}px`)}})],whileElementsMounted:s.autoUpdate,placement:e}),o=s.useClick(a),m=s.useFocus(a),B=s.useDismiss(a),I=s.useRole(a),{getReferenceProps:L,getFloatingProps:Q}=s.useInteractions([o,m,B,I]);return t||(t=s.jsxRuntimeExports.jsx(H,{selectedOption:S(l,i),getSelectedValueDisplayText:j,placeholder:R})),r?s.jsxRuntimeExports.jsx("div",{className:d,children:t}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",F(w({className:s.cn("ds-cursor-pointer",d),ref:k.setReference},L()),{children:t})),u&&s.jsxRuntimeExports.jsx(s.FloatingPortal,{children:s.jsxRuntimeExports.jsx("div",F(w({ref:k.setFloating,style:C},Q()),{className:s.cn("ds-z-[29999] ds-flex ds-min-w-[200px] ds-flex-col ds-gap-1 ds-rounded ds-bg-white ds-p-2 ds-shadow-md"),children:s.jsxRuntimeExports.jsx(J,{isMultiSelect:c,options:i,onOptionClick:v=>{let N;if(c){const _=l||[];_.includes(v.value)?N=_.filter(X=>X!==v.value):N=[..._,v.value]}else N=v.value,g(!1);b(N)},selectedOption:S(l,i)})}))})]})};M.displayName="DesktopDropdown";const V=({trigger:e,triggerContainerClassName:t,disabled:d,onOpenChange:r,getSelectedValueDisplayText:n=K,placeholder:p,value:x,options:i,isMultiSelect:j})=>{const[R,h]=f.useState(),c=typeof x=="undefined"?R:x,y=typeof x=="undefined"?h:()=>{},[E,l]=f.useState(!1);return e||(e=s.jsxRuntimeExports.jsx(H,{selectedOption:S(c,i),getSelectedValueDisplayText:n,placeholder:p})),d?s.jsxRuntimeExports.jsx("div",{className:t,children:e}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",{className:t,onClick:()=>{l(!0),r&&r(!0)},children:e}),s.jsxRuntimeExports.jsx(s.AnimatedModal,{animation:"slideUp",show:E,handleClose:()=>{l(!1),r&&r(!1)},contentClassName:s.cn("ds-absolute ds-mb-0 ds-w-full"),className:"ds-z-[29999]",children:s.jsxRuntimeExports.jsx(q,{onClose:()=>{l(!1),r&&r(!1)},children:s.jsxRuntimeExports.jsx(J,{isMultiSelect:j,options:i,onOptionClick:b=>{let u;if(j){const g=c||[];g.includes(b.value)?u=g.filter(k=>k!==b.value):u=[...g,b.value]}else u=b.value,l(!1);y(u)},selectedOption:S(c,i)})})})]})};V.displayName="MobileDropdown";const q=({onClose:e,children:t})=>s.jsxRuntimeExports.jsxs("div",{className:"ds-mb-0 ds-flex ds-max-h-dvh ds-w-full ds-flex-col ds-bg-white",children:[s.jsxRuntimeExports.jsxs("div",{className:"ds-flex ds-shrink-0 ds-items-center ds-justify-between ds-px-8 ds-py-4",children:[s.jsxRuntimeExports.jsx("div",{onClick:e,className:"ds-flex ds-size-5 ds-cursor-pointer ds-items-center ds-justify-center",children:s.jsxRuntimeExports.jsx(s.CloseIcon,{className:"ds-size-4"})}),s.jsxRuntimeExports.jsx("div",{className:"ds-size-5"})]}),s.jsxRuntimeExports.jsx("div",{className:"ds-grow ds-overflow-y-auto ds-p-4 ds-text-xSmallCalloutRegular",children:t}),s.jsxRuntimeExports.jsx("div",{className:"ds-px-8 ds-py-4",children:s.jsxRuntimeExports.jsx(s.Button,{onClick:e,children:"Close"})})]});q.displayName="MobilePopoverContentWrapper";const H=({selectedOption:e,getSelectedValueDisplayText:t,placeholder:d})=>{const r=!e||Array.isArray(e)&&e.length===0?d||"":t(e);return s.jsxRuntimeExports.jsx(D,{color:"secondary",endIcon:s.jsxRuntimeExports.jsx(s.ChevronDownRegularIcon,{className:"ds-size-4"}),buttonClassName:"ds-justify-between",children:r})},J=({options:e,onOptionClick:t,isMultiSelect:d,selectedOption:r})=>e&&e.map(n=>s.jsxRuntimeExports.jsx(ts,{onClick:()=>t(n),option:n,isSelected:Array.isArray(r)?r.some(p=>p.value===n.value):(r==null?void 0:r.value)===n.value,showCheckbox:d},n.value)),ts=({onClick:e,option:t,isSelected:d,showCheckbox:r})=>s.jsxRuntimeExports.jsxs("div",{onClick:t.disabled?void 0:e,className:s.cn("ds-flex ds-min-h-[72px] ds-transform ds-cursor-pointer ds-items-center ds-gap-4 ds-rounded ds-px-4 ds-py-2 ds-text-smallFootnoteEmphasized hover:ds-bg-[#F6F8FC] ds-tablet:ds-gap-2 ds-tablet:ds-px-2 ds-desktop:ds-text-mediumFootnoteEmphasized",!r&&"ds-transform ds-transition-all ds-duration-300 hover:ds-px-4"),children:[t.thumbnailUrl&&s.jsxRuntimeExports.jsx("img",{src:t.thumbnailUrl,className:"ds-h-14 ds-w-14 ds-shrink-0 ds-rounded ds-object-cover ds-tablet:ds-h-6 ds-tablet:ds-w-9 ds-tablet:ds-rounded-sm"}),t.icon,s.jsxRuntimeExports.jsx("div",{className:"ds-flex-grow",children:t.label}),d&&!r&&s.jsxRuntimeExports.jsx(s.CheckmarkIcon,{className:"ds-size-4 ds-shrink-0"}),r&&s.jsxRuntimeExports.jsx(s.Checkbox,{isChecked:d,disabled:t.disabled})]}),S=(e,t)=>Array.isArray(e)?t.filter(d=>e.includes(d.value)):t.find(d=>d.value===e),K=e=>Array.isArray(e)?e.map(t=>t.label).join(", "):e.label;exports.Button=D;exports.ButtonsGroupSelector=$;exports.DesktopDropdown=M;exports.Dropdown=G;exports.MobileDropdown=V;exports.findOptionByValue=S;

package/dist/index.d.ts

@@ -85,15 +85,13 @@ export declare const AnimatedModal: ForwardRefExoticComponent<AnimatedModalProps
 export declare interface AnimatedModalProps extends HTMLAttributes<HTMLDivElement> {
     show?: boolean;
     handleClose?: () => void;
-    animation?: 'slideUp' | 'slideDown' | 'fadeIn';
+    animation?: 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'fadeIn';
     /**
-     * @deprecated
-     * Apply styles using `contentClassName` instead
+     * @deprecated Apply styles using `contentClassName` instead
      */
     marginTop?: string;
     /**
-     * @deprecated
-     * Apply styles using `contentClassName` instead
+     * @deprecated Apply styles using `contentClassName` instead
      */
     maxWidth?: string;
     /**
@@ -270,10 +268,11 @@ export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps
 
 export declare interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
     isChecked: boolean;
-    onSelectionChange: () => void;
-    label: string;
+    onSelectionChange?: () => void;
+    label?: string;
     onClick?: (e: default_2.MouseEvent) => void;
     disabled?: boolean;
+    className?: string;
 }
 
 export declare const CheckmarkCircleIcon: FC<{
@@ -284,6 +283,10 @@ export declare const CheckmarkIcon: FC<{
     className?: string;
 }>;
 
+export declare const ChevronDownRegularIcon: FC<{
+    className?: string;
+}>;
+
 export declare const ChevronLeftRegularIcon: FC<{
     className?: string;
 }>;
@@ -523,6 +526,10 @@ export declare interface HelperTextProps {
     className?: string;
 }
 
+export declare const HouseOutlineIcon: FC<{
+    className?: string;
+}>;
+
 export declare const HouseRegularIcon: FC<{
     className?: string;
 }>;
@@ -610,6 +617,14 @@ export declare type LabelProps = {
     disabled?: boolean;
 };
 
+export declare const LineGraphDownIcon: FC<{
+    className?: string;
+}>;
+
+export declare const LineGraphUpIcon: FC<{
+    className?: string;
+}>;
+
 export declare const ListingCard: default_2.ForwardRefExoticComponent<ListingCardProps & default_2.RefAttributes<HTMLDivElement>>;
 
 export declare type ListingCardProps = {
@@ -1326,7 +1341,7 @@ export declare interface TooltipProps {
      */
     contentContainerClassname?: string;
     /**
-     * When set true, tootlip will not be shown
+     * When set true, tooltip will not be shown
      * @default false
      */
     disabled?: boolean;