ar-design 0.3.99 → 0.4.2

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

@@ -13,3 +13,37 @@
     margin-bottom: 0.75rem;
   }
 }
+
+/* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
+/* Çok dar ekranlar için özel düzeltmeler */
+@media (max-width: 375px) {
+}
+
+/* --- [MOBİL - STANDART] --- */
+/* Ekran 576px ve altına düştüğünde çalışır */
+@media (max-width: 576px) {
+  .ar-paper {
+    border-radius: 0;
+    box-shadow: none;
+
+    > .header {
+    }
+  }
+}
+
+/* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
+/* Ekran 768px ve altına düştüğünde çalışır */
+@media (max-width: 768px) {
+  .ar-paper {
+    border-radius: 0;
+    box-shadow: none;
+
+    > .header {
+    }
+  }
+}
+
+/* --- [TABLET & KÜÇÜK LAPTOP] --- */
+/* Ekran 1024px ve altına düştüğünde çalışır */
+@media (max-width: 1024px) {
+}

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

@@ -1,65 +1,107 @@
 .ar-tabs {
   > .tabs {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
+    position: relative;
     height: var(--input-height);
     margin-bottom: 1.5rem;
+    padding: 0;
     border-bottom: solid 2px var(--gray-200);
     user-select: none;
+    overflow: hidden;
 
-    > .item {
-      position: relative;
+    > .container {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 1rem;
+      flex-direction: row;
+      justify-content: flex-start;
       height: 100%;
-      padding: 0 0.75rem;
-      color: var(--gray-700);
-      cursor: pointer;
-      overflow: hidden;
+      overflow-x: auto;
+      scrollbar-width: none;
+      scroll-behavior: auto;
+      cursor: all-scroll !important;
 
-      &:not(:last-child) {
-        &::after {
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          right: 0;
-          content: "";
-          background-color: var(--gray-200);
-          width: 2px;
-          height: 12.5px;
-          border-radius: var(--border-radius-pill);
+      > .item {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+        min-width: max-content;
+        height: 100%;
+        padding: 0 0.75rem;
+        color: var(--gray-700);
+        cursor: pointer;
+        overflow: hidden;
+
+        &:not(:last-child) {
+          &::after {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: 0;
+            content: "";
+            background-color: var(--gray-200);
+            width: 2px;
+            height: 12.5px;
+            border-radius: var(--border-radius-pill);
+          }
         }
-      }
 
-      &.selection {
-        color: var(--primary);
+        &.selection {
+          color: var(--primary);
 
-        &::before {
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          content: "";
-          background-color: var(--primary);
-          height: 2px;
+          &::before {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            content: "";
+            background-color: var(--primary);
+            height: 2px;
+            border-radius: var(--border-radius-pill);
+          }
+        }
+
+        > .close-button {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: rgba(var(--danger-rgb), 0.25);
+          width: 1rem;
+          height: 1rem;
           border-radius: var(--border-radius-pill);
+          color: rgba(var(--danger-rgb), 0.5);
+          font-size: 0.75rem;
         }
       }
+    }
 
-      > .close-button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: rgba(var(--danger-rgb), 0.25);
-        width: 1rem;
-        height: 1rem;
-        border-radius: var(--border-radius-pill);
-        color: rgba(var(--danger-rgb), 0.5);
-        font-size: 0.75rem;
-      }
+    > .left,
+    .right {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(var(--black-rgb), 0.1);
+      backdrop-filter: blur(5px);
+      width: 2rem;
+      height: 2rem;
+      border-radius: var(--border-radius);
+      color: var(--blue);
+      font-size: 1rem;
+      cursor: pointer;
+      transition:
+        visibility 0.25s,
+        opacity 0.25s ease-in-out;
+      z-index: 5;
+    }
+
+    > .left {
+      left: 0;
+    }
+
+    > .right {
+      right: 0;
     }
   }
 
@@ -122,3 +164,115 @@
     transform: translateY(-5px);
   }
 }
+
+/* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
+/* Çok dar ekranlar için özel düzeltmeler */
+@media (max-width: 375px) {
+}
+
+/* --- [MOBİL - STANDART] --- */
+/* Ekran 576px ve altına düştüğünde çalışır */
+@media (max-width: 576px) {
+  .ar-tabs {
+    > .tabs {
+      padding: 0 2rem;
+
+      > .container {
+        > .item {
+          &:not(:last-child) {
+            &::after {
+            }
+          }
+
+          &.selection {
+            &::before {
+            }
+          }
+
+          > .close-button {
+          }
+        }
+      }
+
+      > .left,
+      .right {
+      }
+
+      > .left {
+      }
+
+      > .right {
+      }
+    }
+
+    &.skeleton {
+      > .tabs {
+        > .item {
+          > span {
+          }
+        }
+      }
+
+      > .content {
+        &::before {
+        }
+      }
+    }
+  }
+}
+
+/* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
+/* Ekran 768px ve altına düştüğünde çalışır */
+@media (max-width: 768px) {
+  .ar-tabs {
+    > .tabs {
+      padding: 0 2rem;
+
+      > .container {
+        > .item {
+          &:not(:last-child) {
+            &::after {
+            }
+          }
+
+          &.selection {
+            &::before {
+            }
+          }
+
+          > .close-button {
+          }
+        }
+      }
+
+      > .left,
+      .right {
+      }
+
+      > .left {
+      }
+
+      > .right {
+      }
+    }
+
+    &.skeleton {
+      > .tabs {
+        > .item {
+          > span {
+          }
+        }
+      }
+
+      > .content {
+        &::before {
+        }
+      }
+    }
+  }
+}
+
+/* --- [TABLET & KÜÇÜK LAPTOP] --- */
+/* Ekran 1024px ve altına düştüğünde çalışır */
+@media (max-width: 1024px) {
+}

package/dist/assets/css/components/form/text-editor/styles.css

@@ -3,57 +3,82 @@
   flex-direction: column;
   gap: 0;
   width: 100%;
-}
-.ar-text-editor > .toolbar {
-  display: flex;
-  flex-direction: row;
-  gap: 0.25rem;
-  margin-top: -1px;
-  border: solid 1px transparent;
-  border-left-color: var(--gray-300);
-  border-right-color: var(--gray-300);
-  border-bottom-color: var(--gray-300);
-}
-.ar-text-editor > iframe {
-  width: 100%;
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-.ar-text-editor > .resize {
-  position: relative;
-  background-color: var(--gray-100);
-  width: 100%;
-  height: 1.5rem;
-  border: solid 1px transparent;
-  border-left-color: var(--gray-300);
-  border-right-color: var(--gray-300);
-  border-bottom-color: var(--gray-300);
-  border-bottom-left-radius: var(--border-radius-sm);
-  border-bottom-right-radius: var(--border-radius-sm);
-  cursor: ns-resize;
-}
-.ar-text-editor > .resize::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: var(--gray-500);
-  width: 1.5rem;
-  height: 0.1rem;
-  box-shadow: 0px -5px 0 0px var(--gray-500), 0px 5px 0 0px var(--gray-500);
-}
 
-.ar-text-editor > .validation {
-  color: var(--danger);
-  font-size: 0.8rem;
-  font-weight: 400;
-}
+  > label {
+    position: absolute;
+    top: 1.5rem;
+    left: 0.85rem;
+    display: block;
+    padding: 0 0.5rem;
+    color: var(--gray-500);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
-.ar-text-editor--block-item {
-  position: absolute;
-  inset: 0;
-  cursor: ns-resize;
+    &.visible {
+      visibility: visible;
+      opacity: 1;
+      display: block;
+      top: 0.25rem;
+      left: 1.25rem;
+      padding: 0 0.5rem;
+      font-size: 0.75rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  > iframe {
+    width: 100%;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  > .toolbar {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+    margin-top: -1px;
+    border: solid 1px transparent;
+    border-left-color: var(--gray-300);
+    border-right-color: var(--gray-300);
+    border-bottom-color: var(--gray-300);
+  }
+
+  > .resize {
+    position: relative;
+    background-color: var(--gray-100);
+    width: 100%;
+    height: 1.5rem;
+    border: solid 1px transparent;
+    border-left-color: var(--gray-300);
+    border-right-color: var(--gray-300);
+    border-bottom-color: var(--gray-300);
+    border-bottom-left-radius: var(--border-radius-sm);
+    border-bottom-right-radius: var(--border-radius-sm);
+    cursor: ns-resize;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: var(--gray-500);
+      width: 1.5rem;
+      height: 0.1rem;
+      box-shadow:
+        0px -5px 0 0px var(--gray-500),
+        0px 5px 0 0px var(--gray-500);
+    }
+  }
+
+  > .validation {
+    color: var(--danger);
+    font-size: 0.8rem;
+    font-weight: 400;
+  }
 }
 
 .ar-alias-panel {
@@ -70,17 +95,27 @@
   box-shadow: 0 10px 15px -5px rgba(var(--black-rgb), 0.1);
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: opened ease-in-out 250ms 0s 1 normal both;
+
+  > ul {
+    > li {
+      display: flex;
+      align-items: center;
+      gap: 0 0.5rem;
+      padding: 0 1rem;
+      height: var(--input-height);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--gray-100);
+      }
+    }
+  }
 }
-.ar-alias-panel > ul > li {
-  display: flex;
-  align-items: center;
-  gap: 0 0.5rem;
-  padding: 0 1rem;
-  height: var(--input-height);
-  cursor: pointer;
-}
-.ar-alias-panel > ul > li:hover {
-  background-color: var(--gray-100);
+
+.ar-text-editor--block-item {
+  position: absolute;
+  inset: 0;
+  cursor: ns-resize;
 }
 
 @keyframes opened {

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

@@ -1,12 +1,58 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import "../../../assets/css/components/data-display/tabs/tabs.css";
 import Skeleton from "./skeleton";
+import { ARIcon } from "../../icons";
 const Tabs = ({ name, tabs = [], activeTab, onChange, onClose }) => {
+    // ref
+    const _container = useRef(null);
+    const _items = useRef([]);
+    const _itemIndex = useRef(0);
     // states
     const [currentTab, setCurrentTab] = useState(0);
+    const [scrollInfo, setScrollInfo] = useState({
+        isMaxLeft: true,
+        isMaxRight: false,
+        current: 0,
+        maxScrollable: 0,
+    });
     // states -> Loading
     const [isLoading, setIsLoading] = useState(true);
+    // methods
+    const handleScroll = () => {
+        if (_container.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = _container.current;
+            // Maksimum sağ değer: Toplam genişlik - Görünür genişlik
+            const maxRight = scrollWidth - clientWidth;
+            setScrollInfo({
+                isMaxLeft: scrollLeft <= 0, // En solda mı?
+                isMaxRight: scrollLeft >= maxRight - 1, // En sağda mı?
+                current: scrollLeft, // Anlık ne kadar sağda.
+                maxScrollable: maxRight, // Gidebileceği max piksel.
+            });
+        }
+    };
+    const scroll = useMemo(() => {
+        return (direction) => {
+            const container = _container.current;
+            if (!container)
+                return;
+            let nextIndex = direction === "left" ? _itemIndex.current - 1 : _itemIndex.current + 1;
+            if (nextIndex < 0)
+                nextIndex = 0;
+            if (nextIndex >= _items.current.length)
+                nextIndex = _items.current.length - 1;
+            const targetItem = _items.current[nextIndex];
+            if (targetItem) {
+                const targetLeft = targetItem.offsetLeft - container.offsetLeft;
+                container.scrollTo({
+                    left: targetLeft,
+                    behavior: "smooth",
+                });
+                _itemIndex.current = nextIndex;
+            }
+        };
+    }, []);
     // useEffects
     useEffect(() => setCurrentTab(activeTab ?? 0), [activeTab]);
     useEffect(() => {
@@ -16,26 +62,41 @@ const Tabs = ({ name, tabs = [], activeTab, onChange, onClose }) => {
         onChange?.(stored !== null ? Number(stored) : 0);
         setIsLoading(false);
     }, [name]);
+    useEffect(() => {
+        window.addEventListener("resize", handleScroll);
+        return () => {
+            window.removeEventListener("resize", handleScroll);
+        };
+    }, []);
     if (isLoading)
         return React.createElement(Skeleton, { name: name, tabs: tabs });
     return (React.createElement("div", { className: "ar-tabs" },
-        React.createElement("div", { className: "tabs" }, tabs.length > 0 &&
-            tabs.map((tab, index) => {
-                let className = ["item"];
-                if (currentTab === index)
-                    className.push("selection");
-                return (React.createElement("div", { key: tab.title ?? index, className: className.map((c) => c).join(" "), onClick: () => {
-                        setCurrentTab(index);
-                        onChange?.(index);
-                        const key = `${window.location.pathname}::${name}`;
-                        sessionStorage.setItem(key, String(index));
-                    } },
-                    React.createElement("span", null, tab.title),
-                    tab.config?.canBeClosed && (React.createElement("span", { className: "close-button", onClick: (event) => {
-                            event.stopPropagation();
-                            onClose && onClose(index);
-                        } }, "\u2716"))));
-            })),
+        React.createElement("div", { className: "tabs" },
+            scrollInfo.current > 0 && (React.createElement("div", { className: "left", onClick: () => scroll("left") },
+                React.createElement(ARIcon, { icon: "ArrowLeft", stroke: "var(--gray-700)" }))),
+            !scrollInfo.isMaxRight && (React.createElement("div", { className: "right", onClick: () => scroll("right") },
+                React.createElement(ARIcon, { icon: "ArrowRight", stroke: "var(--gray-700)" }))),
+            React.createElement("div", { ref: _container, className: "container", onScroll: handleScroll }, tabs.length > 0 &&
+                tabs.map((tab, index) => {
+                    let className = ["item"];
+                    if (currentTab === index)
+                        className.push("selection");
+                    return (React.createElement("div", { key: tab.title ?? index, ref: (element) => {
+                            if (!element)
+                                return;
+                            _items.current[index] = element;
+                        }, className: className.map((c) => c).join(" "), onClick: () => {
+                            setCurrentTab(index);
+                            onChange?.(index);
+                            const key = `${window.location.pathname}::${name}`;
+                            sessionStorage.setItem(key, String(index));
+                        } },
+                        React.createElement("span", null, tab.title),
+                        tab.config?.canBeClosed && (React.createElement("span", { className: "close-button", onClick: (event) => {
+                                event.stopPropagation();
+                                onClose && onClose(index);
+                            } }, "\u2716"))));
+                }))),
         React.createElement("div", { className: "content" }, tabs.map((tab, index) => currentTab === index && tab.content))));
 };
 export default Tabs;

package/dist/components/form/text-editor/IProps.d.ts

@@ -1,81 +1,8 @@
-import { IColors, IValidation } from "../../../libs/types/IGlobalProps";
-export interface IProps<T> extends IValidation, IColors {
-    /**
-     * Bileşenin isim (name) değeridir.
-     *
-     * Formlarda veya bileşenlerde tanımlayıcı olarak kullanılır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <TextEditor name="email" />
-     * ```
-     */
+import { IColors, IDisabled, IValidation } from "../../../libs/types/IGlobalProps";
+export interface IProps<T> extends IValidation, IColors, IDisabled {
     name?: string;
-    /**
-     * Bileşenin mevcut değeridir.
-     */
     value?: string;
-    /**
-     * Değer değiştiğinde çağrılan fonksiyon.
-     *
-     * - `value`: Yeni değer. `string` veya `undefined` olabilir.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <TextEditor onChange={(value)=> console.log(value)} />
-     * ```
-     */
     onChange: (value?: string) => void;
-    /**
-     * Bileşenin yüksekliği (piksel cinsinden).
-     */
-    height?: number;
-    /**
-     * Dinamik liste özellikleri.
-     *
-     * - `render.display`: Listede gösterilecek `T` tipindeki nesnenin hangi alanının gösterileceği.
-     * - `render.items`: Gösterilecek öğeler dizisi.
-     * - `triggerKey`: (Opsiyonel) Dinamik listenin tetiklenmesini sağlayan tuş.
-     * - `onTagged`: (Opsiyonel) Etiketlenen öğeler seçildiğinde çağrılan fonksiyon.
-     *
-     * Örnek kullanım:
-     *
-     * ```tsx
-     * interface IUser {
-     *   id: number;
-     *   name: string;
-     *   email: string;
-     * }
-     *
-     * const users: IUser[] = [
-     *   { id: 1, name: "Kaan", email: "kaan@example.com" },
-     * ];
-     *
-     * function handleTagged(taggedItems: IUser[]) {
-     *   console.log("Seçilen öğeler:", taggedItems);
-     * }
-     *
-     * const dynamicListProps = {
-     *   render: {
-     *     display: "name" as keyof IUser,
-     *     items: users,
-     *   },
-     *   triggerKey: "@",
-     *   onTagged: handleTagged,
-     * };
-     *
-     * <TextEditor dynamicList={dynamicListProps} />
-     * ```
-     *
-     * Açıklamalar:
-     *
-     * - `render.display`: Öğe listesinden kullanıcıya gösterilecek alanı belirtir.
-     * - `render.items`: Dinamik listede gösterilecek öğelerin dizisidir.
-     * - `triggerKey`: Bu karakter yazıldığında dinamik liste açılır.
-     * - `onTagged`: Kullanıcı bir öğeyi seçip etiketlediğinde çağrılır ve seçilen öğeleri parametre olarak alır.
-     */
     dynamicList?: {
         render: {
             display: keyof T;
@@ -84,16 +11,8 @@ export interface IProps<T> extends IValidation, IColors {
         triggerKey?: string;
         onTagged: (tagged: any[]) => void;
     };
-    /**
-     * Çoklu dil desteğinin aktif olup olmadığını belirtir.
-     *
-     * - `true`: Çoklu dil desteği aktif.
-     * - `false` veya belirtilmemişse: Devre dışı.
-     */
+    height?: number;
     multilang?: boolean;
-    /**
-     * Bileşenin placeholder (yer tutucu) metnidir.
-     */
     placeholder?: string;
 }
 export default IProps;

package/dist/components/form/text-editor/index.d.ts

@@ -1,5 +1,5 @@
 import "../../../assets/css/components/form/text-editor/styles.css";
 import IProps from "./IProps";
 import React from "react";
-declare const TextEditor: <T extends object>({ color, name, value, onChange, dynamicList, height, validation, }: IProps<T>) => React.JSX.Element;
+declare const TextEditor: <T extends object>({ color, name, value, onChange, dynamicList, placeholder, height, validation, disabled, }: IProps<T>) => React.JSX.Element;
 export default TextEditor;

package/dist/components/form/text-editor/index.js

@@ -6,13 +6,12 @@ import React, { useEffect, useRef, useState } from "react";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
 import Tooltip from "../../feedback/tooltip";
-const TextEditor = ({ color = "light", name, value, onChange, dynamicList, 
-// placeholder,
-height, 
+const TextEditor = ({ color = "light", name, value, onChange, dynamicList, placeholder, height, 
 // multilang,
-validation, }) => {
+validation, disabled, }) => {
     // refs
     const _container = useRef(null);
+    const _label = useRef(null);
     const _arIframe = useRef(null);
     const _onChange = useRef(onChange);
     const _onChangeTimeOut = useRef(null);
@@ -143,7 +142,8 @@ validation, }) => {
         if (!_iframeDocument)
             return;
         setIframeDocument(_iframeDocument);
-        _iframeDocument.designMode = "on";
+        if (!disabled)
+            _iframeDocument.designMode = "on";
         // Herhangi bir değişikliği izlemek için MutationObserver kullan
         const observer = new MutationObserver((mutationsList) => {
             if (_onChangeTimeOut.current)
@@ -212,7 +212,25 @@ validation, }) => {
         };
     }, []);
     return (React.createElement("div", { ref: _container, className: "ar-text-editor" },
-        React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" "), height: height }),
+        placeholder && (React.createElement("label", { ref: _label, className: value ? "visible" : "hidden", style: { maxWidth: _arIframe.current?.getBoundingClientRect().width } },
+            validation && "* ",
+            placeholder)),
+        React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" "), height: height, ...(value
+                ? {
+                    style: {
+                        clipPath: `polygon(
+                            -15px 0,
+                            10px -5px,
+                            10px 5px,
+                            calc(${_label.current?.getBoundingClientRect().width}px + 7px) 5px,
+                            calc(${_label.current?.getBoundingClientRect().width}px + 7px) -5px,
+                            100% -70px,
+                            calc(100% + 5px) calc(100% + 5px),
+                            -5px calc(100% + 5px)
+                          )`,
+                    },
+                }
+                : {}) }),
         React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }, index) => (React.createElement(Tooltip, { key: `${command}-${index}`, text: tooltip },
             React.createElement(Button, { key: command, type: "button", variant: "borderless", color: "light", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon }) }, onClick: () => execCommand(command) }))))),
         React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),

package/dist/components/icons/Compiler.js

@@ -11,9 +11,9 @@ class Icon {
             case "Add":
                 return (React.createElement("path", { d: "M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" }));
             case "ArrowLeft":
-                return (React.createElement("path", { d: "M15 19.92L8.48 13.4c-.77-.77-.77-2.03 0-2.8L15 4.08", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }));
+                return (React.createElement("path", { fillRule: "evenodd", d: "M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }));
             case "ArrowRight":
-                return (React.createElement("path", { fillRule: "evenodd", d: "M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" }));
+                return (React.createElement("path", { fillRule: "evenodd", d: "M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }));
             case "Bold":
                 return (React.createElement("path", { d: "M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z" }));
             case "BulletList":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.3.99",
+  "version": "0.4.2",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",