funuicss 2.7.1 → 2.7.3

package/ui/card/Card.js

@@ -48,6 +48,6 @@ function Card(_a) {
                     " "),
                 horizontal ? react_1.default.createElement(CardFooter_1.default, null, footer) : '')
             : '',
-        footer && !horizontal ? react_1.default.createElement(CardFooter_1.default, null, footer) : '',
-        children));
+        children && react_1.default.createElement(CardBody_1.default, null, children),
+        footer && !horizontal ? react_1.default.createElement(CardFooter_1.default, null, footer) : ''));
 }

package/ui/card/Card.tsx

@@ -108,9 +108,10 @@ export default function Card({
       </div>
       : ''
       }
+         {children && <CardBody>{children}</CardBody>}
 
       {footer && !horizontal ? <CardFooter>{footer}</CardFooter> : ''}
-      {children}
+   
     </div>
   );
 }

package/ui/carousel/Carousel.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+interface CarouselProps {
+    scrollNumber?: number;
+    gap?: number;
+    funcss?: string;
+    children: ReactNode;
+}
+declare const Carousel: React.FC<CarouselProps>;
+export default Carousel;

package/ui/carousel/Carousel.js

@@ -0,0 +1,78 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var pi_1 = require("react-icons/pi");
+var Circle_1 = __importDefault(require("../specials/Circle"));
+var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
+var Functions_1 = require("../../utils/Functions");
+var Carousel = function (_a) {
+    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, children = _a.children;
+    var scrollRef = (0, react_1.useRef)(null);
+    var scroll = function (direction) {
+        var container = scrollRef.current;
+        if (!container)
+            return;
+        container.scrollBy({
+            left: direction === 'left' ? -scrollNumber : scrollNumber,
+            behavior: 'smooth',
+        });
+    };
+    var _e = (0, react_1.useState)(false), isPhone = _e[0], setisPhone = _e[1];
+    (0, react_1.useEffect)(function () {
+        if ((0, Functions_1.isTouchDevice)()) {
+            setisPhone(true);
+        }
+        else {
+            setisPhone(false);
+        }
+    }, []);
+    return (react_1.default.createElement(RowFlex_1.default, { gap: 1, wrap: "nowrap", alignItems: "center" },
+        !isPhone &&
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('left'); } },
+                    react_1.default.createElement(pi_1.PiCaretLeft, { size: 24 }))),
+        react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full ".concat(funcss), style: { width: "100%", gap: gap + "rem" } }, react_1.default.Children.map(children, function (child) { return (react_1.default.createElement("div", { className: "carousel-item" },
+            react_1.default.createElement("div", { className: "carousel-card" }, child))); })),
+        !isPhone &&
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('right'); } },
+                    react_1.default.createElement(pi_1.PiCaretRight, { size: 24 })))));
+};
+exports.default = Carousel;

package/ui/carousel/Carousel.tsx

@@ -0,0 +1,73 @@
+'use client';
+import React, { useRef, ReactNode, useState, useEffect } from 'react';
+import { PiCaretLeft, PiCaretRight } from 'react-icons/pi';
+import Circle from '../specials/Circle';
+import RowFlex from '../specials/RowFlex';
+import { isTouchDevice } from '../../utils/Functions';
+
+interface CarouselProps {
+
+scrollNumber?: number;
+gap?:number;
+funcss?: string;
+children: ReactNode;
+}
+
+const Carousel: React.FC<CarouselProps> = ({ scrollNumber = 320, gap = 0.5, funcss  = '',  children   }) => {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+
+  const scroll = (direction: 'left' | 'right') => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    container.scrollBy({
+      left: direction === 'left' ? -scrollNumber : scrollNumber,
+      behavior: 'smooth',
+    });
+  };
+  const [isPhone, setisPhone] = useState(false)
+    useEffect(() => {
+    if (isTouchDevice()) {
+      setisPhone(true)
+    } else {
+      setisPhone(false)
+    }
+  }, []);
+
+  return (
+    <RowFlex gap={1} wrap="nowrap" alignItems="center">
+     {
+        !isPhone &&
+      <div >
+        <Circle  onClick={() => scroll('left')}>
+          <PiCaretLeft size={24} />
+        </Circle>
+      </div>
+     }
+
+      {/* Scrollable container */}
+      <div
+        ref={scrollRef}
+        className={`carousel-container scrollbar-hide w-full ${funcss}`}
+        style={{width:"100%" , gap:gap + "rem"}}
+      >
+        {React.Children.map(children, (child) => (
+          <div className="carousel-item">
+            <div className="carousel-card">{child}</div>
+          </div>
+        ))}
+      </div>
+
+    {
+        !isPhone &&
+           <div>
+        <Circle  onClick={() => scroll('right')}>
+          <PiCaretRight size={24} />
+        </Circle>
+      </div>
+    }
+    </RowFlex>
+  );
+};
+
+export default Carousel;

package/ui/drop/Dropdown.d.ts

@@ -12,6 +12,7 @@ interface DropdownProps {
     items: DropdownItem[];
     hoverable?: boolean;
     openOnHover?: boolean;
+    closableOnlyOutside?: boolean;
     className?: string;
     width?: string;
     minWidth?: string;

package/ui/drop/Dropdown.js

@@ -36,9 +36,9 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var Dropdown = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'dropdown' : _b, _c = _a.position, position = _c === void 0 ? 'left' : _c, button = _a.button, items = _a.items, _d = _a.hoverable, hoverable = _d === void 0 ? true : _d, _e = _a.openOnHover, openOnHover = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? '' : _f, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight;
+    var _b = _a.direction, direction = _b === void 0 ? 'dropdown' : _b, _c = _a.position, position = _c === void 0 ? 'left' : _c, button = _a.button, items = _a.items, _d = _a.hoverable, hoverable = _d === void 0 ? true : _d, _e = _a.openOnHover, openOnHover = _e === void 0 ? true : _e, _f = _a.closableOnlyOutside, closableOnlyOutside = _f === void 0 ? false : _f, _g = _a.className, className = _g === void 0 ? '' : _g, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight;
     var containerRef = (0, react_1.useRef)(null);
-    var _g = (0, react_1.useState)(false), open = _g[0], setOpen = _g[1];
+    var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
     var containerClass = "".concat(direction, " ").concat(position, " ").concat(className).trim();
     var menuClass = "drop-menu".concat(hoverable ? ' item-hoverable' : '');
     (0, react_1.useEffect)(function () {
@@ -65,9 +65,11 @@ var Dropdown = function (_a) {
                 maxHeight: maxHeight,
             } }, items.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "drop-item hoverable", onClick: function () {
                 var _a;
-                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-                if (!openOnHover)
-                    setOpen(false);
+                if (!closableOnlyOutside) {
+                    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                    if (!openOnHover)
+                        setOpen(false);
+                }
             } }, item.label)); }))));
 };
 exports.default = Dropdown;

package/ui/drop/Dropdown.tsx

@@ -16,6 +16,7 @@ interface DropdownProps {
   items: DropdownItem[];
   hoverable?: boolean;
   openOnHover?: boolean;
+  closableOnlyOutside?: boolean;
   className?: string;
   width?: string;
   minWidth?: string;
@@ -23,6 +24,7 @@ interface DropdownProps {
   height?: string;
   minHeight?: string;
   maxHeight?: string;
+
 }
 
 const Dropdown: React.FC<DropdownProps> = ({
@@ -32,6 +34,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   items,
   hoverable = true,
   openOnHover = true,
+  closableOnlyOutside = false,
   className = '',
   width,
   minWidth,
@@ -93,8 +96,11 @@ const Dropdown: React.FC<DropdownProps> = ({
             key={index}
             className="drop-item hoverable"
             onClick={() => {
-              item.onClick?.();
+          if(!closableOnlyOutside){
+         item.onClick?.();
               if (!openOnHover) setOpen(false);
+          }
+     
             }}
           >
             {item.label}

package/ui/richtext/RichText.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import 'quill/dist/quill.bubble.css';
+interface RichTextProps {
+    /** The HTML content of the editor */
+    value: string;
+    showEmojis: boolean;
+    /** Function triggered when the editor content changes */
+    onChange: (content: string) => void;
+    /** Placeholder shown when editor is empty */
+    placeholder?: string;
+    /** Optional ReactNode to be rendered after the emoji dropdown */
+    afterEmoji?: React.ReactNode;
+    /** Extra class names for container styling */
+    funcss?: string;
+}
+declare const RichText: React.FC<RichTextProps>;
+export default RichText;

package/ui/richtext/RichText.js

@@ -0,0 +1,112 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_quilljs_1 = require("react-quilljs");
+require("quill/dist/quill.bubble.css");
+var md_1 = require("react-icons/md");
+var Emojis_1 = require("../../utils/Emojis");
+var Dropdown_1 = __importDefault(require("../drop/Dropdown"));
+var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
+var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
+var Circle_1 = __importDefault(require("../specials/Circle"));
+var Tip_1 = __importDefault(require("../tooltip/Tip"));
+var RichText = function (_a) {
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? 'Write something...' : _b, afterEmoji = _a.afterEmoji, showEmojis = _a.showEmojis, _c = _a.funcss, funcss = _c === void 0 ? '' : _c;
+    var _d = (0, react_quilljs_1.useQuill)({
+        theme: 'bubble',
+        placeholder: placeholder,
+        modules: {
+            toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
+        },
+    }), quill = _d.quill, quillRef = _d.quillRef;
+    var savedRange = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (!quill)
+            return;
+        var handleSelectionChange = function (range) {
+            if (range)
+                savedRange.current = range;
+        };
+        var handleTextChange = function () {
+            onChange(quill.root.innerHTML);
+        };
+        quill.on('selection-change', handleSelectionChange);
+        quill.on('text-change', handleTextChange);
+        return function () {
+            quill.off('selection-change', handleSelectionChange);
+            quill.off('text-change', handleTextChange);
+        };
+    }, [quill, onChange]);
+    (0, react_1.useEffect)(function () {
+        if (quill && value !== quill.root.innerHTML) {
+            quill.root.innerHTML = value;
+        }
+    }, [quill, value]);
+    var insertEmoji = function (emoji) {
+        if (quill && savedRange.current) {
+            quill.insertText(savedRange.current.index, emoji);
+            quill.setSelection(savedRange.current.index + emoji.length);
+        }
+    };
+    var renderEmojiSection = function (title, emojis) { return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "mb-2 mt-2 text-sm" }, title),
+        react_1.default.createElement(RowFlex_1.default, { gap: 0.3 }, emojis.map(function (emoji, i) { return (react_1.default.createElement("span", { key: i, className: "h6 pointer", onClick: function () { return insertEmoji(emoji); } }, emoji)); })))); };
+    return (react_1.default.createElement("div", { className: funcss },
+        react_1.default.createElement("div", { id: "bubble-editor-container", className: "bubble-editor-container p-0" },
+            react_1.default.createElement("div", { ref: quillRef, className: "bubble-editor" })),
+        react_1.default.createElement(RowFlex_1.default, { gap: 0.5 },
+            showEmojis &&
+                react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
+                        react_1.default.createElement(Circle_1.default, { funcss: "bg border" },
+                            react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
+                        react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Emojis" })), items: [
+                        {
+                            label: (react_1.default.createElement("div", { className: "w-200 h-300", style: { overflowY: 'auto' } },
+                                renderEmojiSection('❤️ Smileys & People', Emojis_1.AllEmojis.Smiley),
+                                renderEmojiSection('👍 Gestures & Body Parts', Emojis_1.AllEmojis.Gesture),
+                                renderEmojiSection('🔥 Symbols & Expressions', Emojis_1.AllEmojis.Symbols),
+                                renderEmojiSection('🚀 Travel, Objects & Activities', Emojis_1.AllEmojis.Travel),
+                                renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', Emojis_1.AllEmojis.People),
+                                renderEmojiSection('🐶 Animals & Nature', Emojis_1.AllEmojis.Animals))),
+                        },
+                    ] }),
+            afterEmoji || null)));
+};
+exports.default = RichText;

package/ui/richtext/RichText.tsx

@@ -0,0 +1,145 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+import { useQuill } from 'react-quilljs';
+import 'quill/dist/quill.bubble.css';
+import { MdOutlineEmojiEmotions } from 'react-icons/md';
+import { AllEmojis } from '../../utils/Emojis';
+import Dropdown from '../drop/Dropdown';
+import RowFlex from '../specials/RowFlex';
+import ToolTip from '../tooltip/ToolTip';
+import Circle from '../specials/Circle';
+import Tip from '../tooltip/Tip';
+
+// ✅ Define RangeStatic locally since Quill does not export it
+type RangeStatic = {
+  index: number;
+  length: number;
+};
+
+interface RichTextProps {
+  /** The HTML content of the editor */
+  value: string;
+  showEmojis: boolean;
+  /** Function triggered when the editor content changes */
+  onChange: (content: string) => void;
+
+  /** Placeholder shown when editor is empty */
+  placeholder?: string;
+
+  /** Optional ReactNode to be rendered after the emoji dropdown */
+  afterEmoji?: React.ReactNode;
+
+  /** Extra class names for container styling */
+  funcss?: string;
+}
+
+const RichText: React.FC<RichTextProps> = ({
+  value,
+  onChange,
+  placeholder = 'Write something...',
+  afterEmoji,
+  showEmojis,
+  funcss = '',
+}) => {
+  const { quill, quillRef } = useQuill({
+    theme: 'bubble',
+    placeholder,
+    modules: {
+      toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
+    },
+  });
+
+  const savedRange = useRef<RangeStatic | null>(null);
+
+  useEffect(() => {
+    if (!quill) return;
+
+    const handleSelectionChange = (range: RangeStatic | null) => {
+      if (range) savedRange.current = range;
+    };
+
+    const handleTextChange = () => {
+      onChange(quill.root.innerHTML);
+    };
+
+    quill.on('selection-change', handleSelectionChange);
+    quill.on('text-change', handleTextChange);
+
+    return () => {
+      quill.off('selection-change', handleSelectionChange);
+      quill.off('text-change', handleTextChange);
+    };
+  }, [quill, onChange]);
+
+  useEffect(() => {
+    if (quill && value !== quill.root.innerHTML) {
+      quill.root.innerHTML = value;
+    }
+  }, [quill, value]);
+
+  const insertEmoji = (emoji: string) => {
+    if (quill && savedRange.current) {
+      quill.insertText(savedRange.current.index, emoji);
+      quill.setSelection(savedRange.current.index + emoji.length);
+    }
+  };
+
+  const renderEmojiSection = (title: string, emojis: string[]) => (
+    <>
+      <div className="mb-2 mt-2 text-sm">{title}</div>
+      <RowFlex gap={0.3}>
+        {emojis.map((emoji, i) => (
+          <span key={i} className="h6 pointer" onClick={() => insertEmoji(emoji)}>
+            {emoji}
+          </span>
+        ))}
+      </RowFlex>
+    </>
+  );
+
+  return (
+    <div className={funcss} >
+      {/* Editor Container */}
+      <div id="bubble-editor-container" className="bubble-editor-container p-0">
+        <div ref={quillRef} className="bubble-editor" />
+      </div>
+
+      {/* Emoji Dropdown */}
+      <RowFlex gap={0.5}>
+        {
+            showEmojis &&
+               <Dropdown
+               closableOnlyOutside
+          direction="dropdown"
+          openOnHover={false}
+          button={
+            <ToolTip>
+              <Circle funcss="bg border">
+                <MdOutlineEmojiEmotions />
+              </Circle>
+              <Tip tip="top" animation="ScaleUp" duration={0.5} content="Emojis" />
+            </ToolTip>
+          }
+          items={[
+            {
+              label: (
+                <div className="w-200 h-300" style={{ overflowY: 'auto' }}>
+                  {renderEmojiSection('❤️ Smileys & People', AllEmojis.Smiley)}
+                  {renderEmojiSection('👍 Gestures & Body Parts', AllEmojis.Gesture)}
+                  {renderEmojiSection('🔥 Symbols & Expressions', AllEmojis.Symbols)}
+                  {renderEmojiSection('🚀 Travel, Objects & Activities', AllEmojis.Travel)}
+                  {renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', AllEmojis.People)}
+                  {renderEmojiSection('🐶 Animals & Nature', AllEmojis.Animals)}
+                </div>
+              ),
+            },
+          ]}
+        />
+        }
+        {afterEmoji || null}
+      </RowFlex>
+    </div>
+  );
+};
+
+export default RichText;

package/ui/specials/RowFlex.js

@@ -58,7 +58,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RowFlex;
 var React = __importStar(require("react"));
 function RowFlex(_a) {
-    var className = _a.className, funcss = _a.funcss, content = _a.content, justify = _a.justify, gap = _a.gap, alignItems = _a.alignItems, align = _a.align, responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, _b = _a.wrap, wrap = _b === void 0 ? 'nowrap' : _b, id = _a.id, children = _a.children, style = _a.style, rest = __rest(_a, ["className", "funcss", "content", "justify", "gap", "alignItems", "align", "responsiveSmall", "responsiveMedium", "wrap", "id", "children", "style"]);
+    var className = _a.className, funcss = _a.funcss, content = _a.content, justify = _a.justify, gap = _a.gap, alignItems = _a.alignItems, align = _a.align, responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, _b = _a.wrap, wrap = _b === void 0 ? 'wrap' : _b, id = _a.id, children = _a.children, style = _a.style, rest = __rest(_a, ["className", "funcss", "content", "justify", "gap", "alignItems", "align", "responsiveSmall", "responsiveMedium", "wrap", "id", "children", "style"]);
     return (React.createElement("div", __assign({ id: id ? id : '', className: "\n        row-flex ".concat(className ? className : '', "\n        ").concat(funcss ? funcss : '', "\n        ").concat(responsiveSmall ? 'responsiveSmall' : responsiveMedium ? 'responsiveMedium' : '', "\n      "), style: __assign({ justifyContent: justify ? justify : '', gap: gap ? gap + "rem" : '', alignItems: alignItems ? alignItems : '', flexWrap: wrap }, style) }, rest),
         children,
         " ",

package/ui/specials/RowFlex.tsx

@@ -26,7 +26,7 @@ export default function RowFlex({
   align,
   responsiveSmall,
   responsiveMedium,
-  wrap = 'nowrap',
+  wrap = 'wrap',
   id,
   children,
   style,

package/utils/Emojis.d.ts

@@ -0,0 +1,14 @@
+export declare let EmojiSmiley: () => string[];
+export declare let EmojiGesture: () => string[];
+export declare let EmojiSymbol: () => string[];
+export declare let EmojiTravel: () => string[];
+export declare let EmojiPeople: () => string[];
+export declare let EmojiAminal: () => string[];
+export declare let AllEmojis: {
+    Animals: string[];
+    People: string[];
+    Travel: string[];
+    Smiley: string[];
+    Gesture: string[];
+    Symbols: string[];
+};

package/utils/Emojis.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllEmojis = exports.EmojiAminal = exports.EmojiPeople = exports.EmojiTravel = exports.EmojiSymbol = exports.EmojiGesture = exports.EmojiSmiley = void 0;
+var EmojiSmiley = function () {
+    return [
+        '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '☺️', '😚',
+        '😙', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '😶', '😏', '😒', '🙄', '😬', '🤥', '😌', '😔',
+        '😪', '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🥵', '🥶', '😵', '🥴', '😕', '😟', '🙁', '☹️', '😲', '😯', '😳',
+        '🥺', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖', '😣', '😞', '😓', '😩', '😫', '🥱', '😤', '😡', '😠',
+        '🤬', '😈', '👿', '💀', '☠️', '🤡', '👹', '👺', '👻', '👽', '👾', '🤖'
+    ];
+};
+exports.EmojiSmiley = EmojiSmiley;
+var EmojiGesture = function () {
+    return [
+        '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤌', '🤏', '✌️', '🤞', '🫰', '🫵', '🫱', '🫲', '🤟', '🤘', '🤙', '👈', '👉', '👆',
+        '🖕', '👇', '☝️', '👍', '👎', '✊', '👊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🙏', '💪', '🦾', '🦿', '🦵', '🦶'
+    ];
+};
+exports.EmojiGesture = EmojiGesture;
+var EmojiSymbol = function () {
+    return [
+        '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟',
+        '💯', '💢', '💥', '💫', '💦', '💨', '🕳️', '💣', '💬', '👁️‍🗨️', '🗨️', '🗯️', '💭', '🌀', '🔔', '🔕', '🎵', '🎶',
+        '🎼', '🔥', '⭐', '🌟', '✨', '⚡', '💡', '🎉', '🎊', '🎈', '🎁', '🎀'
+    ];
+};
+exports.EmojiSymbol = EmojiSymbol;
+var EmojiTravel = function () {
+    return [
+        '🚀', '🚁', '✈️', '🛩️', '🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐', '🚚', '🚛', '🛻', '🚜', '🛴', '🚲',
+        '🛵', '🏍️', '🛺', '🚨', '🚔', '🚍', '🚘', '🚖', '🚡', '🚟', '🚠', '🚃', '🚋', '🚞', '🚝', '🚄', '🚅', '🚈', '🚂', '🚆',
+        '🛫', '🛬', '🛰️', '💺', '🛶', '⛵', '🚤', '🛳️', '⛴️', '🚢'
+    ];
+};
+exports.EmojiTravel = EmojiTravel;
+var EmojiPeople = function () {
+    return [
+        '👶', '🧒', '👦', '👧', '🧑', '👱', '👨', '👩', '🧓', '👴', '👵', '🙍', '🙎', '🙅', '🙆', '💁', '🙋', '🧏', '🙇', '🤦',
+        '🤷', '🧑‍⚕️', '👨‍⚕️', '👩‍⚕️', '🧑‍🎓', '👨‍🎓', '👩‍🎓', '🧑‍🏫', '👨‍🏫', '👩‍🏫', '🧑‍⚖️', '👨‍⚖️', '👩‍⚖️', '🧑‍🌾',
+        '👨‍🌾', '👩‍🌾', '🧑‍🍳', '👨‍🍳', '👩‍🍳', '🧑‍🔧', '👨‍🔧', '👩‍🔧', '🧑‍🏭', '👨‍🏭', '👩‍🏭'
+    ];
+};
+exports.EmojiPeople = EmojiPeople;
+var EmojiAminal = function () {
+    return [
+        '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒', '🐔',
+        '🐧', '🐦', '🐤', '🐣', '🐥', '🦆', '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞', '🐜', '🪲'
+    ];
+};
+exports.EmojiAminal = EmojiAminal;
+exports.AllEmojis = {
+    'Animals': (0, exports.EmojiAminal)(),
+    'People': (0, exports.EmojiPeople)(),
+    'Travel': (0, exports.EmojiTravel)(),
+    'Smiley': (0, exports.EmojiSmiley)(),
+    'Gesture': (0, exports.EmojiGesture)(),
+    'Symbols': (0, exports.EmojiSymbol)(),
+};