@fibery/ui-kit 1.13.0 → 1.14.0

package/src/emoji-picker/primitives/grid.tsx

@@ -0,0 +1,67 @@
+import {css} from "@linaria/core";
+import {useLayoutEffect, useMemo, useRef, useState} from "react";
+import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
+import {get as getFrequentlyUsed} from "../utils/frequently";
+import {EmojiPickerCategory} from "./category";
+import {useEmojiPickerContentSettings} from "./content";
+import {contentHorizontalPadding} from "./layout";
+import {useFoundEmojis} from "./search-provider";
+
+const gridWrapperCss = css`
+  height: 238px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  padding: 0 ${contentHorizontalPadding}px;
+`;
+
+const AllCategories = () => {
+  const contentSettings = useEmojiPickerContentSettings();
+
+  // TODO: filter frequently used to not have zombie dom nodes
+  const [recentCategory] = useState(() => ({
+    id: "recent",
+    name: "Recent",
+    emojis: getFrequentlyUsed(contentSettings.perLine),
+  }));
+
+  const categories = useEmojiDataStoreSelector((store) => store.getCategories());
+
+  return (
+    <>
+      {recentCategory.emojis.length > 0 ? <EmojiPickerCategory category={recentCategory} /> : null}
+      {categories.map((category) => {
+        return <EmojiPickerCategory key={category.id} category={category} />;
+      })}
+    </>
+  );
+};
+
+export const EmojiPickerGrid = () => {
+  const foundEmojis = useFoundEmojis();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const searchCategory = useMemo(
+    () =>
+      foundEmojis
+        ? {
+            id: "search",
+            name: "Search",
+            emojis: foundEmojis.map(({id}) => id),
+          }
+        : null,
+    [foundEmojis]
+  );
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.scrollTop = 0;
+    }
+  }, [foundEmojis]);
+
+  return (
+    <div ref={ref} className={gridWrapperCss}>
+      {searchCategory ? <EmojiPickerCategory category={searchCategory} /> : <AllCategories />}
+    </div>
+  );
+};

package/src/emoji-picker/primitives/header.tsx

@@ -0,0 +1,11 @@
+import {css} from "@linaria/core";
+import {space} from "../../designSystem";
+import {contentHorizontalPadding} from "./layout";
+
+const pickerHeader = css`
+  padding: ${space.s}px ${contentHorizontalPadding}px;
+  position: relative;
+`;
+export const EmojiPickerHeader: React.FC<React.PropsWithChildren> = ({children}) => {
+  return <div className={pickerHeader}>{children}</div>;
+};

package/src/emoji-picker/primitives/layout.ts

@@ -0,0 +1,5 @@
+import {space} from "../../designSystem";
+
+export const emojiPadding = space.s;
+
+export const contentHorizontalPadding = space.l;

package/src/emoji-picker/primitives/root.tsx

@@ -0,0 +1,79 @@
+import {EmojiItem} from "@fibery/emoji-data";
+import {createContext} from "@fibery/react/src/create-context";
+import {useMemo} from "react";
+import {EmojiPickerSearchProvider} from "./search-provider";
+import {detectEmojiSupportLevel} from "../utils/emoji-support";
+import {EmojiSkinProvider} from "./skin-provider";
+import {add as addToFrequentlyUsed} from "../utils/frequently";
+
+type EmojiPickerCtx = {
+  version: number;
+  onEmojiSelect: (emoji: EmojiItem) => void;
+};
+const [Provider, useCtx] = createContext<EmojiPickerCtx>("EmojiPickerRoot");
+
+// TODO: replace with simple props to atomic components???
+const defaultI18N = {
+  search: "Search",
+  clear: "Clear", // Accessible label on "clear" button
+  notfound: "No Emoji Found",
+  skintext: "Select emoji skin tone",
+  categories: {
+    search: "Search Results",
+    recent: "Frequently Used",
+    people: "Smileys & People",
+    nature: "Animals & Nature",
+    foods: "Food & Drink",
+    activity: "Activity",
+    places: "Travel & Places",
+    objects: "Objects",
+    symbols: "Symbols",
+    flags: "Flags",
+    custom: "Custom",
+  },
+  categorieslabel: "Emoji categories", // Accessible title for the list of categories
+  skintones: {
+    1: "Default Skin Tone",
+    2: "Light Skin Tone",
+    3: "Medium-Light Skin Tone",
+    4: "Medium Skin Tone",
+    5: "Medium-Dark Skin Tone",
+    6: "Dark Skin Tone",
+  },
+};
+type I18N = typeof defaultI18N;
+
+const [I18NProvider, useI18N] = createContext<I18N>("EmojiPickerI18N");
+
+export const EmojiPickerRoot: React.FC<
+  React.PropsWithChildren<{
+    i18n?: Partial<I18N>;
+    onEmojiSelect: (emoji: EmojiItem) => void;
+  }>
+> = ({i18n, onEmojiSelect, children}) => {
+  const mergedI18N = useMemo(() => ({...defaultI18N, ...i18n}), [i18n]);
+
+  const emojiPickerCtx = useMemo(
+    () => ({
+      version: detectEmojiSupportLevel(),
+      onEmojiSelect(emoji: EmojiItem) {
+        onEmojiSelect(emoji);
+        addToFrequentlyUsed(emoji.id);
+      },
+    }),
+    [onEmojiSelect]
+  );
+
+  return (
+    <Provider value={emojiPickerCtx}>
+      <EmojiSkinProvider>
+        <EmojiPickerSearchProvider>
+          <I18NProvider value={mergedI18N}>{children}</I18NProvider>
+        </EmojiPickerSearchProvider>
+      </EmojiSkinProvider>
+    </Provider>
+  );
+};
+
+export const useEmojiPickerCtx = useCtx;
+export const useEmojiPickerI18N = useI18N;

package/src/emoji-picker/primitives/search-provider.tsx

@@ -0,0 +1,22 @@
+import {EmojiItem} from "@fibery/emoji-data";
+import {createContext} from "@fibery/react/src/create-context";
+import {useState} from "react";
+
+type SearchSetterCtx = (emojis: EmojiItem[] | null) => void;
+type SearchValueCtx = EmojiItem[] | null;
+
+const [SetterProvider, useSetterCtx] = createContext<SearchSetterCtx>("EmojiPickerSearchProvider");
+const [ValueProvider, useValueCtx] = createContext<SearchValueCtx>("EmojiPickerSearchValueProvider");
+
+export const EmojiPickerSearchProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const [found, setFound] = useState<EmojiItem[] | null>(null);
+
+  return (
+    <SetterProvider value={setFound}>
+      <ValueProvider value={found}>{children}</ValueProvider>
+    </SetterProvider>
+  );
+};
+
+export const useSetFoundEmojis = useSetterCtx;
+export const useFoundEmojis = useValueCtx;

package/src/emoji-picker/primitives/search.tsx

@@ -0,0 +1,133 @@
+import {css, cx} from "@linaria/core";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
+import {startTransition, useId, useRef} from "react";
+import Search from "../../icons/react/Search";
+import Close from "../../icons/react/Close";
+import {border, space, textStyles, themeVars} from "../../designSystem";
+import {useEmojiDataStore} from "../stores/emoji-data-store";
+import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
+import {IconButton} from "../../Button/icon-button";
+import {EmojiItem} from "@fibery/emoji-data";
+
+const searchCss = css`
+  ${textStyles.regular}
+  width: 100%;
+  background-color: ${themeVars.inputBgColor};
+  box-shadow: ${themeVars.inputBorderColor};
+  height: 32px;
+  border-radius: ${border.radius6}px;
+
+  display: flex;
+  align-items: center;
+  padding-left: ${space.l}px;
+  padding-right: ${space.m}px;
+  gap: ${space.xxs}px;
+
+  /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
+  & .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+`;
+
+const searchInputCss = css`
+  background-color: ${themeVars.inputBgColor};
+  border: 0;
+  outline: none;
+  width: 100%;
+
+  &,
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    /* remove webkit/blink styles for <input type="search">
+    * via https://stackoverflow.com/a/9422689 */
+    -webkit-appearance: none;
+  }
+`;
+
+const searchIconCss = css`
+  padding: ${space.xxs}px;
+`;
+
+export type EmojiPickerSearchProps = {
+  autoFocus?: boolean;
+
+  className?: string;
+};
+
+export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus, className}) => {
+  const ref = useRef<HTMLInputElement>(null);
+  const i18n = useEmojiPickerI18N();
+  const emojiPicker = useEmojiPickerCtx();
+  const emojiData = useEmojiDataStore();
+  const foundEmojis = useFoundEmojis();
+  const _setFoundEmojis = useSetFoundEmojis();
+
+  const setFoundEmojis = (emojis: EmojiItem[] | null) => {
+    // imroves responsiveness from input.
+    // TODO: better just implement a proper virtualization
+    startTransition(() => _setFoundEmojis(emojis));
+  };
+
+  const inputId = `emoji-picker-search-${useId()}`;
+
+  const clearSearch = () => {
+    setFoundEmojis(null);
+    if (ref.current) {
+      ref.current.value = "";
+      ref.current.focus();
+    }
+  };
+
+  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
+    if (e.key === "Enter" && foundEmojis && foundEmojis.length > 0) {
+      emojiPicker.onEmojiSelect(foundEmojis[0]);
+
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <section className={cx(searchCss, className)} aria-label={i18n.search}>
+      <input
+        ref={ref}
+        id={inputId}
+        className={searchInputCss}
+        type="search"
+        placeholder={i18n.search}
+        autoFocus={autoFocus}
+        onKeyDown={onKeyDown}
+        onChange={(e) => {
+          const value = e.target.value;
+
+          setFoundEmojis(value ? emojiData.search(value) : null);
+        }}
+      />
+      {/*
+       * Use a <label> in addition to the placeholder for accessibility, but place it off-screen
+       * http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
+       */}
+      <label className="sr-only" htmlFor={inputId}>
+        {i18n.search}
+      </label>
+
+      {foundEmojis ? (
+        <IconButton size="small" onClick={clearSearch}>
+          <Close iconSize={16} />
+        </IconButton>
+      ) : (
+        <span className={searchIconCss}>
+          <Search iconSize={16} />
+        </span>
+      )}
+    </section>
+  );
+};

package/src/emoji-picker/primitives/skin-provider.tsx

@@ -0,0 +1,27 @@
+import {useCallback, useState} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+import * as store from "../utils/store";
+import {EmojiSkin} from "@fibery/emoji-data";
+
+type Setter = (v: EmojiSkin) => void;
+
+const [SetterProvider, useSetterCtx] = createContext<Setter>("EmojiSkinSetterProvider");
+const [ValueProvider, useValueCtx] = createContext<EmojiSkin>("EmojiSkinProvider");
+
+export const EmojiSkinProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const [skin, setSkin] = useState(() => store.get("skin") || 1);
+
+  const setter = useCallback<Setter>((v) => {
+    store.update({skin: v});
+    setSkin(v);
+  }, []);
+
+  return (
+    <SetterProvider value={setter}>
+      <ValueProvider value={skin}>{children}</ValueProvider>
+    </SetterProvider>
+  );
+};
+
+export const useSetEmojiSkin = useSetterCtx;
+export const useEmojiSkin = useValueCtx;

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -0,0 +1,99 @@
+import {EmojiSkin} from "@fibery/emoji-data";
+import {css, cx} from "@linaria/core";
+import {useState} from "react";
+import {textStyles, themeVars} from "../../designSystem";
+import {Emoji} from "./emoji";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
+import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
+
+const skinToneWrapperCss = css`
+  background-color: ${themeVars.actionMenuBg};
+  font-size: 0;
+  line-height: 1.15;
+`;
+
+const skinToneSwatchCss = css`
+  display: inline-block;
+  vertical-align: middle;
+  overflow: hidden;
+  width: 0;
+  padding: 0;
+  transition-property: width, padding;
+  transition-duration: 0.125s;
+  transition-timing-function: ease-out;
+
+  &:nth-child(1) {
+    transition-delay: 0s;
+  }
+  &:nth-child(2) {
+    transition-delay: 0.03s;
+  }
+  &:nth-child(3) {
+    transition-delay: 0.06s;
+  }
+  &:nth-child(4) {
+    transition-delay: 0.09s;
+  }
+  &:nth-child(5) {
+    transition-delay: 0.12s;
+  }
+  &:nth-child(6) {
+    transition-delay: 0.15s;
+  }
+`;
+
+const expandedCss = css`
+  width: 32px;
+`;
+
+const openedSkinTextCss = css`
+  display: inline-block;
+  vertical-align: middle;
+  ${textStyles.small};
+
+  width: 98px;
+  color: ${themeVars.accentTextColor};
+  padding-left: 8px;
+`;
+
+export type EmojiPickerSkinToneProps = {
+  className?: string;
+};
+export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({className}) => {
+  const [opened, setOpened] = useState(false);
+  const emojiPickerCtx = useEmojiPickerCtx();
+  const i18n = useEmojiPickerI18N();
+  const setSkin = useSetEmojiSkin();
+  const skin = useEmojiSkin();
+
+  const skinToneNodes = [];
+
+  for (let skinTone = 1; skinTone <= 6; skinTone++) {
+    const selected = skinTone === skin;
+
+    skinToneNodes.push(
+      <span key={`skin-tone-${skinTone}`} className={cx(skinToneSwatchCss, (selected || opened) && expandedCss)}>
+        <span data-skin={skinTone}>
+          <Emoji
+            onClick={() => {
+              if (opened) {
+                setSkin(skinTone as EmojiSkin);
+              }
+              setOpened(!opened);
+            }}
+            emoji={`:hand::skin-tone-${skinTone}:`}
+            version={emojiPickerCtx.version}
+            size={20}
+          />
+        </span>
+      </span>
+    );
+  }
+
+  return (
+    <div className={cx(skinToneWrapperCss, className)}>
+      <div className={cx(opened && openedSkinTextCss)}>{i18n.skintext}</div>
+      {skinToneNodes}
+    </div>
+  );
+};

package/src/emoji-picker/stores/emoji-data-store.tsx

@@ -0,0 +1,50 @@
+import type {EmojiData} from "@fibery/emoji-data";
+import {PubSub, makePubSub} from "@fibery/helpers/utils/pub-sub";
+import {createContext} from "@fibery/react/src/create-context";
+import {useMemo, useSyncExternalStore} from "react";
+
+export type EmojiDataStore = EmojiData & {pubSub: PubSub};
+
+export const makeEmojiDataStore = (emojiData: EmojiData): EmojiDataStore => {
+  const pubSub = makePubSub();
+
+  return {
+    ...emojiData,
+
+    setCustom(...args: Parameters<EmojiData["setCustom"]>) {
+      emojiData.setCustom(...args);
+      pubSub.publish();
+    },
+    addCustomEmoji(...args: Parameters<EmojiData["addCustomEmoji"]>) {
+      emojiData.addCustomEmoji(...args);
+      pubSub.publish();
+    },
+    removeCustomEmoji(...args: Parameters<EmojiData["removeCustomEmoji"]>) {
+      emojiData.removeCustomEmoji(...args);
+      pubSub.publish();
+    },
+
+    pubSub,
+  };
+};
+
+// TODO: this should probably wrap the whole app so every component shares the same data
+const [DataStoreProvider, useDataStoreCtx] = createContext<EmojiDataStore>("EmojiDataStore");
+
+export const EmojiDataStoreProvider: React.FC<
+  React.PropsWithChildren<{
+    data: EmojiData;
+  }>
+> = ({data, children}) => {
+  const emojiDataStore = useMemo(() => makeEmojiDataStore(data), [data]);
+
+  return <DataStoreProvider value={emojiDataStore}>{children}</DataStoreProvider>;
+};
+
+export const useEmojiDataStore = useDataStoreCtx;
+
+export const useEmojiDataStoreSelector = <Snapshot,>(getter: (emojiDataStore: EmojiDataStore) => Snapshot) => {
+  const dataStore = useDataStoreCtx();
+
+  return useSyncExternalStore(dataStore.pubSub.subscribe, () => getter(dataStore));
+};

package/src/emoji-picker/utils/emoji-set.ts

@@ -0,0 +1,5 @@
+import {SpritesheetSet} from "@fibery/emoji-data";
+
+const isApple = () => /Mac|iPhone|iPad/.test(navigator.userAgent);
+
+export const getEmojiSet = (): SpritesheetSet => (isApple() ? "apple" : "twitter");

package/src/{emoji-mart → emoji-picker/utils}/emoji-support.ts

@@ -1,4 +1,4 @@
-// copied from https://github.com/nolanlawson/emoji-picker-element/
+// "hard-forked" from https://github.com/nolanlawson/emoji-picker-element/
 const versionsAndTestEmoji = {
   "🫸🏻": 15,
   "🫠": 14,
@@ -16,7 +16,6 @@ const versionsAndTestEmoji = {
 const FONT_FAMILY =
   '"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",' +
   '"Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif';
-const rIC = typeof requestIdleCallback === "function" ? requestIdleCallback : setTimeout;
 
 // only used in jest tests
 const simulateCanvasError = false;
@@ -89,14 +88,11 @@ function determineEmojiSupportLevel() {
 }
 
 // Check which emojis we know for sure aren't supported, based on Unicode version level
-let promise: Promise<number>;
+let version: number;
+
 export const detectEmojiSupportLevel = () => {
-  if (!promise) {
-    promise = new Promise((resolve) => {
-      rIC(
-        () => resolve(determineEmojiSupportLevel()) // delay so ideally this can run while IDB is first populating
-      );
-    });
+  if (!version) {
+    version = determineEmojiSupportLevel();
   }
-  return promise;
+  return version;
 };

package/src/emoji-picker/utils/frequently.ts

@@ -0,0 +1,82 @@
+import * as store from "./store";
+
+/** "hard-forked" as is from https://github.dev/missive/emoji-mart/blob/v3.0.1/src/utils/frequently.js */
+
+const DEFAULTS = [
+  "+1",
+  "grinning",
+  "kissing_heart",
+  "heart_eyes",
+  "laughing",
+  "stuck_out_tongue_winking_eye",
+  "sweat_smile",
+  "joy",
+  "scream",
+  "disappointed",
+  "unamused",
+  "weary",
+  "sob",
+  "sunglasses",
+  "heart",
+];
+
+let frequently: Record<string, number>;
+let defaults: Record<string, number> = {};
+let initialized = false;
+
+function init() {
+  initialized = true;
+  frequently = store.get("frequently");
+}
+
+export function add(emojiId: string) {
+  if (!initialized) {
+    init();
+  }
+
+  if (!frequently) {
+    frequently = defaults;
+  }
+
+  if (!frequently[emojiId]) {
+    frequently[emojiId] = 0;
+  }
+
+  frequently[emojiId] += 1;
+
+  store.set("last", emojiId);
+  store.set("frequently", frequently);
+}
+
+export function get(perLine: number) {
+  if (!initialized) {
+    init();
+  }
+  if (!frequently) {
+    defaults = {};
+
+    const result = [];
+
+    for (let i = 0; i < perLine; i++) {
+      defaults[DEFAULTS[i]] = perLine - i;
+      result.push(DEFAULTS[i]);
+    }
+
+    return result;
+  }
+
+  const quantity = perLine * 4;
+  const frequentlyKeys = Object.keys(frequently);
+
+  const sorted = frequentlyKeys.sort((a, b) => frequently[a] - frequently[b]).reverse();
+  const sliced = sorted.slice(0, quantity);
+
+  const last = store.get("last");
+
+  if (last && sliced.indexOf(last) === -1) {
+    sliced.pop();
+    sliced.push(last);
+  }
+
+  return sliced;
+}

package/src/emoji-picker/utils/load-emoji-data.ts

@@ -0,0 +1,4 @@
+export const loadEmojiData = async () => {
+  const data = await import("@fibery/emoji-data/data/all.json");
+  return data.default;
+};

package/src/emoji-picker/utils/store.ts

@@ -0,0 +1,40 @@
+/** "hard-forked" as is from https://github.dev/missive/emoji-mart/blob/v3.0.1/src/utils/store.js */
+
+const NAMESPACE = "emoji-mart";
+
+const isLocalStorageSupported = typeof window !== "undefined" && "localStorage" in window;
+
+export function update(state: {[key: string]: unknown}) {
+  for (const key in state) {
+    const value = state[key];
+    set(key, value);
+  }
+}
+
+export function set(key: string, value: unknown) {
+  if (!isLocalStorageSupported) {
+    return;
+  }
+  try {
+    window.localStorage[`${NAMESPACE}.${key}`] = JSON.stringify(value);
+  } catch (e) {
+    /* empty */
+  }
+}
+
+export function get(key: string) {
+  if (!isLocalStorageSupported) {
+    return undefined;
+  }
+  try {
+    const value = window.localStorage[`${NAMESPACE}.${key}`];
+
+    if (value) {
+      return JSON.parse(value);
+    }
+  } catch (e) {
+    return undefined;
+  }
+
+  return undefined;
+}

package/src/icons/ast/AddAfter.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AddAfter: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.25 3A2.25 2.25 0 0 0 2 5.25v9.5A2.25 2.25 0 0 0 4.25 17h3.5A2.25 2.25 0 0 0 10 14.75v-9.5A2.25 2.25 0 0 0 7.75 3h-3.5ZM3.5 5.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1-.75-.75v-9.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M15 7a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0v-1.5h-1.5a.75.75 0 0 1 0-1.5h1.5v-1.5A.75.75 0 0 1 15 7Z"},"children":[]}],"metadata":""}]},"name":"add-after"};
+
+export default AddAfter;

package/src/icons/ast/AddBefore.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AddBefore: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M12.25 3A2.25 2.25 0 0 0 10 5.25v9.5A2.25 2.25 0 0 0 12.25 17h3.5A2.25 2.25 0 0 0 18 14.75v-9.5A2.25 2.25 0 0 0 15.75 3h-3.5Zm-.75 2.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1-.75-.75v-9.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M5 7a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0v-1.5h-1.5a.75.75 0 0 1 0-1.5h1.5v-1.5A.75.75 0 0 1 5 7Z"},"children":[]}],"metadata":""}]},"name":"add-before"};
+
+export default AddBefore;