@worldresources/wri-design-systems 2.0.0 → 2.117.0

package/dist/index.d.ts

@@ -1,6 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _chakra_ui_react from '@chakra-ui/react';
 import { ButtonProps as ButtonProps$1, Checkbox as Checkbox$1, RadioCardRootProps, RadioGroup as RadioGroup$1, Slider as Slider$1, Switch as Switch$1, SelectRootProps, SliderRootProps, TextareaProps as TextareaProps$1, InputProps, Tag as Tag$1, Accordion, Tabs } from '@chakra-ui/react';
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const designSystemStyles: _chakra_ui_react.SystemContext;
 
 type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     label?: string;
@@ -12,20 +16,20 @@ type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'ch
     rightIcon?: React$1.ReactNode;
 };
 
-declare const Button: ({ label, loading, variant, size, disabled, leftIcon, rightIcon, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ label, loading, variant, size, disabled, leftIcon, rightIcon, ...rest }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CloseButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
     disabled?: boolean;
 };
 
-declare const CloseButton: ({ disabled, ...rest }: CloseButtonProps) => react_jsx_runtime.JSX.Element;
+declare const CloseButton: ({ disabled, ...rest }: CloseButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type IconButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
     icon: React$1.ReactNode;
     disabled?: boolean;
 };
 
-declare const IconButton: ({ icon, disabled, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+declare const IconButton: ({ icon, disabled, ...rest }: IconButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type MultiActionButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     variant?: 'primary' | 'secondary';
@@ -40,7 +44,7 @@ type MultiActionButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPal
     disabled?: boolean;
 };
 
-declare const MultiActionButton: ({ variant, size, mainActionLabel, mainActionOnClick, otherActions, ...rest }: MultiActionButtonProps) => react_jsx_runtime.JSX.Element;
+declare const MultiActionButton: ({ variant, size, mainActionLabel, mainActionOnClick, otherActions, ...rest }: MultiActionButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CheckboxProps = Omit<Checkbox$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'icon' | 'iconColor' | 'iconSize' | 'spacing' | 'invalid'> & {
     name?: string;
@@ -54,7 +58,7 @@ type CheckboxProps = Omit<Checkbox$1.RootProps, 'size' | 'variant' | 'colorPalet
     }) => void;
 };
 
-declare const Checkbox: ({ name, value, checked, defaultChecked, disabled, indeterminate, onCheckedChange, children, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+declare const Checkbox: ({ name, value, checked, defaultChecked, disabled, indeterminate, onCheckedChange, children, ...rest }: CheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type OptionCardProps = {
     label: string;
@@ -72,7 +76,7 @@ type OptionCardGroupProps = Omit<RadioCardRootProps, 'colorPalette' | 'size' | '
     }) => void;
 };
 
-declare const OptionCard: ({ label, caption, icon, variant, disabled, children, value, }: OptionCardProps) => react_jsx_runtime.JSX.Element;
+declare const OptionCard: ({ label, caption, icon, variant, disabled, children, value, }: OptionCardProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const OptionCardGroup: ({ children, ...rest }: OptionCardGroupProps) => react_jsx_runtime.JSX.Element;
 
@@ -80,18 +84,21 @@ type RadioProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalett
     value: string;
     disabled?: boolean;
 };
-type RadioGroupProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'value' | 'onChange'> & {
+type RadioGroupProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'value' | 'onChange' | 'children'> & {
     name: string;
     defaultValue?: string;
     horizontal?: boolean;
     onChange?: (name: string, selectedValue: string) => void;
     customGap?: string;
+    children?: React.ReactNode;
 };
 
-declare const Radio: ({ children, value, disabled, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
+declare const Radio: ({ children, value, disabled, ...rest }: RadioProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const RadioGroup: ({ children, horizontal, name, defaultValue, onChange, customGap, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
 
+/** @jsxImportSource @emotion/react */
+
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<Slider$1.RootProps, "size" | "variant" | "colorPalette" | "label" | "defaultChecked" | "defaultValue" | "origin" | "thumbAlignment" | "thumbSize"> & {
     width?: string;
     min?: number;
@@ -120,7 +127,7 @@ type SwitchProps = Omit<Switch$1.RootProps, 'size' | 'variant' | 'colorPalette'
     isLabelOnLeft?: boolean;
 };
 
-declare const Switch: ({ name, defaultChecked, onChange, disabled, isLabelOnLeft, children, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const Switch: ({ name, defaultChecked, onChange, disabled, isLabelOnLeft, children, ...rest }: SwitchProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CheckboxListProps = {
     label: string;
@@ -135,7 +142,49 @@ type CheckboxListProps = {
     required?: boolean;
 };
 
-declare const CheckboxList: ({ label, caption, checkboxes, defaultValue, onCheckedChange, errorMessage, horizontal, required, }: CheckboxListProps) => react_jsx_runtime.JSX.Element;
+declare const CheckboxList: ({ label, caption, checkboxes, defaultValue, onCheckedChange, errorMessage, horizontal, required, }: CheckboxListProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type InputWithUnitsProps = {
+    label: string;
+    caption?: string;
+    errorMessage?: string;
+    units: {
+        label: string;
+        value: string;
+    }[];
+    unitsPosition?: 'start' | 'end';
+    defaultValue?: string;
+    defaultUnit?: string;
+    onChange?: (value: string) => void;
+    required?: boolean;
+    disabled?: boolean;
+};
+
+declare const InputWithUnits: ({ label, caption, errorMessage, units, unitsPosition, defaultUnit, defaultValue, onChange, required, disabled, }: InputWithUnitsProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type PasswordProps = {
+    label: string;
+    caption?: string;
+    required?: boolean;
+    onChange?: ({ strength, length, uppercase, lowercase, numbers, specialCharacters, }: {
+        strength: string;
+        length: boolean;
+        uppercase: boolean;
+        lowercase: boolean;
+        numbers: boolean;
+        specialCharacters: boolean;
+    }) => void;
+    disabledRules?: {
+        uppercase?: boolean;
+        lowercase?: boolean;
+        numbers?: boolean;
+        specialCharacters?: boolean;
+    };
+    minLength?: number;
+    hideValidations?: boolean;
+};
+
+declare const Password: ({ label, caption, required, disabledRules, onChange, minLength, hideValidations, }: PasswordProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type RadioListProps = {
     label: string;
@@ -149,7 +198,7 @@ type RadioListProps = {
     required?: boolean;
 };
 
-declare const RadioList: ({ label, caption, name, radios, defaultValue, onCheckedChange, errorMessage, horizontal, required, }: RadioListProps) => react_jsx_runtime.JSX.Element;
+declare const RadioList: ({ label, caption, name, radios, defaultValue, onCheckedChange, errorMessage, horizontal, required, }: RadioListProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectItemProps = {
     label: string;
@@ -170,7 +219,7 @@ type SelectProps = Omit<SelectRootProps, 'collection' | 'size' | 'colorPalette'
     multiple?: boolean;
 };
 
-declare const Select: ({ label, caption, placeholder, items, size, required, disabled, onChange, errorMessage, multiple, ...rest }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: ({ label, caption, placeholder, items, size, required, disabled, onChange, errorMessage, multiple, ...rest }: SelectProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ValueChangeDetails = {
     value: number[];
@@ -200,7 +249,7 @@ type SliderInputProps = {
     onChange?: (value: number[]) => void;
 };
 
-declare const SliderInput: ({ label, caption, size, sliderItem, required, onChange, }: SliderInputProps) => react_jsx_runtime.JSX.Element;
+declare const SliderInput: ({ label, caption, size, sliderItem, required, onChange, }: SliderInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
     label: string;
@@ -216,7 +265,7 @@ type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' |
     maxLength?: number;
 };
 
-declare const Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, minLength, maxLength, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
+declare const Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, minLength, maxLength, ...rest }: TextareaProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
     label?: string;
@@ -230,7 +279,7 @@ type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'de
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, ...rest }: TextInputProps) => react_jsx_runtime.JSX.Element;
+declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, ...rest }: TextInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     label: string;
@@ -242,7 +291,7 @@ type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'chi
     closable?: boolean;
 };
 
-declare const Tag: ({ label, size, variant, disabled, icon, onClose, closable, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
+declare const Tag: ({ label, size, variant, disabled, icon, onClose, closable, ...rest }: TagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type LayerItemProps = {
     name: string;
@@ -268,11 +317,11 @@ type LayerGroupProps = {
     onChangeForRadioVariant?: (name: string, checked: boolean, selectedValue?: string) => void;
 };
 
-declare const LayerGroup: ({ label, caption, value, layerItems, onChangeForRadioVariant, }: LayerGroupProps) => react_jsx_runtime.JSX.Element;
+declare const LayerGroup: ({ label, caption, value, layerItems, onChangeForRadioVariant, }: LayerGroupProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const LayerGroupContainer: ({ children, defaultValue, ...rest }: LayerGroupContainerProps) => react_jsx_runtime.JSX.Element;
+declare const LayerGroupContainer: ({ children, defaultValue, ...rest }: LayerGroupContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const LayerItem: ({ name, label, caption, showInfoButton, infoButtonLabel, variant, disabled, onInfoClick, isDefaultSelected, onChange, }: LayerItemProps) => react_jsx_runtime.JSX.Element;
+declare const LayerItem: ({ name, label, caption, showInfoButton, infoButtonLabel, variant, disabled, onInfoClick, isDefaultSelected, onChange, }: LayerItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TabBarItemProps = Omit<Tabs.TriggerProps, 'asChild'> & {
     label: string;
@@ -297,7 +346,7 @@ type LayerPanelProps = {
     children: React.ReactNode;
 };
 
-declare const LayerPanel: ({ title, description, tabBarVariant, buttonTabs, defaultValue, onTabClick, children, }: LayerPanelProps) => react_jsx_runtime.JSX.Element;
+declare const LayerPanel: ({ title, description, tabBarVariant, buttonTabs, defaultValue, onTabClick, children, }: LayerPanelProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type LayerParametersProps = {
     label: string;
@@ -305,7 +354,7 @@ type LayerParametersProps = {
     openedByDefault?: boolean;
 };
 
-declare const LayerParameters: ({ label, children, openedByDefault, }: LayerParametersProps) => react_jsx_runtime.JSX.Element;
+declare const LayerParameters: ({ label, children, openedByDefault, }: LayerParametersProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type LegendItemProps = {
     layerName: string;
@@ -319,7 +368,7 @@ type LegendItemProps = {
     onOpacityChanged: (value: number) => void;
 };
 
-declare const LegendItem: ({ layerName, dataUnit, onDrag, onUpClick, onDownClick, onRemoveClick, children, onInfoClick, onOpacityChanged, }: LegendItemProps) => react_jsx_runtime.JSX.Element;
+declare const LegendItem: ({ layerName, dataUnit, onDrag, onUpClick, onDownClick, onRemoveClick, children, onInfoClick, onOpacityChanged, }: LegendItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type LegendPanelProps = {
     legendContent: React$1.ReactElement[];
@@ -327,7 +376,7 @@ type LegendPanelProps = {
     onTabClick?: (tabValue: string) => void;
 };
 
-declare const LegendPanel: ({ legendContent, analysisContent, onTabClick, }: LegendPanelProps) => react_jsx_runtime.JSX.Element;
+declare const LegendPanel: ({ legendContent, analysisContent, onTabClick, }: LegendPanelProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type QualitativeAttributeProps = {
     type: 'raster' | 'line' | 'point';
@@ -339,7 +388,7 @@ type QualitativeAttributeProps = {
     pointIcon?: React.ReactNode;
 };
 
-declare const QualitativeAttribute: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, }: QualitativeAttributeProps) => react_jsx_runtime.JSX.Element;
+declare const QualitativeAttribute: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, }: QualitativeAttributeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ScaleBarProps = {
     colors: string[];
@@ -348,7 +397,30 @@ type ScaleBarProps = {
     isGradient?: boolean;
 };
 
-declare const ScaleBar: ({ colors, values, subLabels, isGradient }: ScaleBarProps) => react_jsx_runtime.JSX.Element;
+declare const ScaleBar: ({ colors, values, subLabels, isGradient }: ScaleBarProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type BreadcrumbProps = {
+    links: {
+        label: string;
+        link: string;
+        icon?: React.ReactNode;
+    }[];
+    separator?: React.ReactNode;
+    maxItems?: number;
+    linkRouter: any;
+};
+
+declare const Breadcrumb: ({ links, separator, maxItems, linkRouter, }: BreadcrumbProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type FooterProps = {
+    children: React.ReactNode;
+    label?: string;
+    fixed?: boolean;
+    filled?: boolean;
+    maxWidth?: number;
+};
+
+declare const Footer: ({ children, label, fixed, filled, maxWidth, }: FooterProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type NavigationRailTabProps = Omit<Tabs.TriggerProps, 'asChild'> & {
     label: string;
@@ -362,11 +434,19 @@ type NavigationRailProps = {
     onTabClick?: (selectedValue: string) => void;
     children?: React.ReactNode;
     onOpenChange?: (open: boolean) => void;
+    customHeight?: string;
 };
 
-declare const NavigationRail: ({ tabs, defaultValue, onTabClick, children, onOpenChange, }: NavigationRailProps) => react_jsx_runtime.JSX.Element;
+declare const NavigationRail: ({ tabs, defaultValue, onTabClick, children, onOpenChange, customHeight, }: NavigationRailProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const TabBar: ({ variant, defaultValue, tabs, onTabClick, }: TabBarProps) => react_jsx_runtime.JSX.Element;
+declare const TabBar: ({ variant, defaultValue, tabs, onTabClick, }: TabBarProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type BadgeProps = {
+    hasNotification?: boolean;
+    notificationCount?: number;
+};
+
+declare const Badge: ({ hasNotification, notificationCount }: BadgeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type InlineMessageProps = {
     label: string;
@@ -379,7 +459,11 @@ type InlineMessageProps = {
     isButtonRight?: boolean;
 };
 
-declare const InlineMessage: ({ label, caption, variant, size, icon, onActionClick, actionLabel, isButtonRight, }: InlineMessageProps) => react_jsx_runtime.JSX.Element;
+declare const InlineMessage: ({ label, caption, variant, size, icon, onActionClick, actionLabel, isButtonRight, }: InlineMessageProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+/** @jsxImportSource @emotion/react */
+
+declare const Toast: React$1.FC;
 
 type ToastProps = {
     label: string;
@@ -397,6 +481,5 @@ type ToastProps = {
 };
 
 declare const showToast: (props: ToastProps) => void;
-declare const Toast: () => react_jsx_runtime.JSX.Element[];
 
-export { Button, Checkbox, CheckboxList, CloseButton, IconButton, InlineMessage, LayerGroup, LayerGroupContainer, LayerItem, LayerPanel, LayerParameters, LegendItem, LegendPanel, MultiActionButton, NavigationRail, OptionCard, OptionCardGroup, QualitativeAttribute, Radio, RadioGroup, RadioList, ScaleBar, Select, Slider, SliderInput, Switch, TabBar, Tag, TextInput, Textarea, Toast, showToast };
+export { Badge, Breadcrumb, Button, Checkbox, CheckboxList, CloseButton, Footer, IconButton, InlineMessage, InputWithUnits, LayerGroup, LayerGroupContainer, LayerItem, LayerPanel, LayerParameters, LegendItem, LegendPanel, MultiActionButton, NavigationRail, OptionCard, OptionCardGroup, Password, QualitativeAttribute, Radio, RadioGroup, RadioList, ScaleBar, Select, Slider, SliderInput, Switch, TabBar, Tag, TextInput, Textarea, Toast, designSystemStyles, showToast };