glints-aries 4.0.140 → 4.0.144

package/es/Display/Slider/Slider.d.ts

@@ -8,11 +8,11 @@ export interface Props {
     className?: string;
     /** The index of the page that will be shown initally (before the first manual- or auto-scroll). Note that the index starts at 1. */
     initialItem?: number;
-    /** If <code>true</code>, the dot controls will be superimposed on the current page */
+    /** If true, the dot controls will be superimposed on the current page */
     fullContent?: boolean;
-    /** If <code>true</code>, the arrow controls will have a white color */
+    /** If true, the arrow controls will have a white color */
     arrowWhite?: boolean;
-    /** If <code>true</code>, dot controls will be removed */
+    /** If true, dot controls will be removed */
     removeDots?: boolean;
     /** Sets the left icon. Receives the "disabled" flag as an argument. */
     renderLeftIcon?: (disabled: boolean) => React.ReactElement;
@@ -20,7 +20,7 @@ export interface Props {
     renderRightIcon?: (disabled: boolean) => React.ReactElement;
     /** Called with the new index after a new Slider page has been shown */
     afterChange?: Function;
-    /** If <code>true</code>, the Slider will flip through its pages at a regular interval */
+    /** If true, the Slider will flip through its pages at a regular interval */
     autoplay?: boolean;
     containerRef?: React.RefObject<HTMLDivElement>;
 }

package/es/Display/Swipeable/Swipeable.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import SwipeableItem from './SwipeableItem';
-/** You can add any number of <code> <Swipeable.Item /> </code> components as children of the Swipeable component, controlling the behavior of an individual swipeable item.  */
+/** You can add any number of  <Swipeable.Item />  components as children of the Swipeable component, controlling the behavior of an individual swipeable item.  */
 export declare const Swipeable: Swipeable;
 declare type Swipeable = React.FunctionComponent<Props> & {
     Item: typeof SwipeableItem;

package/es/Display/Swipeable/Swipeable.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { SwipeableContainer } from './SwipeableStyle';
 import SwipeableItem from './SwipeableItem';
-/** You can add any number of <code> <Swipeable.Item /> </code> components as children of the Swipeable component, controlling the behavior of an individual swipeable item.  */
+/** You can add any number of  <Swipeable.Item />  components as children of the Swipeable component, controlling the behavior of an individual swipeable item.  */
 
 export var Swipeable = function Swipeable(_ref) {
   var children = _ref.children,

package/es/Display/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, FC } from 'react';
+import React, { HTMLAttributes, FC } from 'react';
 export declare const Tooltip: FC<Props>;
 export interface Classes {
     container?: string;
@@ -6,12 +6,17 @@ export interface Classes {
     message?: string;
 }
 export declare type Position = 'top' | 'right' | 'bottom' | 'left';
-export interface Props extends HTMLAttributes<HTMLHeadingElement> {
-    /** This is an object with three keys: <code>container</code>,
-     * <code>content</code> and <code>message</code>. Use them to attach
-     * additional classes to the respective elements. */
+interface BaseProps extends HTMLAttributes<HTMLHeadingElement> {
     classes?: Classes;
-    text: string;
     position?: Position;
 }
+export interface StringTooltip extends BaseProps {
+    text: string;
+    textAsString?: string;
+}
+export interface HtmlTooltip extends BaseProps {
+    text: React.ReactNode;
+    textAsString: string;
+}
+export declare type Props = StringTooltip | HtmlTooltip;
 export default Tooltip;

package/es/Display/Tooltip/Tooltip.js

@@ -8,9 +8,10 @@ export var Tooltip = function Tooltip(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       children = _ref.children,
       text = _ref.text,
+      textAsString = _ref.textAsString,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'top' : _ref$position,
-      defaultProps = _objectWithoutPropertiesLoose(_ref, ["classes", "children", "text", "position"]);
+      defaultProps = _objectWithoutPropertiesLoose(_ref, ["classes", "children", "text", "textAsString", "position"]);
 
   var contentRef = useRef(null);
 
@@ -42,11 +43,12 @@ export var Tooltip = function Tooltip(_ref) {
     }
   };
 
+  var arialLabel = typeof text === 'string' ? text : textAsString;
   return /*#__PURE__*/React.createElement(TooltipContainer, _extends({
     className: classNames('aries-tooltip', classes.container),
     role: "tooltip",
     "aria-hidden": isShow ? 'false' : 'true',
-    "aria-label": text // The tooltip does not close on iOS devices because of this issue https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
+    "aria-label": arialLabel // The tooltip does not close on iOS devices because of this issue https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
     // Adding onTouchStart and onTouchEnd as a workaround
     // On mobile, it shows the tooltip on touch and hides the tooltip when the touch is released
     ,
@@ -57,6 +59,7 @@ export var Tooltip = function Tooltip(_ref) {
     ref: contentRef,
     className: classNames('aries-tooltip-content', classes.content),
     text: text,
+    textAsString: textAsString,
     position: position
   }, /*#__PURE__*/React.createElement(TooltipMessage, {
     className: classNames('aries-tooltip-message', classes.message)

package/es/Display/Tooltip/Tooltip.stories.d.ts

@@ -3,3 +3,4 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const DifferentPosition: any;
+export declare const WithHtmlContent: any;

package/es/Display/Tooltip/Tooltip.stories.js

@@ -18,7 +18,7 @@ export default {
   }]
 };
 
-var Template = function Template(_ref) {
+var StringTooltipTemplate = function StringTooltipTemplate(_ref) {
   var text = _ref.text,
       args = _objectWithoutPropertiesLoose(_ref, ["text"]);
 
@@ -27,12 +27,26 @@ var Template = function Template(_ref) {
   }), /*#__PURE__*/React.createElement(Tag, null, "Glints Aries"));
 };
 
-export var Interactive = Template.bind({});
+var HtmlTooltipTemplate = function HtmlTooltipTemplate(_ref2) {
+  var text = _ref2.text,
+      args = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, args, {
+    text: text || defaultText
+  }), /*#__PURE__*/React.createElement(Tag, null, "Glints Aries"));
+};
+
+export var Interactive = StringTooltipTemplate.bind({});
 Interactive.args = {
   text: defaultText,
   position: 'top'
 };
-export var DifferentPosition = Template.bind({});
+export var DifferentPosition = StringTooltipTemplate.bind({});
 DifferentPosition.args = {
   position: 'left'
+};
+export var WithHtmlContent = HtmlTooltipTemplate.bind({});
+WithHtmlContent.args = {
+  text: /*#__PURE__*/React.createElement("b", null, "Hello World"),
+  textAsString: 'Hello World'
 };

package/es/General/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import { FC, HTMLAttributes } from 'react';
 /**
- * Use <code>className</code> or <code>style</code> to change the divider's
+ * Use className or style to change the divider's
  * height
  */
 export declare const Divider: FC<Props>;

package/es/General/Divider/Divider.js

@@ -4,7 +4,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { DividerContainer } from './DividerStyle';
 /**
- * Use <code>className</code> or <code>style</code> to change the divider's
+ * Use className or style to change the divider's
  * height
  */
 

package/es/General/Icon/components/StarCircleIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Props } from '../Icon';
+declare const StarCircleIcon: (props: Partial<Props>) => JSX.Element;
+export default StarCircleIcon;

package/es/General/Icon/components/StarCircleIcon.js

@@ -0,0 +1,31 @@
+// GENERATE BY ./src/General/Icon/generateIcons.js
+// DO NOT EDIT IT MANUALLY
+import * as React from 'react';
+import Icon from '../Icon';
+
+var StarCircleIcon = function StarCircleIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("g", {
+    transform: "scale(5)"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    r: "10.5",
+    fill: "#FFFFFFE6"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    r: "7.5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.6272 8.82618L10.5174 6.0625L9.39618 8.8261L6.5625 9.06981L8.74292 10.9834L8.03427 13.9375L10.5114 12.3705L12.924 13.9151L12.3003 10.9865L14.4375 9.06683L11.6272 8.82618Z",
+    fill: "#098BBD"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.1272 8.82618L10.0174 6.0625L8.89618 8.8261L6.0625 9.06981L8.24292 10.9834L7.53427 13.9375L10.0114 12.3705L12.424 13.9151L11.8003 10.9865L13.9375 9.06683L11.1272 8.82618Z",
+    fill: "white"
+  })));
+};
+
+export default StarCircleIcon;

package/es/General/Icon/components/index.d.ts

@@ -140,6 +140,7 @@ export { default as SpeechBubbleOutlineIcon } from './SpeechBubbleOutlineIcon';
 export { default as SpinnerIcon } from './SpinnerIcon';
 export { default as StackIcon } from './StackIcon';
 export { default as StarOutlineIcon } from './StarOutlineIcon';
+export { default as StarCircleIcon } from './StarCircleIcon';
 export { default as StarIcon } from './StarIcon';
 export { default as TagIcon } from './TagIcon';
 export { default as TaskIcon } from './TaskIcon';

package/es/General/Icon/components/index.js

@@ -140,6 +140,7 @@ export { default as SpeechBubbleOutlineIcon } from './SpeechBubbleOutlineIcon';
 export { default as SpinnerIcon } from './SpinnerIcon';
 export { default as StackIcon } from './StackIcon';
 export { default as StarOutlineIcon } from './StarOutlineIcon';
+export { default as StarCircleIcon } from './StarCircleIcon';
 export { default as StarIcon } from './StarIcon';
 export { default as TagIcon } from './TagIcon';
 export { default as TaskIcon } from './TaskIcon';

package/es/General/Loading/Loading.d.ts

@@ -1,5 +1,5 @@
 import { FC, HTMLAttributes } from 'react';
-/** The loading spinner does not support resizing at the moment, but as a workaround you can use the <code>className</code> attribute to change it's styles manually. */
+/** The loading spinner does not support resizing at the moment, but as a workaround you can use the className attribute to change it's styles manually. */
 export declare const Loading: FC<Props>;
 export declare type Props = HTMLAttributes<HTMLDivElement>;
 export default Loading;

package/es/General/Loading/Loading.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import classNames from 'classnames';
 import { LoadingContainer, Spinner } from './LoadingStyle';
-/** The loading spinner does not support resizing at the moment, but as a workaround you can use the <code>className</code> attribute to change it's styles manually. */
+/** The loading spinner does not support resizing at the moment, but as a workaround you can use the className attribute to change it's styles manually. */
 
 export var Loading = function Loading(props) {
   var className = props.className;

package/es/General/Tag/Tag.d.ts

@@ -11,7 +11,7 @@ interface ButtonTagProps {
 }
 export declare type TagActionType = 'add' | 'reset';
 interface ActionTagProps {
-    /** (Only for tags with <code>variant</code>=<code>action</code>). Chooses which kind of action the tag will indicate. */
+    /** (Only for tags with variant=action). Chooses which kind of action the tag will indicate. */
     action?: TagActionType;
     /** A function triggered when icon or action tag is clicked. */
     onClick?(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
@@ -19,7 +19,7 @@ interface ActionTagProps {
 export declare type TagVariantType = 'button' | 'action';
 export interface Props extends BasicTagProps, ButtonTagProps, ActionTagProps {
     children: React.ReactNode;
-    /** <code>button</code> tags usually show a single piece of information, while <code>action</code> tags are elements in a list (e.g. a list of selected options). */
+    /** button tags usually show a single piece of information, while action tags are elements in a list (e.g. a list of selected options). */
     variant?: TagVariantType;
 }
 export default Tag;

package/es/Input/DownshiftSelect/Select.d.ts

@@ -84,7 +84,7 @@ export interface Props {
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     /** Called each time the text input loses focus */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    /** Text to be displayed in <code>EmptyList</code> when <code>transformFunction</code> returns an empty list */
+    /** Text to be displayed in EmptyList when transformFunction returns an empty list */
     emptyListText?: string;
 }
 export declare const Select: React.FC<Props> & {

package/es/Input/DownshiftSelect/Select.stories.js

@@ -91,7 +91,7 @@ Interactive.args = {
 Interactive.parameters = {
   docs: {
     description: {
-      story: "You can pass a transformFunction to make the combobox filter the provided items according to custom logic. In the example above, the filter function uses <code>String.includes</code> instead of the default <code>String.startsWith</code>."
+      story: "You can pass a transformFunction to make the combobox filter the provided items according to custom logic. In the example above, the filter function uses String.includes instead of the default String.startsWith."
     }
   }
 };
@@ -127,7 +127,7 @@ TransformFunctionForCustomFilter.args = {
 TransformFunctionForCustomFilter.parameters = {
   docs: {
     description: {
-      story: "You can pass a transformFunction to make the combobox filter the provided items according to custom logic. In the example above, the filter function uses <code>String.startsWith</code> instead of the default <code>String.includes</code>."
+      story: "You can pass a transformFunction to make the combobox filter the provided items according to custom logic. In the example above, the filter function uses String.startsWith instead of the default String.includes."
     }
   }
 };
@@ -155,7 +155,7 @@ CustomComponents.parameters = {
   docs: {
     description: {
       story: "You can override the components that comprise the Combobox. These components are available at the moment: " + componentNames.map(function (name) {
-        return "<code>" + name + "</code>";
+        return "" + name;
       })
     }
   }
@@ -171,7 +171,7 @@ RemoveToggleButton.args = {
 RemoveToggleButton.parameters = {
   docs: {
     description: {
-      story: 'Remove the toggle button by passing <code>components={{ ToggleButton: () => null }}</code>'
+      story: 'Remove the toggle button by passing components={{ ToggleButton: () => null }}'
     }
   }
 };
@@ -186,7 +186,7 @@ InitiallyOpen.args = {
 InitiallyOpen.parameters = {
   docs: {
     description: {
-      story: 'Pass <code>isOpenInitially=true</code> to open and focus the Select on render. (Set to <code>false</code> in this story because it would steal focus from the other stories otherwise).'
+      story: 'Pass isOpenInitially=true to open and focus the Select on render. (Set to false in this story because it would steal focus from the other stories otherwise).'
     }
   }
 };
@@ -211,7 +211,7 @@ DownshiftOptions.args = {
 DownshiftOptions.parameters = {
   docs: {
     description: {
-      story: 'If the options afforded by the Select component are not enough, you can also use the <code>downshift</code> prop to pass custom options to the internal <code>useCombobox</code> hook. You can read the documentation <a href="https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md">here</a>. Use this with caution, future versions of this component might break your custom functionality.'
+      story: 'If the options afforded by the Select component are not enough, you can also use the downshift prop to pass custom options to the internal useCombobox hook. You can read the documentation <a href="https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md">here</a>. Use this with caution, future versions of this component might break your custom functionality.'
     }
   }
 };
@@ -230,7 +230,7 @@ DisableTyping.args = {
 DisableTyping.parameters = {
   docs: {
     description: {
-      story: "With <code>disableTyping=true</code>, the internal <code>input</code> will be set to <code>readonly</code>. This is helpful when there's only a small or fixed amount of items. This can be combined with setting <code>transformFunction</code> to the identity function to disable the filtering after an option has been chosen."
+      story: "With disableTyping=true, the internal input will be set to readonly. This is helpful when there's only a small or fixed amount of items. This can be combined with setting transformFunction to the identity function to disable the filtering after an option has been chosen."
     }
   }
 };
@@ -245,7 +245,7 @@ DisabledOptions.args = {
 DisabledOptions.parameters = {
   docs: {
     description: {
-      story: "Use the items' <code>disabled</code> prop to disable individual items."
+      story: "Use the items' disabled prop to disable individual items."
     }
   }
 };
@@ -277,7 +277,7 @@ export var ControlledSelectedItem = function ControlledSelectedItem() {
 ControlledSelectedItem.parameters = {
   docs: {
     description: {
-      story: 'Use <code>selectedItem</code> and <code>setSelectedItem</code> to control the currently selected item. <strong>In many cases, you will want to use this to react to selections made by the user.</strong> Use <code>null</code> as the controlled <code>selectedItem</code> when no item is selected: So if you want to have a controlled Select with no item selected by default, use <code>useState(null)</code>.'
+      story: 'Use selectedItem and setSelectedItem to control the currently selected item. <strong>In many cases, you will want to use this to react to selections made by the user.</strong> Use null as the controlled selectedItem when no item is selected: So if you want to have a controlled Select with no item selected by default, use useState(null).'
     }
   }
 };
@@ -304,7 +304,7 @@ export var ControlledIsOpen = function ControlledIsOpen() {
 ControlledIsOpen.parameters = {
   docs: {
     description: {
-      story: "Use <code>isOpen</code> and <code>onIsOpenChange</code> to control the state of the Select's menu. Note that clicking outside of the Select closes the select (calls <code>onIsOpenChange</code> with <code>false</code>) so if you're trying to build a 'toggle' button, clicking that button will first close the menu."
+      story: "Use isOpen and onIsOpenChange to control the state of the Select's menu. Note that clicking outside of the Select closes the select (calls onIsOpenChange with false) so if you're trying to build a 'toggle' button, clicking that button will first close the menu."
     }
   }
 };
@@ -334,7 +334,7 @@ export var ControlledInputValue = function ControlledInputValue() {
 ControlledInputValue.parameters = {
   docs: {
     description: {
-      story: "Use <code>inputValue</code> and <code>setInputValue</code> to control the input value (this value is used for the search function, don't confuse it with <code>selectedItem</code>"
+      story: "Use inputValue and setInputValue to control the input value (this value is used for the search function, don't confuse it with selectedItem"
     }
   }
 };
@@ -347,7 +347,7 @@ Invalid.args = {
 Invalid.parameters = {
   docs: {
     description: {
-      story: 'Use <code>invalid=true</code> to toggle the Select into an error state. It is recommended that you use <code>helperText</code> to describe the error when you do this.'
+      story: 'Use invalid=true to toggle the Select into an error state. It is recommended that you use helperText to describe the error when you do this.'
     }
   }
 };
@@ -358,7 +358,7 @@ DisableAutocomplete.args = {
 DisableAutocomplete.parameters = {
   docs: {
     description: {
-      story: "Intrinsic props are usually passed down to the internal <code>input</code> element, so to disable autocompletion just pass <code>autocomplete='off'</code>."
+      story: "Intrinsic props are usually passed down to the internal input element, so to disable autocompletion just pass autocomplete='off'."
     }
   }
 };
@@ -389,7 +389,7 @@ export var FocusCallbacks = function FocusCallbacks() {
 FocusCallbacks.parameters = {
   docs: {
     description: {
-      story: 'Intrinsic props are usually passed down to the internal <code>input</code> element, so you can simply use <code>onFocus</code> and <code>onBlur</code> to capture those events.'
+      story: 'Intrinsic props are usually passed down to the internal input element, so you can simply use onFocus and onBlur to capture those events.'
     }
   }
 };
@@ -410,7 +410,7 @@ export var OnClearCallback = function OnClearCallback() {
 OnClearCallback.parameters = {
   docs: {
     description: {
-      story: 'Use <code>onClear</code> to capture the when the clear-button is clicked.'
+      story: 'Use onClear to capture the when the clear-button is clicked.'
     }
   }
 };
@@ -430,7 +430,7 @@ ConfigurableWidth.args = {
 ConfigurableWidth.parameters = {
   docs: {
     description: {
-      story: "By default, the select has a 100% width. To change the width, just pass a custom <code>Container</code> subcomponent. Note that you might also have to adjust other subcomponent's styles if you want to make it really short (less than 300px)."
+      story: "By default, the select has a 100% width. To change the width, just pass a custom Container subcomponent. Note that you might also have to adjust other subcomponent's styles if you want to make it really short (less than 300px)."
     }
   }
 };
@@ -450,7 +450,7 @@ Small.args = {
 Small.parameters = {
   docs: {
     description: {
-      story: "<p>By default, the Select dictates a font-size of 16px that cascades through (almost) all sub-components. Appropriate spaces are defined using <code>em</code>, so if you want to resize the Select, just change the container's font-size.</p><p>The exception to the 16px default is the helper text, which also just uses an <code>em</code> relative value.</p>"
+      story: "<p>By default, the Select dictates a font-size of 16px that cascades through (almost) all sub-components. Appropriate spaces are defined using em, so if you want to resize the Select, just change the container's font-size.</p><p>The exception to the 16px default is the helper text, which also just uses an em relative value.</p>"
     }
   }
 };
@@ -468,7 +468,7 @@ EmptyListText.args = {
 EmptyListText.parameters = {
   docs: {
     description: {
-      story: 'When, after applying the <code>transformFunction</code> the list of items is empty, a special message will be shown in the dropdown. This message can be customized with <code>emptyListText</code>. You can also style this'
+      story: 'When, after applying the transformFunction the list of items is empty, a special message will be shown in the dropdown. This message can be customized with emptyListText. You can also style this'
     }
   }
 };

package/es/Input/NumberInput/NumberInput.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { TextFieldInput } from '../TextField/TextFieldStyle';
-/** Use <code>onChange</code> to listen to input changes.
- * Use <code>onBlur</code> to listen to focus loss.
+/** Use onChange to listen to input changes.
+ * Use onBlur to listen to focus loss.
  * <br/>
- * Use <code>status</code> to set different styles for the Input Field based on status.
+ * Use status to set different styles for the Input Field based on status.
  * <br/>
- * Use <code>small</code> to set the size of the input field. The <code>...rest</code> is passed to the
+ * Use small to set the size of the input field. The ...rest is passed to the
  * internal field input. */
 export declare const NumberInput: (props: Props) => JSX.Element;
 export interface Props extends React.ComponentPropsWithoutRef<typeof TextFieldInput> {

package/es/Input/NumberInput/NumberInput.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import TextField from '../TextField';
 
-/** Use <code>onChange</code> to listen to input changes.
- * Use <code>onBlur</code> to listen to focus loss.
+/** Use onChange to listen to input changes.
+ * Use onBlur to listen to focus loss.
  * <br/>
- * Use <code>status</code> to set different styles for the Input Field based on status.
+ * Use status to set different styles for the Input Field based on status.
  * <br/>
- * Use <code>small</code> to set the size of the input field. The <code>...rest</code> is passed to the
+ * Use small to set the size of the input field. The ...rest is passed to the
  * internal field input. */
 export var NumberInput = function NumberInput(props) {
   return /*#__PURE__*/React.createElement(TextField, _extends({}, props, {

package/es/Input/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => JSX.Element;
+export interface Props {
+    value: PhoneNumber;
+    onChange: (value: PhoneNumber) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    error?: ReactNode;
+    addon?: ReactNode;
+    callingCodeOptions: CallingCodeOption[];
+    filterValue?: string | null;
+    onInputChange?: (inputValue: string | null) => void;
+    isLoadingCallingCodeOptions?: boolean;
+    callingCodeInputRootId?: string;
+    label: string;
+    featuredOptionsLabel: string;
+    otherOptionsLabel: string;
+    callingCodeFilterInputPlaceholder: string;
+    callingCodeNoOptionsLabel: string;
+}
+export interface PhoneNumber {
+    callingCode: number;
+    significantNumber: string | null;
+}
+export interface CallingCodeOption {
+    label: string;
+    callingCode: number;
+    isFeatured: boolean;
+}