ar-design 0.1.27 → 0.1.29

package/dist/assets/css/components/data-display/divider/divider.css

@@ -3,6 +3,6 @@
   background: linear-gradient(90deg, transparent 0%, var(--gray-200) 50%, transparent 100%);
   width: 100%;
   height: 2px;
-  margin: 1rem 0;
+  margin: 2rem 0;
   border: none;
 }

package/dist/assets/css/components/data-display/paper/paper.css

@@ -1,8 +1,8 @@
 .ar-paper {
-  background-color: var(--white);
-  padding: 2rem;
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0 0 20px -15px rgba(var(--black-rgb), 0.25);
+  /* background-color: var(--white); */
+  /* padding: 2rem; */
+  /* border-radius: var(--border-radius-sm); */
+  /* box-shadow: 0 0 20px -15px rgba(var(--black-rgb), 0.25); */
 }
 .ar-paper > .header {
   display: flex;
@@ -10,11 +10,11 @@
   justify-content: space-between;
   align-items: center;
   background-color: transparent;
-  margin-bottom: 2rem;
+  margin-bottom: 0.75rem;
 }
-.ar-paper > .header > h3 {
+/* .ar-paper > .header > h3 {
   color: var(--gray-700);
-}
+} */
 
 .ar-paper > .content {
 }

package/dist/assets/css/components/data-display/typography/paragraph/core.css

@@ -2,4 +2,5 @@
   margin-bottom: 0.25rem;
   color: var(--gray-900);
   font-family: var(--system);
+  white-space: wrap;
 }

package/dist/assets/css/components/data-display/typography/title/core.css

@@ -1,4 +1,5 @@
 .ar-typography-title {
-  color: var(--gray-700);
+  color: var(--black);
   font-family: var(--system);
+  letter-spacing: 1px;
 }

package/dist/assets/css/components/feedback/confirm/confirm.css

@@ -0,0 +1,51 @@
+.ar-confirm-wrapper {
+  position: relative;
+}
+.ar-confirm-wrapper > .ar-confirm {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem 0;
+  background-color: rgba(var(--white-rgb), 0.75);
+  backdrop-filter: blur(10px);
+  width: 250px;
+  padding: 10px;
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
+  z-index: 5;
+}
+.ar-confirm-wrapper > .ar-confirm::after {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 100%;
+  content: "";
+  border: solid 10px transparent;
+  border-left-color: var(--white);
+}
+
+/* #region Open or Close */
+.ar-confirm-wrapper > .ar-confirm:is(.opened) {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
+  z-index: 100;
+}
+.ar-confirm-wrapper > .ar-confirm:is(.closed) {
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0.8);
+  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
+  z-index: 99;
+}
+/* #endregion */
+/* Open or Close */
+
+.ar-confirm-wrapper > .ar-confirm > .footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0 0.5rem;
+}

package/dist/assets/css/components/feedback/modal/content.css

@@ -1,6 +1,6 @@
 .ar-modal-wrapper > .ar-modal > .content {
   max-height: calc(100vh - (3.5rem + 7.5rem + 7.5rem));
   padding: 2rem;
-  overflow-x: hidden;
-  overflow-y: auto;
+  /* overflow-x: hidden;
+  overflow-y: auto; */
 }

package/dist/assets/css/components/feedback/modal/modal.css

@@ -13,7 +13,7 @@
   z-index: 100;
 }
 .ar-modal-wrapper:is(.opened) > .ar-modal {
-  top: 7.5rem;
+  top: 4.5rem;
   transform: translateX(-50%) scale(1);
   transition: top 250ms, transform 250ms 300ms ease-in-out;
 }
@@ -43,7 +43,7 @@
   width: 75%;
 }
 .ar-modal-wrapper > .ar-modal.normal {
-  width: 50%;
+  width: 520px;
 }
 .ar-modal-wrapper > .ar-modal.small {
   width: 25%;

package/dist/assets/css/components/form/button/button.css

@@ -6,7 +6,6 @@
   font-size: 1rem;
   cursor: pointer;
   transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
-  overflow: hidden;
 }
 .ar-button.disabled {
   cursor: no-drop;

package/dist/assets/css/components/form/button/core/icon.css

@@ -20,3 +20,18 @@
 .ar-button:is(.icon-end):not(.no-content) > .text {
   flex-direction: row-reverse;
 }
+
+/* Custom Symbol */
+.ar-button:is(.icon) .dotted::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translate(-50%, -50%);
+  content: "⋮";
+  width: 100%;
+  height: 100%;
+  font-size: 1.25rem;
+}

package/dist/assets/css/components/form/button-action/button-action.css

@@ -0,0 +1,39 @@
+.ar-button-action {
+  position: relative;
+}
+.ar-button-action > .list {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(var(--white-rgb), 0.75);
+  backdrop-filter: blur(10px);
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
+}
+.ar-button-action > .list::after {
+  position: absolute;
+  top: 0.5rem;
+  left: 100%;
+  content: "";
+  border: solid 10px transparent;
+  border-left-color: var(--gray-200);
+}
+
+/* #region Open or Close */
+.ar-button-action > .list:is(.opened) {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
+  z-index: 100;
+}
+.ar-button-action > .list:is(.closed) {
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0.8);
+  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
+  z-index: 99;
+}
+/* #endregion */
+/* Open or Close */

package/dist/assets/css/components/form/button-group/button-group.css

@@ -4,17 +4,17 @@
   flex-wrap: nowrap;
   width: max-content;
 }
-.ar-button-group > .ar-button,
-.ar-button-group > .ar-button:is(.ar-button-shape) {
+.ar-button-group .ar-button,
+.ar-button-group .ar-button:is(.ar-button-shape) {
   border-radius: 0;
 }
-.ar-button-group > .ar-button:first-child,
-.ar-button-group > .ar-button:is(.ar-button-shape):first-child {
+.ar-button-group .ar-button:first-child,
+.ar-button-group .ar-button:is(.ar-button-shape):first-child {
   border-top-left-radius: var(--border-radius-sm);
   border-bottom-left-radius: var(--border-radius-sm);
 }
-.ar-button-group > .ar-button:last-child,
-.ar-button-group > .ar-button:is(.ar-button-shape):last-child {
+.ar-button-group .ar-button:last-child,
+.ar-button-group .ar-button:is(.ar-button-shape):last-child {
   border-top-right-radius: var(--border-radius-sm);
   border-bottom-right-radius: var(--border-radius-sm);
 }

package/dist/assets/css/components/form/button-group/variant/filled/core.css

@@ -1,3 +1,3 @@
-.ar-button-group > .ar-button:is(.filled):not(:last-child) {
+.ar-button-group .ar-button:is(.filled):not(:last-child) {
   border-right: solid 1px rgba(var(--black-rgb), 0.1) !important;
 }

package/dist/assets/css/components/form/button-group/variant/outlined/core.css

@@ -1,3 +1,3 @@
-.ar-button-group > .ar-button:is(.outlined):not(:first-child) {
+.ar-button-group .ar-button:is(.outlined):not(:first-child) {
   border-left: transparent !important;
 }

package/dist/assets/css/components/form/select/options.css

@@ -55,6 +55,7 @@
   visibility: hidden;
   opacity: 0;
   transform: scaleY(0.8);
+  height: 0;
 }
 
 .ar-select-wrapper > .options.top:is(.opened, .closed),

package/dist/assets/css/components/layout/grid-system/row/core.css

@@ -16,10 +16,11 @@
 .row > .col {
   position: relative;
   flex: 1 1 auto;
+  /* flex: 1 1 auto;
   min-width: 100%;
   -webkit-box-flex: 1;
   -ms-flex-preferred-size: 0;
-  -ms-flex-positive: 1;
+  -ms-flex-positive: 1; */
 }
 .row > [class*="col"].left {
   text-align: left;
@@ -28,5 +29,6 @@
   text-align: center;
 }
 .row > [class*="col"].right {
-  text-align: right;
+  display: flex;
+  justify-content: flex-end;
 }

package/dist/assets/css/components/navigation/menu/menu.css

@@ -11,23 +11,28 @@
   padding: 0;
   list-style: none;
 }
-
+.ar-menu ul li {
+  letter-spacing: 1px;
+}
 .ar-menu ul li .item-render {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 .ar-menu ul li .item-render > a {
+  display: block;
+  width: 100%;
+  height: 2rem;
   color: inherit;
   text-decoration: none;
-  letter-spacing: 1px;
+  line-height: 2rem;
 }
 .ar-menu ul li .item-render > span {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 2rem;
-  height: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
   margin-right: 0.75rem;
   border-radius: var(--border-radius-pill);
 }

package/dist/assets/css/components/navigation/steps/animation.css

@@ -0,0 +1,8 @@
+@keyframes in-progress {
+  0% {
+    transform: rotate(0turn);
+  }
+  100% {
+    transform: rotate(1turn);
+  }
+}

package/dist/assets/css/components/navigation/steps/steps.css

@@ -0,0 +1,134 @@
+.ar-steps {
+}
+.ar-steps > .steps {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.ar-steps > .steps > .item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: flex-start;
+  gap: 1rem 0;
+}
+.ar-steps > .steps > .item > .item-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.ar-steps > .steps > .item:not(:last-child) > .item-icon:has(.pending)::after,
+.ar-steps > .steps > .item:not(:last-child) > .item-icon:has(.in-progress)::after,
+.ar-steps > .steps > .item > .item-icon:has(.completed)::after {
+  position: absolute;
+  left: calc(50% + 1.25rem);
+  transform: translateX(-50%);
+  content: "";
+  width: 70%;
+  height: 4px;
+  border-radius: var(--border-radius-pill);
+}
+.ar-steps > .steps > .item:not(:last-child) > .item-icon:has(.pending)::after {
+  background-color: var(--gray-300);
+}
+.ar-steps > .steps > .item:not(:last-child) > .item-icon:has(.in-progress)::after {
+  background: var(--gray-300);
+  background: linear-gradient(90deg, var(--primary) 50%, var(--gray-300) 50%);
+  background-color: var(--primary);
+}
+.ar-steps > .steps > .item > .item-icon:has(.completed)::after {
+  background-color: var(--success);
+}
+
+.ar-steps > .steps > .item > .item-icon > span {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--border-radius-pill);
+}
+
+.ar-steps > .steps > .item > .item-icon > .pending {
+  position: relative;
+  background-color: var(--white);
+  border: solid 1px var(--gray-500);
+}
+.ar-steps > .steps > .item > .item-icon > .pending::before {
+  display: inline-block;
+  content: "";
+  background-color: transparent;
+  width: 1rem;
+  height: 1rem;
+  border: dotted 3.5px var(--gray-500);
+}
+.ar-steps > .steps > .item > .item-icon > .pending::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-block;
+  content: "";
+  background-color: var(--primary);
+  width: 3.5px;
+  height: 3.5px;
+  border-radius: var(--border-radius-pill);
+}
+
+.ar-steps > .steps > .item > .item-icon > .in-progress {
+  background-color: var(--primary);
+  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px rgba(var(--primary-rgb), 0.5);
+}
+.ar-steps > .steps > .item > .item-icon > .in-progress::before {
+  display: inline-block;
+  content: "";
+  background-color: transparent;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: dashed 2.5px transparent;
+  border-top-color: rgba(var(--white-rgb), 1);
+  border-right-color: rgba(var(--white-rgb), 0.75);
+  border-bottom-color: rgba(var(--white-rgb), 0.25);
+  border-left-color: rgba(var(--white-rgb), 0.1);
+  border-radius: var(--border-radius-pill);
+  animation: in-progress 1s linear 0s infinite normal both;
+}
+
+.ar-steps > .steps > .item > .item-icon > .completed {
+  background-color: var(--success);
+  box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.1);
+}
+.ar-steps > .steps > .item > .item-icon > .completed::before {
+  display: inline-block;
+  content: "";
+  background-color: transparent;
+  width: 1rem;
+  height: 0.55rem;
+  border: solid 2.5px transparent;
+  border-left-color: var(--white);
+  border-bottom-color: var(--white);
+  border-bottom-left-radius: var(--border-radius-sm);
+  transform: rotate(-45deg) translate(1px, -1px);
+}
+
+.ar-steps > .steps > .item > .item-informations {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem 0;
+}
+.ar-steps > .steps > .item > .item-informations > .step {
+  color: var(--gray-500);
+  font-size: 0.75rem;
+  letter-spacing: 1px;
+}
+.ar-steps > .steps > .item > .item-informations > .title {
+  font-size: 1.1rem;
+  letter-spacing: 1px;
+}
+
+.ar-steps > .content {
+}
+
+@import url("./animation.css");

package/dist/components/data-display/card/IProps.d.ts

@@ -1,5 +1,5 @@
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
-interface IProps extends IGlobalProps {
+import { IChildren, IGlobalProps } from "../../../libs/types/IGlobalProps";
+interface IProps extends IGlobalProps, IChildren {
     title?: string;
 }
 export default IProps;

package/dist/components/data-display/paper/index.js

@@ -5,7 +5,7 @@ const { Title } = Typography;
 const Paper = ({ children, title, action, }) => {
     return (React.createElement("div", { className: "ar-paper" },
         (title || action) && (React.createElement("div", { className: "header" },
-            title && (React.createElement(Title, { Level: "h3", upperCase: true }, title)),
+            title && React.createElement(Title, { Level: "h3" }, title),
             action && React.createElement("div", { className: "actions-field" }, action))),
         React.createElement("div", { className: "content" }, children)));
 };

package/dist/components/data-display/table/index.js

@@ -208,7 +208,7 @@ const Table = function ({ children, data, columns, selections, pagination, confi
                             }) }, React.isValidElement(render) ? render : String(render)));
                     }))))) : (React.createElement("tr", null,
                     React.createElement("td", { colSpan: columns.length + 1 }, "Herhangi bir kay\u0131t bulunamad\u0131!")))))),
-        (pagination?.totalRecords ?? 0) > (pagination?.perPage ?? 0) && (React.createElement("div", { className: "footer" },
+        pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
             React.createElement(Pagination, { totalRecords: pagination.totalRecords, perPage: pagination.perPage, onChange: (currentPage) => {
                     setCurrentPage(currentPage);
                     // Table tarafında yapılan sayfalamayı dışarı aktarmak için kullanılan callback.

package/dist/components/data-display/typography/paragraph/IProps.d.ts

@@ -1,6 +1,6 @@
 import { ParagraphColors, Status } from "../../../../libs/types";
-import { IGlobalProps } from "../../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "status"> {
+import { IChildren, IGlobalProps } from "../../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "status">, IChildren {
     color?: ParagraphColors | Status;
     align?: "left" | "center" | "right";
 }

package/dist/components/data-display/typography/paragraph/Paragraph.js

@@ -1,15 +1,14 @@
 "use client";
-import React, { useRef } from "react";
+import React from "react";
 const Paragraph = ({ children, color, align = "left", size, upperCase = false, }) => {
-    // refs
-    let _className = useRef("ar-typography-paragraph").current;
+    let _className = ["ar-typography-paragraph"];
     if (align)
-        _className += ` ${align}`;
+        _className.push(align);
     if (color)
-        _className += ` ${color}`;
+        _className.push(color);
     if (size)
-        _className += ` ${size}`;
-    return (React.createElement("p", { className: _className }, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
+        _className.push(size);
+    return (React.createElement("p", { className: _className.map((c) => c).join(" ") }, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
 };
 Paragraph.displayName = "Paragraph";
 export default Paragraph;

package/dist/components/data-display/typography/title/IProps.d.ts

@@ -1,5 +1,5 @@
-import { IGlobalProps } from "../../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "size"> {
+import { IChildren, IGlobalProps } from "../../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "size">, IChildren {
     Level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     align?: "left" | "center" | "right";
     size?: "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "smaller" | "larger";

package/dist/components/feedback/alert/IProps.d.ts

@@ -1,6 +1,6 @@
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+import { IChildren, IGlobalProps } from "../../../libs/types/IGlobalProps";
 type message = string | message[];
-interface IProps extends Omit<IGlobalProps, "variant" | "icon"> {
+interface IProps extends Omit<IGlobalProps, "variant" | "icon">, IChildren {
     message?: message;
     emphasize?: string[];
 }

package/dist/components/feedback/confirm/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "../../../assets/css/components/feedback/confirm/confirm.css";
+import { IChildren } from "../../../libs/types/IGlobalProps";
+declare const Confirm: React.FC<{
+    title: string;
+    message: string;
+    onConfirm: (confirm: boolean) => void;
+} & IChildren>;
+export default Confirm;

package/dist/components/feedback/confirm/index.js

@@ -0,0 +1,65 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/feedback/confirm/confirm.css";
+import Button from "../../form/button";
+import Typography from "../../data-display/typography";
+const { Title, Paragraph } = Typography;
+const Confirm = ({ children, title, message, onConfirm }) => {
+    // refs
+    const _arConfirmWrapper = useRef(null);
+    const _arConfirm = useRef(null);
+    // states
+    const [open, setOpen] = useState(false);
+    const [coordinateX, setCoordinatX] = useState(0);
+    const [coordinateY, setCoordinatY] = useState(0);
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        if (_arConfirm.current && !_arConfirm.current.contains(target))
+            setOpen(false);
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape")
+            setOpen(false);
+    };
+    const handleResizeEvent = () => {
+        if (_arConfirmWrapper.current && _arConfirm.current) {
+            const wrapperRect = _arConfirmWrapper.current.getBoundingClientRect();
+            const confirm = _arConfirm.current.getBoundingClientRect();
+            setCoordinatX(wrapperRect.left - 260);
+            setCoordinatY(wrapperRect.top - confirm.height / 2);
+        }
+    };
+    // useEffects
+    useEffect(() => {
+        if (open) {
+            handleResizeEvent();
+            document.addEventListener("click", handleClickOutSide);
+            document.addEventListener("keydown", handleKeys);
+            // Sayfa boyutu değiştirilmesi söz konusu olursa eğer bu kısım çalışacaktır.
+            window.addEventListener("resize", handleResizeEvent);
+            // Dinleyicileri kaldır.
+            return () => {
+                document.removeEventListener("click", handleClickOutSide);
+                document.removeEventListener("keydown", handleKeys);
+                window.removeEventListener("resize", handleResizeEvent);
+            };
+        }
+    }, [open]);
+    return (React.createElement("div", { ref: _arConfirmWrapper, className: "ar-confirm-wrapper", role: "dialog" },
+        React.createElement("div", { ref: _arConfirm, className: `ar-confirm ${open ? "opened" : "closed"}`, style: { top: coordinateY, left: coordinateX } },
+            React.createElement(Title, { Level: "h4" }, title),
+            React.createElement(Paragraph, { size: "small" }, message),
+            React.createElement("div", { className: "footer" },
+                React.createElement(Button, { status: "success", size: "small", onClick: () => {
+                        onConfirm(true);
+                        setOpen(false);
+                    } }, "Evet"),
+                React.createElement(Button, { variant: "outlined", status: "light", size: "small", onClick: () => {
+                        onConfirm(false);
+                        setOpen(false);
+                    } }, "Hay\u0131r"))),
+        React.createElement("div", { onClick: () => setOpen((prev) => !prev) }, children)));
+};
+export default Confirm;

package/dist/components/form/button/index.js

@@ -15,29 +15,30 @@ const Button = ({ children, variant = "filled", shape, status = "primary", borde
         _buttonClassName.push(position.type);
         _buttonClassName.push(position.inset.map((_inset) => _inset).join(" "));
     }
-    return (React.createElement("button", { ref: _button, ...attributes, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
-            // Disabled gelmesi durumunda işlem yapmasına izin verme...
-            if (attributes.disabled)
-                return;
-            (() => {
-                const _current = _button.current;
-                const addClass = "active";
-                if (_current && !_current.classList.contains(addClass)) {
-                    // Sınıf ekleniyor...
-                    _current.classList.add(addClass);
-                    // Sınıf 500 milisaniye sonra kaldırlacak.
-                    setTimeout(() => _current.classList.remove(addClass), 750);
-                }
-            })();
-            (() => attributes.onClick && attributes.onClick(event))();
-        } },
-        React.createElement("span", { className: "text" },
-            icon?.element,
-            React.createElement("span", null, !shape
-                ? typeof children === "string" && upperCase
-                    ? children.toLocaleUpperCase()
-                    : children
-                : ""))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { ref: _button, ...attributes, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
+                // Disabled gelmesi durumunda işlem yapmasına izin verme...
+                if (attributes.disabled)
+                    return;
+                (() => {
+                    const _current = _button.current;
+                    const addClass = "active";
+                    if (_current && !_current.classList.contains(addClass)) {
+                        // Sınıf ekleniyor...
+                        _current.classList.add(addClass);
+                        // Sınıf 500 milisaniye sonra kaldırlacak.
+                        setTimeout(() => _current.classList.remove(addClass), 750);
+                    }
+                })();
+                (() => attributes.onClick && attributes.onClick(event))();
+            } },
+            React.createElement("span", { className: "text" },
+                icon?.element,
+                React.createElement("span", null, !shape
+                    ? typeof children === "string" && upperCase
+                        ? children.toLocaleUpperCase()
+                        : children
+                    : "")))));
 };
 Button.displayName = "Button";
 export default Button;