@helpdice/ui 2.1.5 → 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.d.ts

@@ -4,7 +4,7 @@ interface Props {
     color?: ButtonTypes;
     ghost?: boolean;
     loading?: boolean;
-    shadow?: boolean;
+    shadow?: boolean | string;
     round?: boolean;
     auto?: boolean;
     effect?: boolean;

package/esm/button/button.js

@@ -71,7 +71,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     }, [theme.palette, filteredProps]),
     bg = _useMemo.bg,
     border = _useMemo.border,
-    color = _useMemo.color;
+    color = _useMemo.color,
+    rippleColor = _useMemo.ripple;
   var hover = useMemo(function () {
     return getButtonHoverColors(theme.palette, filteredProps);
   }, [theme.palette, filteredProps]);
@@ -90,6 +91,45 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     setDripX(0);
     setDripY(0);
   };
+  var createRipple = function createRipple(event) {
+    var button = buttonRef.current;
+    if (!button) return;
+    var rect = button.getBoundingClientRect();
+    var size = Math.max(rect.width, rect.height);
+    var x = event.clientX - rect.left - size / 2;
+    var y = event.clientY - rect.top - size / 2;
+    var rippleCount = 1; // number of rings
+    var rippleDelay = 500; // ms between each ripple
+    var _loop = function _loop() {
+      var ripple = document.createElement('span');
+      Object.assign(ripple.style, {
+        position: 'absolute',
+        borderRadius: '50%',
+        backgroundColor: rippleColor,
+        width: "".concat(size, "px"),
+        height: "".concat(size, "px"),
+        left: "".concat(x, "px"),
+        top: "".concat(y, "px"),
+        pointerEvents: 'none',
+        transform: 'scale(0)',
+        opacity: '1',
+        transition: "transform 600ms ease-out ".concat(i * rippleDelay, "ms, opacity 600ms ease-out ").concat(i * rippleDelay, "ms"),
+        zIndex: 1
+      });
+      button.appendChild(ripple);
+
+      // Force reflow to start transition
+      window.getComputedStyle(ripple).opacity;
+      ripple.style.transform = 'scale(2.5)';
+      ripple.style.opacity = '0';
+      ripple.addEventListener('transitionend', function () {
+        ripple.remove();
+      });
+    };
+    for (var i = 0; i < rippleCount; i++) {
+      _loop();
+    }
+  };
   var clickHandler = function clickHandler(event) {
     if (disabled || loading) return;
     var showDrip = !shadow && !ghost && effect;
@@ -100,6 +140,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
       setDripX(event.clientX - rect.left);
       setDripY(event.clientY - rect.top);
     }
+    if (shadow) {
+      createRipple(event);
+    }
     onClick && onClick(event);
   };
   var childrenWithIcon = useMemo(function () {
@@ -110,13 +153,16 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   }, [auto, children, icon, iconRight]);
   var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
     paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
+
+  // If shadow provided is string then value other default
+  var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme.shadows.level.z2 : 'none';
   return /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonRef,
     type: type,
     disabled: disabled,
     onClick: clickHandler
   }, props, {
-    className: _JSXStyle.dynamic([["1558010596", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : '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, shadow ? theme.expressiveness.shadowMedium : 'none', 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, {
@@ -125,9 +171,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     color: dripColor,
     onCompleted: dripCompletedHandle
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1558010596",
-    dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : '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, shadow ? theme.expressiveness.shadowMedium : 'none', 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(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : '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(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.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;}")));
+    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;}}")));
 });
 ButtonComponent.displayName = 'Button';
 var Button = withScale(ButtonComponent);

package/esm/button/styles.d.ts

@@ -5,6 +5,7 @@ export interface ButtonColorGroup {
     bg: string;
     border: string;
     color: string;
+    ripple?: string;
 }
 export declare const getButtonGhostColors: (palette: HUIThemesPalette, _color: ButtonTypes) => ButtonColorGroup | null;
 export declare const getButtonColors: (palette: HUIThemesPalette, props: ButtonProps) => ButtonColorGroup;

package/esm/button/styles.js

@@ -5,22 +5,26 @@ export var getButtonGhostColors = function getButtonGhostColors(palette, _color)
     secondary: {
       bg: palette.background,
       border: palette.foreground,
-      color: palette.foreground
+      color: palette.foreground,
+      ripple: ''
     },
     success: {
       bg: palette.background,
       border: palette.success,
-      color: palette.success
+      color: palette.success,
+      ripple: ''
     },
     warning: {
       bg: palette.background,
       border: palette.warning,
-      color: palette.warning
+      color: palette.warning,
+      ripple: ''
     },
     error: {
       bg: palette.background,
       border: palette.error,
-      color: palette.error
+      color: palette.error,
+      ripple: ''
     }
   };
   return colors[_color] || null;
@@ -33,38 +37,45 @@ export var getButtonColors = function getButtonColors(palette, props) {
     "default": {
       bg: palette.background,
       border: palette.border,
-      color: palette.accents_5
+      color: palette.accents_5,
+      ripple: palette.accents_1
     },
     secondary: {
       bg: palette.foreground,
       border: palette.foreground,
-      color: palette.background
+      color: palette.background,
+      ripple: palette.accents_1
     },
     success: {
       bg: palette.success,
       border: palette.success,
-      color: '#fff'
+      color: '#fff',
+      ripple: '#1f93ffff'
     },
     warning: {
       bg: palette.warning,
       border: palette.warning,
-      color: '#fff'
+      color: '#fff',
+      ripple: '#ffca29ff'
     },
     error: {
       bg: palette.error,
       border: palette.error,
-      color: '#fff'
+      color: '#fff',
+      ripple: '#ff5a55ff'
     },
     abort: {
       bg: 'transparent',
       border: 'transparent',
-      color: palette.accents_5
+      color: palette.accents_5,
+      ripple: palette.accents_1
     }
   };
   if (disabled) return {
     bg: palette.accents_1,
     border: palette.accents_2,
-    color: '#ccc'
+    color: '#ccc',
+    ripple: ''
   };
 
   /**

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

@@ -0,0 +1,14 @@
+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/copy.d.ts

@@ -0,0 +1,2 @@
+export default copy;
+declare function copy(text: any, options: any): boolean;

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

@@ -0,0 +1,105 @@
+'use strict';
+
+import deselectCurrent from './toggle-selection';
+var clipboardToIE11Formatting = {
+  'text/plain': 'Text',
+  'text/html': 'Url',
+  "default": 'Text'
+};
+var defaultMessage = 'Copy to clipboard: #{key}, Enter';
+function format(message) {
+  var copyKey = (/mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl') + '+C';
+  return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+function copy(text, options) {
+  var debug,
+    message,
+    reselectPrevious,
+    range,
+    selection,
+    mark,
+    success = false;
+  if (!options) {
+    options = {};
+  }
+  debug = options.debug || false;
+  try {
+    reselectPrevious = deselectCurrent();
+    range = document.createRange();
+    selection = document.getSelection();
+    mark = document.createElement('span');
+    mark.textContent = text;
+    // avoid screen readers from reading out loud the text
+    mark.ariaHidden = 'true';
+    // reset user styles for span element
+    mark.style.all = 'unset';
+    // prevents scrolling to the end of the page
+    mark.style.position = 'fixed';
+    mark.style.top = 0;
+    mark.style.clip = 'rect(0, 0, 0, 0)';
+    // used to preserve spaces and line breaks
+    mark.style.whiteSpace = 'pre';
+    // do not inherit user-select (it may be `none`)
+    mark.style.webkitUserSelect = 'text';
+    mark.style.MozUserSelect = 'text';
+    mark.style.msUserSelect = 'text';
+    mark.style.userSelect = 'text';
+    mark.addEventListener('copy', function (e) {
+      e.stopPropagation();
+      if (options.format) {
+        e.preventDefault();
+        if (typeof e.clipboardData === 'undefined') {
+          // IE 11
+          debug && console.warn('unable to use e.clipboardData');
+          debug && console.warn('trying IE specific stuff');
+          window.clipboardData.clearData();
+          var format = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting['default'];
+          window.clipboardData.setData(format, text);
+        } else {
+          // all other browsers
+          e.clipboardData.clearData();
+          e.clipboardData.setData(options.format, text);
+        }
+      }
+      if (options.onCopy) {
+        e.preventDefault();
+        options.onCopy(e.clipboardData);
+      }
+    });
+    document.body.appendChild(mark);
+    range.selectNodeContents(mark);
+    selection.addRange(range);
+    var successful = document.execCommand('copy');
+    if (!successful) {
+      throw new Error('copy command was unsuccessful');
+    }
+    success = true;
+  } catch (err) {
+    debug && console.error('unable to copy using execCommand: ', err);
+    debug && console.warn('trying IE specific stuff');
+    try {
+      window.clipboardData.setData(options.format || 'text', text);
+      options.onCopy && options.onCopy(window.clipboardData);
+      success = true;
+    } catch (err) {
+      debug && console.error('unable to copy using clipboardData: ', err);
+      debug && console.error('falling back to prompt');
+      message = format('message' in options ? options.message : defaultMessage);
+      window.prompt(message, text);
+    }
+  } finally {
+    if (selection) {
+      if (typeof selection.removeRange == 'function') {
+        selection.removeRange(range);
+      } else {
+        selection.removeAllRanges();
+      }
+    }
+    if (mark) {
+      document.body.removeChild(mark);
+    }
+    reselectPrevious();
+  }
+  return success;
+}
+export default copy;

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

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

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

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

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

@@ -0,0 +1 @@
+export default function _default(): () => void;

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

@@ -0,0 +1,31 @@
+export default function () {
+  var selection = document.getSelection();
+  if (!selection.rangeCount) {
+    return function () {};
+  }
+  var active = document.activeElement;
+  var ranges = [];
+  for (var i = 0; i < selection.rangeCount; i++) {
+    ranges.push(selection.getRangeAt(i));
+  }
+  switch (active.tagName.toUpperCase() // .toUpperCase handles XHTML
+  ) {
+    case 'INPUT':
+    case 'TEXTAREA':
+      active.blur();
+      break;
+    default:
+      active = null;
+      break;
+  }
+  selection.removeAllRanges();
+  return function () {
+    selection.type === 'Caret' && selection.removeAllRanges();
+    if (!selection.rangeCount) {
+      ranges.forEach(function (range) {
+        selection.addRange(range);
+      });
+    }
+    active && active.focus();
+  };
+}

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';
@@ -93,9 +93,9 @@ export type { HUIThemes, HUserTheme } from './themes';
 export { default as Toggle } from './toggle';
 export type { ToggleProps } from './toggle';
 export { default as Tooltip } from './tooltip';
-export { default as Notetip } from './notetip';
+export { default as Notetip } from './notetip/note-tip';
 export type { TooltipProps } from './tooltip';
-export type { NotetipProps } from './notetip';
+export type { NotetipProps } from './notetip/note-tip';
 export { default as Tree } from './tree';
 export type { TreeProps } from './tree';
 export { useTime, useTimer, useStopwatch } from './timer';
@@ -125,7 +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';