@helpdice/ui 2.1.8 → 2.1.9

package/dist/text/text.d.ts

@@ -15,6 +15,7 @@ interface Props {
     span?: boolean;
     del?: boolean;
     em?: boolean;
+    collapse?: number;
     blockquote?: boolean;
     noWrap?: boolean;
     className?: string;

package/esm/button/button.js

@@ -162,7 +162,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     disabled: disabled,
     onClick: clickHandler
   }, props, {
-    className: _JSXStyle.dynamic([["960361315", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
+    className: _JSXStyle.dynamic([["905110486", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
   }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
     color: color
   }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
@@ -171,7 +171,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     color: dripColor,
     onCompleted: dripCompletedHandle
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "960361315",
+    id: "905110486",
     dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor, events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(shadow ? 'transparent' : border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(btnShadow, ";}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));
 });

package/esm/container/box.d.ts

@@ -0,0 +1,42 @@
+declare const wrap: ["nowrap", "wrap", "wrap-reverse"];
+export type Wrap = typeof wrap[number];
+type ContainerProps = {
+    gap?: number;
+    children?: React.ReactNode;
+    wrap?: Wrap;
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<ContainerProps & {
+    width?: string | number;
+    height?: string | number;
+    padding?: string | number;
+    margin?: string | number;
+    w?: string | number;
+    h?: string | number;
+    paddingLeft?: string | number;
+    paddingRight?: string | number;
+    paddingTop?: string | number;
+    paddingBottom?: string | number;
+    pl?: string | number;
+    pr?: string | number;
+    pt?: string | number;
+    pb?: string | number;
+    marginLeft?: string | number;
+    marginRight?: string | number;
+    marginTop?: string | number;
+    marginBottom?: string | number;
+    ml?: string | number;
+    mr?: string | number;
+    mt?: string | number;
+    mb?: string | number;
+    px?: string | number;
+    py?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    font?: string | number;
+    unit?: string;
+    scale?: number;
+    children?: any;
+    className?: string;
+} & import("react").InputHTMLAttributes<any> & import("react").RefAttributes<unknown>>;
+export default _default;

package/esm/container/box.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["gap", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import GridBasicItem from "../grid/basic-item";
+import useScale, { withScale } from '../use-scale';
+import { useMemo } from "react";
+import { useClasses } from '@helpdice/theme';
+import { tuple } from '../utils/prop-types';
+var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
+var Container = function Container(_ref) {
+  var _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 0 : _ref$gap,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useScale = useScale(),
+    unit = _useScale.unit,
+    SCALES = _useScale.SCALES;
+  var gapUnit = useMemo(function () {
+    return "calc(".concat(gap, " * ").concat(unit, " * 1/3)");
+  }, [gap, unit]);
+  var _styles$className = {
+      styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "2955470113",
+        dynamic: [gapUnit, wrap, SCALES.width(1, 'var(--container-width)')]
+      }, "div.__jsx-style-dynamic-selector{--gap-unit:".concat(gapUnit, ";--container-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;gap:var(--gap-unit);width:").concat(SCALES.width(1, 'var(--container-width)'), ";}")),
+      className: _JSXStyle.dynamic([["2955470113", [gapUnit, wrap, SCALES.width(1, 'var(--container-width)')]]])
+    },
+    resolveClassName = _styles$className.className,
+    styles = _styles$className.styles;
+  var classes = useClasses(resolveClassName, className);
+  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
+    className: classes
+  }, props), children, styles);
+};
+Container.displayName = 'Container';
+export default withScale(Container);

package/esm/container/index.d.ts

@@ -0,0 +1,2 @@
+import Container from "./box";
+export default Container;

package/esm/container/index.js

@@ -0,0 +1,2 @@
+import Container from "./box";
+export default Container;

package/esm/copy-to-clipboard/clipboard.d.ts

@@ -1,2 +1,14 @@
-export function Clipboard(props: any): React.JSX.Element;
 import React from 'react';
+type ClipboardProps = {
+    showIcon: boolean;
+    text: string;
+    children: React.ReactNode;
+    onCopy: (text: string, result: any) => void;
+    options: {
+        debug: boolean;
+        message: string;
+        format: string;
+    };
+};
+export default function Clipboard(props: ClipboardProps): React.JSX.Element;
+export {};

package/esm/copy-to-clipboard/clipboard.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Children } from 'react';
+import copy from './copy';
+import { Copy } from '@helpdice/icons';
+import Button from '../button';
+import { useToasts } from '@helpdice/theme';
+// export function Clipboard(props: ClipboardProps) {
+//     const { setToast } = useToasts();
+//     const { showIcon, text, onCopy, options: options, children, } = props;
+//     const elem: ReactNode = React.Children.only(children) as ReactNode;
+//     const onClick = (event: MouseEventHandler<HTMLButtonElement | MouseEvent>) => {
+//         const result = copy(text, options);
+
+//         if (result) {
+//             setToast({
+//                 text: 'Text Copied'
+//             });
+//         }
+
+//         if (onCopy) {
+//             onCopy(text, result);
+//         }
+
+//         // Bypass onClick if it was present
+//         if (elem && elem.props && typeof elem.props.onClick === 'function') {
+//             elem.props.onClick(event);
+//         }
+//     };
+
+//     if (showIcon) {
+//         return React.cloneElement(
+//             <div>
+//                 {elem}
+//                 <Button auto scale={0.1} px={0.6} onClick={onClick} icon={<Copy />} />
+//             </div>,
+//             { ...props }
+//         );
+//     }
+
+//     return React.cloneElement(
+//         <div onClick={onClick}>
+//             {elem}
+//         </div>,
+//         { ...props }
+//     );
+// }
+
+export default function Clipboard(props) {
+  var _useToasts = useToasts(),
+    setToast = _useToasts.setToast;
+  var showIcon = props.showIcon,
+    text = props.text,
+    onCopy = props.onCopy,
+    options = props.options,
+    children = props.children;
+  var elem = Children.only(children);
+  var _onClick = function onClick() {
+    var result = copy(text, options);
+    if (result) {
+      setToast({
+        text: 'Text Copied'
+      });
+    }
+    if (onCopy) {
+      onCopy(text, result);
+    }
+
+    // ✅ Safely invoke child's onClick if it exists
+    // if (isValidElement(elem) && typeof elem?.props?.onClick === 'function') {
+    //   elem.props.onClick();
+    // }
+  };
+
+  // If showIcon is true, render the child + a copy icon button
+  if (showIcon) {
+    return /*#__PURE__*/React.createElement("div", null, elem, /*#__PURE__*/React.createElement(Button, {
+      auto: true,
+      scale: 0.1,
+      px: 0.6,
+      onClick: function onClick() {
+        return _onClick;
+      },
+      icon: /*#__PURE__*/React.createElement(Copy, null)
+    }));
+  }
+
+  // Otherwise, make the entire div clickable for copy
+  return /*#__PURE__*/React.cloneElement(/*#__PURE__*/React.createElement("div", {
+    onClick: _onClick
+  }, elem), _extends({}, props));
+}

package/esm/copy-to-clipboard/index.d.ts

@@ -1,2 +1,2 @@
-import { Clipboard } from "./clipboard.jsx";
+import Clipboard from "./clipboard";
 export default Clipboard;

package/esm/copy-to-clipboard/index.js

@@ -1,2 +1,2 @@
-import { Clipboard } from "./clipboard.jsx";
+import Clipboard from "./clipboard";
 export default Clipboard;

package/esm/grid/index.d.ts

@@ -1,12 +1,11 @@
 import Grid from './grid-base';
-import Container from './grid-container';
+import GridContainer from './grid-container';
 export type GridComponentType = typeof Grid & {
-    Container: typeof Container;
+    Container: typeof GridContainer;
 };
 export type { GridContainerProps } from './grid-container';
 export type { GridProps } from './grid-base';
 export type { GridBreakpointsValue } from './basic-item';
 export type { GridAlignContent, GridAlignItems, GridDirection, GridJustify, GridWrap, } from './grid-types';
-export { Container };
 declare const _default: GridComponentType;
 export default _default;

package/esm/grid/index.js

@@ -1,6 +1,8 @@
 /* "use client" */;
 import Grid from './grid-base';
-import Container from './grid-container';
-Grid.Container = Container;
-export { Container };
+import GridContainer from './grid-container';
+Grid.Container = GridContainer;
+// export {
+//   Container
+// }
 export default Grid;

package/esm/index.d.ts

@@ -36,8 +36,9 @@ export type { DrawerProps } from './drawer';
 export { default as Fieldset } from './fieldset';
 export type { FieldsetProps, FieldsetTitleProps, FieldsetSubtitleProps, FieldsetGroupProps, FieldsetFooterProps, FieldsetContentProps, } from './fieldset';
 export * from './form';
-export { default as Grid, Container } from './grid';
+export { default as Grid } from './grid';
 export type { GridProps, GridContainerProps } from './grid';
+export { default as Container } from './container';
 export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
 export type { ImageProps, ImageBrowserProps } from './image';
@@ -61,7 +62,6 @@ export { default as Popover } from './popover';
 export type { PopoverProps, PopoverItemProps } from './popover';
 export { default as List } from './list';
 export { default as Menu } from './menu';
-export { default as PhoneInput } from './phone-input';
 export { default as Progress } from './progress';
 export type { ProgressProps } from './progress';
 export { default as Radio } from './radio';
@@ -125,8 +125,7 @@ export { default as Swipe } from './swipe';
 export type { SwipeProps } from './swipe';
 export { Carousel } from './carousal';
 export type { CarouselProps } from './carousal';
-export { default as CurrencyInput } from './currency-input';
-export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './currency-input';
+export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './input/currency-input';
 export { default as useToasts } from './use-toasts';
 export type { Toast, ToastInput, ToastAction, ToastLayout } from './use-toasts';
 export { default as Clipboard } from './copy-to-clipboard';

package/esm/index.js

@@ -24,7 +24,8 @@ export * from './form';
 
 // export * as captcha from './captcha'
 
-export { default as Grid, Container } from './grid';
+export { default as Grid } from './grid';
+export { default as Container } from './container';
 export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
 export { default as Input, getColors } from './input';
@@ -38,7 +39,6 @@ export { default as Pagination } from './pagination';
 export { default as Popover } from './popover';
 export { default as List } from './list';
 export { default as Menu } from './menu';
-export { default as PhoneInput } from './phone-input';
 export { default as Progress } from './progress';
 export { default as Radio } from './radio';
 export { default as Rating } from './rating';
@@ -84,7 +84,8 @@ export * from './login-with';
 export { default as Swipe } from './swipe';
 // Carousel
 export { Carousel } from './carousal';
+
 // Currency Input
-export { default as CurrencyInput } from './currency-input';
+
 export { default as useToasts } from './use-toasts';
 export { default as Clipboard } from './copy-to-clipboard';

package/esm/input/index.d.ts

@@ -1,9 +1,13 @@
 import Input from './input-field';
 import Textarea from '../textarea';
 import InputPassword from './password';
+import PhoneInput from './phone-input';
+import CurrencyInput from './currency-input';
 export type InputComponentType = typeof Input & {
     Textarea: typeof Textarea;
     Password: typeof InputPassword;
+    Phone: typeof PhoneInput;
+    Currency: typeof CurrencyInput;
 };
 export { getColors } from './styles';
 export type { InputProps } from './input-field';

package/esm/input/index.js

@@ -2,7 +2,11 @@
 import Input from './input-field';
 import Textarea from '../textarea';
 import InputPassword from './password';
+import PhoneInput from './phone-input';
+import CurrencyInput from './currency-input';
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
+Input.Phone = PhoneInput;
+Input.Currency = CurrencyInput;
 export { getColors } from './styles';
 export default Input;

package/esm/input/phone-input/phone.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { InputTypes } from '..';
+type PhoneInputProps = {
+    onChange: (data: string) => void;
+    value?: string;
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+    country?: string;
+    placeholder?: string;
+    color?: InputTypes;
+};
+declare function PhoneInput({ onChange, value, country, placeholder, color: _color, children, fullWidth }: PhoneInputProps): React.JSX.Element;
+export default PhoneInput;

package/esm/input/phone-input/phone.js

@@ -0,0 +1,166 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import countries from './countries.json';
+import { useTheme } from '@helpdice/theme';
+import { getColors } from '../styles';
+import useScale from '../../use-scale';
+import InputBlockLabel from '../input-block-label';
+function PhoneInput(_ref) {
+  var onChange = _ref.onChange,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    country = _ref.country,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Enter phone number' : _ref$placeholder,
+    _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color,
+    children = _ref.children,
+    fullWidth = _ref.fullWidth;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var defaultValue = country ? countries.findIndex(function (cn) {
+    return cn.code == country;
+  }) : 103;
+  var _useState = useState(countries[defaultValue]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedCountry = _useState2[0],
+    setSelectedCountry = _useState2[1];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    phoneNumber = _useState4[0],
+    setPhoneNumber = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFocused = _useState6[0],
+    setIsFocused = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dropdownOpen = _useState8[0],
+    setDropdownOpen = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchTerm = _useState10[0],
+    setSearchTerm = _useState10[1];
+  var dropdownRef = useRef(null);
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, _color);
+    }, [theme.palette]),
+    borderColor = _useMemo.borderColor,
+    hoverBorder = _useMemo.hoverBorder;
+  var handleSelectCountry = function handleSelectCountry(country) {
+    setSelectedCountry(country);
+    setDropdownOpen(false);
+    setSearchTerm('');
+    if (onChange) onChange("".concat(country.code, ":").concat(phoneNumber));
+  };
+  var handlePhoneChange = function handlePhoneChange(e) {
+    var value = e.target.value.replace(/[^\d]/g, '');
+    setPhoneNumber(value);
+    if (onChange) onChange("".concat(selectedCountry.phone, ",").concat(value));
+  };
+  var handleClickOutside = function handleClickOutside(e) {
+    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+      setDropdownOpen(false);
+      setSearchTerm('');
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var filteredCountries = countries.filter(function (c) {
+    return "".concat(c.label, " ").concat(c.code, " ").concat(c.phone).toLowerCase().includes(searchTerm.toLowerCase());
+  });
+  var defaultWidth = fullWidth ? '100%' : 'initial';
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropdownRef,
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input-container ".concat(isFocused ? 'focused' : '')
+  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return setDropdownOpen(!dropdownOpen);
+    },
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 5
+    },
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }, /*#__PURE__*/React.createElement("img", {
+    loading: "lazy",
+    width: "20",
+    height: "20",
+    src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
+    srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
+    alt: "Flag of ".concat(selectedCountry.label),
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
+    type: "tel",
+    placeholder: placeholder,
+    value: phoneNumber,
+    onChange: handlePhoneChange,
+    onFocus: function onFocus() {
+      return setIsFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setIsFocused(false);
+    },
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
+  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "Search country...",
+    value: searchTerm,
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
+  }, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: c.code,
+      onClick: function onClick() {
+        return handleSelectCountry(c);
+      },
+      className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 5
+      },
+      className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }, /*#__PURE__*/React.createElement("img", {
+      loading: "lazy",
+      width: "23",
+      height: "23",
+      src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
+      srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
+      alt: "Flag of ".concat(c.label),
+      className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'grey'
+      },
+      className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }, c.label)));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
+  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3237870810",
+    dynamic: [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
+  }, ".phone-input-container.__jsx-style-dynamic-selector{position:relative;width:".concat(SCALES.width(1, defaultWidth), ";height:").concat(SCALES.height(2.25), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
+}
+;
+export default PhoneInput;

package/esm/text/child.d.ts

@@ -4,6 +4,7 @@ export interface Props {
     tag: keyof JSX.IntrinsicElements;
     color?: NormalTypes;
     className?: string;
+    collapse?: number;
 }
 type NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>;
 export type TextChildProps = Props & NativeAttrs;

package/esm/text/text.d.ts

@@ -15,6 +15,7 @@ interface Props {
     span?: boolean;
     del?: boolean;
     em?: boolean;
+    collapse?: number;
     blockquote?: boolean;
     noWrap?: boolean;
     className?: string;

package/esm/text/text.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "children", "className"];
+var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className"];
 /* "use client" */;
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import TextChild from './child';
 import { withScale } from '../use-scale';
+import Button from '../button';
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
   var nextTag = tags.slice(1, tags.length);
@@ -43,6 +45,8 @@ var TextComponent = function TextComponent(_ref) {
     blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
     _ref$noWrap = _ref.noWrap,
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$collapse = _ref.collapse,
+    collapse = _ref$collapse === void 0 ? 0 : _ref$collapse,
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -82,6 +86,10 @@ var TextComponent = function TextComponent(_ref) {
    *
    */
 
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
   var tag = useMemo(function () {
     if (names[0]) return names[0];
     if (inlineNames[0]) return inlineNames[0];
@@ -100,7 +108,21 @@ var TextComponent = function TextComponent(_ref) {
     },
     className: "".concat(className, " ").concat(noWrap ? 'no-wrap' : ''),
     tag: tag
-  }, props), modifers);
+  }, props), typeof children === 'string' && collapse > 50 ? /*#__PURE__*/React.createElement(React.Fragment, null, expand ? modifers : (modifers === null || modifers === void 0 ? void 0 : modifers.toString().substring(0, collapse)) + '...', /*#__PURE__*/React.createElement(Button, {
+    margin: 0,
+    onClick: function onClick() {
+      return setExpand(!expand);
+    },
+    style: {
+      textTransform: 'lowercase'
+    },
+    effect: false,
+    color: "abort",
+    scale: 2 / 3,
+    px: 0.2,
+    py: 0,
+    auto: true
+  }, /*#__PURE__*/React.createElement("b", null, expand ? 'less' : 'more'))) : modifers);
 };
 TextComponent.displayName = 'Text';
 var Text = withScale(TextComponent);