feat: chipTabs, tabs

component-docs/activities/ActivityLayout.css.ts

@@ -0,0 +1,72 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "@seed-design/design-token";
+
+import { f } from "@/styles";
+
+export const wrapper = style([f.posAbsFull, f.flexColumn, f.rootLineHeight]);
+
+export const appBarLeft = style([
+  f.flex,
+  {
+    fontSize: "1.125rem",
+    fontWeight: 700,
+    marginLeft: ".5rem",
+  },
+]);
+
+export const appBarLeftIcon = style([
+  f.flexAlignCenter,
+  {
+    marginLeft: ".5rem",
+  },
+]);
+
+export const appBarRight = style([
+  {
+    display: "grid",
+    gridTemplateColumns: "1.5rem 1.5rem 1.5rem",
+    gap: "1rem",
+    marginRight: ".5rem",
+  },
+]);
+
+export const content = style({
+  flex: 1,
+});
+
+// BottomTab
+
+export const container = style([
+  f.grid,
+  {
+    backgroundColor: vars.$semantic.color.paperDefault,
+    gridTemplateColumns: "1.5rem 1.5rem 1.5rem 1.5rem 1.5rem",
+    justifyContent: "space-between",
+    padding: ".5rem 7.25% 0",
+    paddingBottom: ".375rem",
+    "@supports": {
+      "(padding-bottom: constant(safe-area-inset-bottom))": {
+        paddingBottom: "calc(.375rem + constant(safe-area-inset-bottom))",
+      },
+      "(padding-bottom: env(safe-area-inset-bottom))": {
+        paddingBottom: "calc(.375rem + env(safe-area-inset-bottom))",
+      },
+    },
+    boxShadow: `0 -1px 0 0 ${vars.$semantic.color.divider2}`,
+  },
+]);
+
+export const button = style([f.flexColumn, f.flexAlignCenter, f.resetButton, f.cursorPointer]);
+
+export const buttonIcon = style([
+  {
+    marginBottom: ".375rem",
+  },
+]);
+
+export const buttonLabel = style([
+  f.nowrap,
+  {
+    fontSize: ".75rem",
+  },
+]);

component-docs/activities/ActivityLayout.tsx

@@ -0,0 +1,92 @@
+import { AppScreen } from "@stackflow/plugin-basic-ui";
+
+import IconExpandMore from "@/assets/IconExpandMore";
+import IconSearch from "@/assets/IconSearch";
+import IconSettings from "@/assets/IconSettings";
+import IconBell from "@/assets/IconBell";
+import IconHome from "@/assets/IconHome";
+import IconMenu from "@/assets/IconMenu";
+import IconSell from "@/assets/IconSell";
+import IconChatting from "@/assets/IconChatting";
+import IconProfile from "@/assets/IconProfile";
+
+import * as css from "./ActivityLayout.css";
+
+type PropOf<T> = T extends React.ComponentType<infer U> ? U : never;
+
+interface LayoutProps {
+  appBar?: PropOf<typeof AppScreen>["appBar"];
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const appBarLeft = () => (
+    <div className={css.appBarLeft}>
+      Woolston
+      <div className={css.appBarLeftIcon}>
+        <IconExpandMore />
+      </div>
+    </div>
+  );
+
+  const appBarRight = () => (
+    <div className={css.appBarRight}>
+      <IconSearch />
+      <IconSettings />
+      <IconBell />
+    </div>
+  );
+
+  return (
+    <AppScreen
+      appBar={{
+        renderLeft: appBarLeft,
+        renderRight: appBarRight,
+      }}
+    >
+      <div className={css.wrapper}>
+        <div className={css.content}>{children}</div>
+        <BottomTab />
+      </div>
+    </AppScreen>
+  );
+};
+
+Layout.displayName = "Layout";
+
+export default Layout;
+
+const BottomTab: React.FC = () => (
+  <div className={css.container}>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconHome />
+      </div>
+      <div className={css.buttonLabel}>Home</div>
+    </button>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconMenu />
+      </div>
+      <div className={css.buttonLabel}>Categories</div>
+    </button>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconSell />
+      </div>
+      <div className={css.buttonLabel}>Sell</div>
+    </button>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconChatting />
+      </div>
+      <div className={css.buttonLabel}>Chats</div>
+    </button>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconProfile />
+      </div>
+      <div className={css.buttonLabel}>My</div>
+    </button>
+  </div>
+);

component-docs/activities/ChipTabsBasicActivity.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "@/seed-design/ui/chip-tabs";
 
 import type { ActivityComponentType } from "@stackflow/react/future";
+import Layout from "./ActivityLayout";
 
 declare module "@stackflow/config" {
   interface Register {
@@ -14,42 +14,27 @@ declare module "@stackflow/config" {
 const ChipTabsBasicActivity: ActivityComponentType<"ChipTabsBasic"> = () => {
   const [value, setValue] = React.useState("1");
 
-  const appBarLeft = () => <div>Left</div>;
-  const appBarRight = () => <div>Right</div>;
-
   const commonStyle = {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     backgroundColor: "#eeeeee",
-    height: "300px",
+    height: "100%",
   };
 
   return (
-    <AppScreen
-      appBar={{
-        renderLeft: appBarLeft,
-        renderRight: appBarRight,
-      }}
-    >
-      <div
-        style={{
-          height: "100%",
-          width: "100%",
-        }}
-      >
-        <ChipTabs defaultValue="1" value={value} onValueChange={(value) => setValue(value)}>
-          <ChipTabTriggerList>
-            <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
-            <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
-            <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
-          </ChipTabTriggerList>
-        </ChipTabs>
-        {value === "1" && <div style={commonStyle}>content 1</div>}
-        {value === "2" && <div style={commonStyle}>content 2</div>}
-        {value === "3" && <div style={commonStyle}>content 3</div>}
-      </div>
-    </AppScreen>
+    <Layout>
+      <ChipTabs defaultValue="1" value={value} onValueChange={(value) => setValue(value)}>
+        <ChipTabTriggerList>
+          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
+          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
+          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
+        </ChipTabTriggerList>
+      </ChipTabs>
+      {value === "1" && <div style={commonStyle}>content 1</div>}
+      {value === "2" && <div style={commonStyle}>content 2</div>}
+      {value === "3" && <div style={commonStyle}>content 3</div>}
+    </Layout>
   );
 };
 

component-docs/activities/TabsDisabledActivity.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 import {
-  Tabs as UITabs,
+  Tabs,
   TabTriggerList,
   TabContent,
   TabContentList,
@@ -39,7 +39,7 @@ const TabsDisabledActivity: ActivityComponentType<"TabsDisabled"> = () => {
           width: "100%",
         }}
       >
-        <UITabs defaultValue="1" isSwipeable layout="fill" size="medium">
+        <Tabs defaultValue="1" isSwipeable layout="fill" size="medium">
           <TabTriggerList>
             <TabTrigger value="1">라벨1</TabTrigger>
             <TabTrigger value="2" isDisabled>
@@ -58,7 +58,7 @@ const TabsDisabledActivity: ActivityComponentType<"TabsDisabled"> = () => {
               <div style={tabCommonStyle}>Content 3</div>
             </TabContent>
           </TabContentList>
-        </UITabs>
+        </Tabs>
       </div>
     </AppScreen>
   );

component-docs/assets/IconBell.tsx

@@ -0,0 +1,13 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 2.20001C8.24837 2.20001 5.2002 5.24818 5.2002 9.00001V13.7578L3.33456 16.5563C3.24695 16.6877 3.2002 16.8421 3.2002 17V18C3.2002 18.4418 3.55837 18.8 4.0002 18.8H9.20639L9.20088 18.933C9.20042 18.944 9.2002 18.9551 9.2002 18.9661C9.2002 20.5139 10.4457 21.8 12.0002 21.8C13.5546 21.8 14.8002 20.5139 14.8002 18.9661V18.8H20.0002C20.442 18.8 20.8002 18.4418 20.8002 18V17C20.8002 16.8421 20.7534 16.6877 20.6658 16.5563L18.8002 13.7578V9.00001C18.8002 5.24818 15.752 2.20001 12.0002 2.20001ZM13.2002 18.8H10.8078L10.8003 18.9807C10.808 19.6633 11.3592 20.2 12.0002 20.2C12.6457 20.2 13.2002 19.6557 13.2002 18.9661V18.8ZM19.172 17.2L17.3346 14.4438C17.2469 14.3124 17.2002 14.158 17.2002 14V9.00001C17.2002 6.13184 14.8684 3.80001 12.0002 3.80001C9.13202 3.80001 6.8002 6.13184 6.8002 9.00001V14C6.8002 14.158 6.75344 14.3124 6.66584 14.4438L4.82834 17.2H19.172Z" fill="currentColor"/>
+</svg>
+`;
+
+const IconBell: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconBell;

component-docs/assets/IconChatting.tsx

@@ -0,0 +1,13 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.9999 2.5C5.39908 2.5 1.3999 5.55166 1.3999 9.5C1.3999 11.978 2.92616 14.3081 5.21485 15.5752C4.77514 16.5035 4.38449 17.1353 4.09755 17.541C3.92887 17.7795 3.79588 17.94 3.70961 18.0369C3.66646 18.0854 3.63495 18.118 3.61646 18.1365C3.60721 18.1457 3.60121 18.1515 3.59862 18.1539L3.5976 18.1549C3.41425 18.3205 3.35113 18.5819 3.43907 18.8132C3.5276 19.0461 3.75079 19.2 3.9999 19.2L4.0011 19.2L4.05174 19.1991C4.08043 19.1983 4.1203 19.1967 4.1706 19.1936C4.2712 19.1876 4.41367 19.1758 4.59204 19.1529C4.94863 19.1071 5.44981 19.0164 6.04731 18.8372C6.89336 18.5834 7.93259 18.1518 9.02613 17.4189C10.3982 18.2145 12.0068 18.6619 13.7701 18.6977C15.2855 20.0146 16.7925 20.7135 17.941 21.0836C18.5365 21.2755 19.036 21.3791 19.3912 21.4349C19.5689 21.4628 19.7107 21.4788 19.8108 21.4879C19.8608 21.4925 19.9004 21.4953 19.9288 21.4971L19.98 21.4997C20.2262 21.5079 20.4524 21.3648 20.5504 21.1388C20.6481 20.9137 20.5985 20.6517 20.426 20.4775L20.4233 20.4747C20.4196 20.4708 20.4125 20.4633 20.4022 20.452C20.3815 20.4294 20.3481 20.3917 20.3031 20.3378C20.2132 20.2299 20.0772 20.0568 19.9062 19.8091C19.6177 19.3912 19.2289 18.7604 18.7925 17.8711C21.077 16.603 22.6 14.2753 22.6 11.8C22.6 8.60174 20.0224 6.06355 16.7461 5.17031C15.1456 3.53121 12.6744 2.5 9.9999 2.5ZM15.8935 6.02172C15.9326 6.0833 15.9829 6.13784 16.0424 6.182C16.9024 7.14098 17.3999 8.29692 17.3999 9.5C17.3999 12.5517 14.1991 15.3 9.9999 15.3C9.85168 15.3 9.7087 15.3549 9.59852 15.454C9.30311 15.7199 9.00797 15.958 8.71629 16.1712C8.67031 16.1958 8.62721 16.2266 8.58834 16.2633C7.52055 17.0201 6.50581 17.4468 5.70249 17.6878C5.59147 17.7211 5.48449 17.7509 5.38197 17.7775C5.72003 17.2426 6.12154 16.5134 6.54909 15.5416C6.68111 15.2416 6.54789 14.8911 6.2499 14.7546C4.03266 13.7383 2.5999 11.6336 2.5999 9.5C2.5999 6.44834 5.80073 3.7 9.9999 3.7C12.4503 3.7 14.5607 4.63585 15.8935 6.02172ZM10.0816 16.6242C10.131 16.5826 10.1805 16.5404 10.2299 16.4975C14.7332 16.3978 18.5999 13.3824 18.5999 9.5C18.5999 8.58474 18.385 7.71767 17.9975 6.92562C20.0647 7.96761 21.4 9.78512 21.4 11.8C21.4 13.9336 19.9672 16.0383 17.75 17.0546C17.4487 17.1926 17.3165 17.5488 17.4545 17.85C17.8824 18.7835 18.2833 19.5012 18.6191 20.0355C18.5197 20.0072 18.4162 19.976 18.309 19.9414C17.2508 19.6004 15.8287 18.9386 14.4014 17.654C14.2912 17.5549 14.1482 17.5 14 17.5C12.5423 17.5 11.2215 17.1886 10.0816 16.6242Z" fill="currentColor"/>
+</svg>
+`;
+
+const IconChatting: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconChatting;

component-docs/assets/IconExpandMore.tsx

@@ -0,0 +1,13 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.32739 6.07739C2.65283 5.75195 3.18047 5.75195 3.5059 6.07739L9.99998 12.5715L16.4941 6.07739C16.8195 5.75195 17.3471 5.75195 17.6726 6.07739C17.998 6.40283 17.998 6.93047 17.6726 7.2559L10.5892 14.3392C10.2638 14.6647 9.73616 14.6647 9.41072 14.3392L2.32739 7.2559C2.00195 6.93047 2.00195 6.40283 2.32739 6.07739Z" fill="currentColor"/>
+</svg>
+`;
+
+const IconExpandMore: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconExpandMore;

component-docs/assets/IconHome.tsx

@@ -0,0 +1,13 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4685 2.40202C11.7716 2.13259 12.2283 2.13259 12.5314 2.40202L21.5314 10.402C21.7022 10.5538 21.7999 10.7714 21.7999 11V21C21.7999 21.4418 21.4418 21.7999 21 21.7999H15C14.5581 21.7999 14.2 21.4418 14.2 21V16C14.2 14.7418 13.2581 13.8 12 13.8C10.7418 13.8 9.79995 14.7418 9.79995 16V20.9999C9.79995 21.4417 9.44178 21.7999 8.99995 21.7999H2.99995C2.55812 21.7999 2.19995 21.4418 2.19995 21V11C2.19995 10.7714 2.29767 10.5538 2.46846 10.402L11.4685 2.40202Z" fill="currentColor"/>
+</svg>
+`;
+
+const IconHome: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconHome;

component-docs/assets/IconMenu.tsx

@@ -0,0 +1,15 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.3999 4.9999C3.3999 4.66853 3.66853 4.3999 3.9999 4.3999H19.9999C20.3313 4.3999 20.5999 4.66853 20.5999 4.9999C20.5999 5.33127 20.3313 5.5999 19.9999 5.5999H3.9999C3.66853 5.5999 3.3999 5.33127 3.3999 4.9999Z" fill="currentColor"/>
+<path d="M3.3999 11.9999C3.3999 11.6685 3.66853 11.3999 3.9999 11.3999H19.9999C20.3313 11.3999 20.5999 11.6685 20.5999 11.9999C20.5999 12.3313 20.3313 12.5999 19.9999 12.5999H3.9999C3.66853 12.5999 3.3999 12.3313 3.3999 11.9999Z" fill="currentColor"/>
+<path d="M3.9999 18.3999C3.66853 18.3999 3.3999 18.6685 3.3999 18.9999C3.3999 19.3313 3.66853 19.5999 3.9999 19.5999H19.9999C20.3313 19.5999 20.5999 19.3313 20.5999 18.9999C20.5999 18.6685 20.3313 18.3999 19.9999 18.3999H3.9999Z" fill="currentColor"/>
+</svg>
+`;
+
+const IconMenu: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconMenu;

component-docs/assets/IconProfile.tsx

@@ -0,0 +1,14 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2.6001C8.90711 2.6001 6.3999 5.1073 6.3999 8.2001C6.3999 11.2929 8.90711 13.8001 11.9999 13.8001C15.0927 13.8001 17.5999 11.2929 17.5999 8.2001C17.5999 5.1073 15.0927 2.6001 11.9999 2.6001ZM7.5999 8.2001C7.5999 5.77004 9.56985 3.8001 11.9999 3.8001C14.43 3.8001 16.3999 5.77004 16.3999 8.2001C16.3999 10.6301 14.43 12.6001 11.9999 12.6001C9.56985 12.6001 7.5999 10.6301 7.5999 8.2001Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 14.6001C6.80842 14.6001 3.3999 17.4293 3.3999 21.2001C3.3999 21.5315 3.66853 21.8001 3.9999 21.8001H19.9999C20.3313 21.8001 20.5999 21.5315 20.5999 21.2001C20.5999 17.4293 17.1914 14.6001 11.9999 14.6001ZM11.9999 15.8001C16.469 15.8001 19.023 17.9948 19.3613 20.6001H4.63852C4.97684 17.9948 7.53085 15.8001 11.9999 15.8001Z" fill="currentColor"/>
+</svg>
+`;
+
+const IconProfile: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconProfile;

component-docs/assets/IconSearch.tsx

@@ -0,0 +1,13 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5002 2.19995C5.91623 2.19995 2.2002 5.91599 2.2002 10.5C2.2002 15.0839 5.91623 18.8 10.5002 18.8C12.5041 18.8 14.3421 18.0898 15.7763 16.9075L20.4345 21.5656C20.7469 21.8781 21.2535 21.8781 21.5659 21.5656C21.8783 21.2532 21.8783 20.7467 21.5659 20.4343L16.9077 15.7761C18.0901 14.3419 18.8002 12.5038 18.8002 10.5C18.8002 5.91599 15.0842 2.19995 10.5002 2.19995ZM3.8002 10.5C3.8002 6.79964 6.79989 3.79995 10.5002 3.79995C14.2005 3.79995 17.2002 6.79964 17.2002 10.5C17.2002 14.2003 14.2005 17.2 10.5002 17.2C6.79989 17.2 3.8002 14.2003 3.8002 10.5Z" fill="currentColor"/>
+</svg>
+`;
+
+const IconSearch: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconSearch;

component-docs/assets/IconSell.tsx

@@ -0,0 +1,15 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.5" y="1.5" width="21" height="21" rx="5.5" fill="#FF7E36" stroke="#FF7E36"/>
+<line x1="6.1" y1="11.9" x2="17.9" y2="11.9" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
+<line x1="11.9" y1="6.1" x2="11.9" y2="17.9" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
+`;
+
+const IconSell: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconSell;

component-docs/assets/IconSettings.tsx

@@ -0,0 +1,14 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33321 3.86652C10.9725 3.86652 12.346 5.00428 12.7071 6.53318H21.3332C21.775 6.53318 22.1332 6.89136 22.1332 7.33318C22.1332 7.77501 21.775 8.13318 21.3332 8.13318H12.7071C12.346 9.66209 10.9725 10.7998 9.33321 10.7998C7.69397 10.7998 6.32046 9.66209 5.95931 8.13318H2.66655C2.22472 8.13318 1.86655 7.77501 1.86655 7.33318C1.86655 6.89136 2.22472 6.53318 2.66655 6.53318H5.95931C6.32046 5.00428 7.69397 3.86652 9.33321 3.86652ZM9.33321 5.46652C8.30228 5.46652 7.46655 6.30225 7.46655 7.33318C7.46655 8.36411 8.30228 9.19985 9.33321 9.19985C10.3641 9.19985 11.1999 8.36411 11.1999 7.33318C11.1999 6.30225 10.3641 5.46652 9.33321 5.46652Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66655 17.4665H12.626C12.9871 18.9954 14.3606 20.1332 15.9999 20.1332C17.6391 20.1332 19.0126 18.9954 19.3738 17.4665H21.3332C21.775 17.4665 22.1332 17.1083 22.1332 16.6665C22.1332 16.2247 21.775 15.8665 21.3332 15.8665H19.3738C19.0126 14.3376 17.6391 13.1999 15.9999 13.1999C14.3606 13.1999 12.9871 14.3376 12.626 15.8665H2.66655C2.22472 15.8665 1.86655 16.2247 1.86655 16.6665C1.86655 17.1083 2.22472 17.4665 2.66655 17.4665ZM15.9999 14.7998C14.9689 14.7998 14.1332 15.6356 14.1332 16.6665C14.1332 17.6975 14.9689 18.5332 15.9999 18.5332C17.0308 18.5332 17.8665 17.6975 17.8665 16.6665C17.8665 15.6356 17.0308 14.7998 15.9999 14.7998Z" fill="currentColor"/>
+</svg>
+`;
+
+const IconSettings: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconSettings;