From d9e3304d387de25b2aeac791d971285824016f0d Mon Sep 17 00:00:00 2001
From: doryan04 <sagiev2015@yandex.ru>
Date: Mon, 29 Jan 2024 00:56:22 +0400
Subject: [PATCH] DONE: Dividers, Bages base TODO: Add number restrict for
 bages

---
 .idea/workspace.xml                           |  50 ++++----
 app/page.tsx                                  | 118 ++++++++++++++----
 src/primitive-components/badge/badge.tsx      |  19 +++
 src/primitive-components/divider/divider.tsx  |  16 +++
 .../material-you-components.tsx               |   2 +
 src/styles/badge.sass                         |  25 ++++
 src/styles/divider.sass                       |  28 +++++
 src/styles/generics.css                       |  72 +++++++++--
 src/styles/generics.css.map                   |   2 +-
 src/styles/generics.sass                      |  23 ++--
 10 files changed, 281 insertions(+), 74 deletions(-)
 create mode 100644 src/primitive-components/badge/badge.tsx
 create mode 100644 src/primitive-components/divider/divider.tsx
 create mode 100644 src/styles/badge.sass
 create mode 100644 src/styles/divider.sass

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1e85eb5..11ac7fc 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,17 +4,17 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc">
+    <list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="DONE: I forget, what I do">
+      <change afterPath="$PROJECT_DIR$/src/primitive-components/badge/badge.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/primitive-components/divider/divider.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/styles/badge.sass" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/styles/divider.sass" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/styles/icon-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/styles/icon-button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css.map" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/styles/icon-button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.sass" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/styles/text-field.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/styles/text-field.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css.map" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -180,22 +180,6 @@
       <workItem from="1706373080363" duration="1879000" />
       <workItem from="1706426744715" duration="17520000" />
     </task>
-    <task id="LOCAL-00019" summary="added customizable classname field for rippleArea component">
-      <option name="closed" value="true" />
-      <created>1704526583970</created>
-      <option name="number" value="00019" />
-      <option name="presentableId" value="LOCAL-00019" />
-      <option name="project" value="LOCAL" />
-      <updated>1704526583970</updated>
-    </task>
-    <task id="LOCAL-00020" summary="updated switch styles">
-      <option name="closed" value="true" />
-      <created>1704526600066</created>
-      <option name="number" value="00020" />
-      <option name="presentableId" value="LOCAL-00020" />
-      <option name="project" value="LOCAL" />
-      <updated>1704526600066</updated>
-    </task>
     <task id="LOCAL-00021" summary="updated checkbox component">
       <option name="closed" value="true" />
       <created>1704526612167</created>
@@ -572,7 +556,23 @@
       <option name="project" value="LOCAL" />
       <updated>1705955541881</updated>
     </task>
-    <option name="localTasksCounter" value="68" />
+    <task id="LOCAL-00068" summary="DONE: I forget, what I do">
+      <option name="closed" value="true" />
+      <created>1706461771129</created>
+      <option name="number" value="00068" />
+      <option name="presentableId" value="LOCAL-00068" />
+      <option name="project" value="LOCAL" />
+      <updated>1706461771129</updated>
+    </task>
+    <task id="LOCAL-00069" summary="DONE: I forget, what I do">
+      <option name="closed" value="true" />
+      <created>1706461783505</created>
+      <option name="number" value="00069" />
+      <option name="presentableId" value="LOCAL-00069" />
+      <option name="project" value="LOCAL" />
+      <updated>1706461783505</updated>
+    </task>
+    <option name="localTasksCounter" value="70" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -590,7 +590,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="added roboto fonts" />
     <MESSAGE value="added roboto fonts, fabs and fonts style sheets after sass compiling" />
     <MESSAGE value="added and updated some component (fabs, button, switch, radio, checkbox)" />
     <MESSAGE value="added sass style sheet file for fabs" />
@@ -615,6 +614,7 @@
     <MESSAGE value="TODO: complete supporting text&#10;ADDED: semi-complete filled text fields&#10;CHANGED: preview page and m3 color scheme" />
     <MESSAGE value="TODO: before icon&#10;ADDED: semi-complete filled text fields" />
     <MESSAGE value="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc" />
-    <option name="LAST_COMMIT_MESSAGE" value="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc" />
+    <MESSAGE value="DONE: I forget, what I do" />
+    <option name="LAST_COMMIT_MESSAGE" value="DONE: I forget, what I do" />
   </component>
 </project>
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index cc72f30..c48e141 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,5 @@
 import {Fragment} from "react";
-import Buttons from "./components/buttons"
-import Switches from "./components/switches";
-import Checkboxes from "./components/checkboxes";
-import Radios from "./components/radios";
-import Fabs from "./components/fabs";
-import IconButtons from "./components/icon-buttons";
-import {TextFields} from "./components/text-fields";
+import {Badge, Divider} from "../src/primitive-components/material-you-components";
 
 export default function Page() {
     return(
@@ -20,30 +14,102 @@ export default function Page() {
             }}>
                 <h1>Google Material You UI kit</h1>
                 <div style={{
-                        display: "flex",
-                        flexDirection:"column",
-                        gap:"20px"
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.5em",
+                    justifyContent: "center",
+                    alignItems: "center"
                 }}>
                     <div style={{
                         display: "flex",
-                        flexDirection:"row",
-                        gap:"20px"
+                        flexDirection: "row",
+                        gap: "0.5em",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        height: "150px",
+                        backgroundColor: "#00000010",
+                        padding: "10px",
+                        borderRadius: "15px"
                     }}>
-                        <div style={{
-                            display: "flex",
-                            flexDirection:"column",
-                            gap:"20px",
-                        }}>
-                            <Buttons/>
-                            <IconButtons/>
+                        <div>
+                            <div style={{
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: "0.5em",
+                                justifyContent: "center",
+                                alignItems: "center"
+                            }}>
+                                <div style={{
+                                    width: "24px",
+                                    aspectRatio: 1,
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center"
+                                }}>
+                                    <Badge/>
+                                </div>
+                                <Divider/>
+                                <div style={{
+                                    width: "24px",
+                                    aspectRatio: 1,
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center"
+                                }}>
+                                    <Badge>5</Badge>
+                                </div>
+                                <Divider/>
+                                <div style={{
+                                    width: "24px",
+                                    aspectRatio: 1,
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center"
+                                }}>
+                                    <Badge>32</Badge>
+                                </div>
+                            </div>
+                        </div>
+                        <Divider orientation={"vertical"} variant={"inset"}/>
+                        <div>
+                            <div style={{
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: "0.5em",
+                                justifyContent: "center",
+                                alignItems: "center"
+                            }}>
+                                <div style={{
+                                    width: "24px",
+                                    aspectRatio: 1,
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center"
+                                }}>
+                                    <Badge/>
+                                </div>
+                                <Divider variant={"inset"}/>
+                                <div style={{
+                                    width: "24px",
+                                    aspectRatio: 1,
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center"
+                                }}>
+                                    <Badge>5</Badge>
+                                </div>
+                                <Divider/>
+                                <div style={{
+                                    width: "24px",
+                                    aspectRatio: 1,
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center"
+                                }}>
+                                    <Badge>32</Badge>
+                                </div>
+                            </div>
                         </div>
-                        <Switches/>
-                        <Checkboxes/>
-                        <Radios/>
-                        <Fabs/>
-                    </div>
-                    <div>
-                        <TextFields/>
                     </div>
                 </div>
             </div>
diff --git a/src/primitive-components/badge/badge.tsx b/src/primitive-components/badge/badge.tsx
new file mode 100644
index 0000000..116d9a7
--- /dev/null
+++ b/src/primitive-components/badge/badge.tsx
@@ -0,0 +1,19 @@
+import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
+import {number, string} from "prop-types";
+
+const Badge = forwardRef(function Badge(props : PropsWithChildren<any>, ref : ForwardedRef<any>) {
+    return (
+        <span {...props}
+              className={`m3 m3-badge ${"" ?? props.className}`.trimEnd()}
+              ref={ref}>
+            {props.children && <span>{props.children}</span>}
+        </span>
+    );
+})
+
+Badge.propTypes = {
+    children: number,
+    className: string,
+}
+
+export {Badge};
\ No newline at end of file
diff --git a/src/primitive-components/divider/divider.tsx b/src/primitive-components/divider/divider.tsx
new file mode 100644
index 0000000..71de09b
--- /dev/null
+++ b/src/primitive-components/divider/divider.tsx
@@ -0,0 +1,16 @@
+import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
+
+interface DividerProps extends PropsWithChildren<any> {
+    orientation: "vertical" | "horizontal";
+    variant: "full-width" | "inset" | "middle-inset";
+}
+
+const Divider = forwardRef(function Divider({orientation, variant, ...props} : DividerProps, ref : ForwardedRef<any>) {
+    return (
+        <hr {...props}
+            ref={ref}
+            className={`m3 m3-divider ${orientation ?? "horizontal"} ${variant ?? "full-width"}`.trimEnd()}/>
+    );
+})
+
+export {Divider};
\ No newline at end of file
diff --git a/src/primitive-components/material-you-components.tsx b/src/primitive-components/material-you-components.tsx
index 58b315d..217babb 100644
--- a/src/primitive-components/material-you-components.tsx
+++ b/src/primitive-components/material-you-components.tsx
@@ -2,8 +2,10 @@
 
 export {FAB} from "./fab/fab";
 export {Radio} from "./radio/radio";
+export {Badge} from "./badge/badge";
 export {Switch} from "./switch/switch";
 export {Button} from "./button/button";
+export {Divider} from "./divider/divider";
 export {Checkbox} from "./checkbox/checkbox";
 export {RippleArea} from "./ripple/ripple-area";
 export {Ripples, Ripple} from "./ripple/ripple";
diff --git a/src/styles/badge.sass b/src/styles/badge.sass
new file mode 100644
index 0000000..1f3a0a3
--- /dev/null
+++ b/src/styles/badge.sass
@@ -0,0 +1,25 @@
+span.m3.m3-badge
+    position: absolute
+    background-color: var(--md-sys-color-error)
+    border-radius: 8px
+    display: flex
+    align-items: center
+    justify-content: center
+    min-width: 6px
+    min-height: 6px
+
+    & > span
+        color: var(--md-sys-color-on-error)
+        font-size: 7pt
+        line-height: var(--md-sys-typescale-label-small-line-height)
+        font-weight: var(--md-sys-typescale-label-small-font-weight)
+        letter-spacing: var(--md-sys-typescale-label-small-letter-spacing)
+        text-align: center
+        min-width: 8px
+        padding: 0 4px
+        display: flex
+        justify-content: center
+        align-items: center
+        min-height: 16px
+        width: auto
+
diff --git a/src/styles/divider.sass b/src/styles/divider.sass
new file mode 100644
index 0000000..920dbea
--- /dev/null
+++ b/src/styles/divider.sass
@@ -0,0 +1,28 @@
+hr.m3.m3-divider
+    display: flex
+    align-items: end
+    box-sizing: border-box
+    border: none
+    outline: 0.5px solid var(--md-sys-color-outline-variant)
+    margin: 0
+
+    &.vertical
+        writing-mode: tb-rl
+        &, &.vertical.full-width
+            height: 100%
+        &.inset
+            align-self: end
+            height: calc(100% - 16px)
+        &.middle-inset
+            height: calc(100% - (2 * 16px))
+
+    &.horizontal
+        box-sizing: border-box
+        &, &.horizontal.full-width
+            width: 100%
+        &.inset
+            align-self: end
+            width: calc(100% - 16px)
+        &.middle-inset
+            width: calc(100% - (2 * 16px))
+
diff --git a/src/styles/generics.css b/src/styles/generics.css
index 4801e54..34fdfa6 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -197,6 +197,32 @@ input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-lay
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
 
+span.m3.m3-badge {
+  position: absolute;
+  background-color: var(--md-sys-color-error);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 6px;
+  min-height: 6px;
+}
+span.m3.m3-badge > span {
+  color: var(--md-sys-color-on-error);
+  font-size: 7pt;
+  line-height: var(--md-sys-typescale-label-small-line-height);
+  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
+  text-align: center;
+  min-width: 8px;
+  padding: 0 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 16px;
+  width: auto;
+}
+
 @font-face {
   font-family: Material-Icons-Regular;
   src: url("./font/MaterialIcons-Regular.ttf");
@@ -567,6 +593,41 @@ input[type=checkbox].m3.m3-switch:disabled:checked::before {
     width: 16px;
   }
 }
+hr.m3.m3-divider {
+  display: flex;
+  align-items: end;
+  box-sizing: border-box;
+  border: none;
+  outline: 0.5px solid var(--md-sys-color-outline-variant);
+  margin: 0;
+}
+hr.m3.m3-divider.vertical {
+  writing-mode: tb-rl;
+}
+hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.vertical.full-width {
+  height: 100%;
+}
+hr.m3.m3-divider.vertical.inset {
+  align-self: end;
+  height: calc(100% - 16px);
+}
+hr.m3.m3-divider.vertical.middle-inset {
+  height: calc(100% - 32px);
+}
+hr.m3.m3-divider.horizontal {
+  box-sizing: border-box;
+}
+hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.horizontal.full-width {
+  width: 100%;
+}
+hr.m3.m3-divider.horizontal.inset {
+  align-self: end;
+  width: calc(100% - 16px);
+}
+hr.m3.m3-divider.horizontal.middle-inset {
+  width: calc(100% - 32px);
+}
+
 label.m3.m3-checkbox-label {
   display: flex;
   position: relative;
@@ -1025,16 +1086,7 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
 html {
   font-family: Roboto, serif;
   color: var(--md-sys-color-on-surface);
-}
-@media (prefers-color-scheme: light) {
-  html {
-    background-color: white;
-  }
-}
-@media (prefers-color-scheme: dark) {
-  html {
-    background-color: black;
-  }
+  background-color: var(--md-sys-color-surface-container);
 }
 
 .m3 {
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index 2f3f725..4832fc5 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AASQ;AACA;AACA;AACA;AACA;ACXR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EHHI;EGKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EHaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EHpCA;;AGuCA;EHjCA;;AGoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EHnDA;;AGsDA;EHhDA;;AGmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;AClIR;ENDI;EACA;EACA;EACA;EACA;;AMDA;ENIA;EACA;EACA;EACA;EACA;;;AMLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AVjIZ;EACE;EACA;;AACA;EAHF;IAII;;;AACF;EALF;IAMI;;;;AAEJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJHI;EIKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJpCA;;AIuCA;EJjCA;;AIoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJnDA;;AIsDA;EJhDA;;AImDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAER;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACxBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
diff --git a/src/styles/generics.sass b/src/styles/generics.sass
index 8579ba4..ebff8a0 100644
--- a/src/styles/generics.sass
+++ b/src/styles/generics.sass
@@ -1,9 +1,11 @@
 @import "fabs"
 @import "radio"
+@import "badge"
 @import "fonts"
 @import "button"
 @import "ripple"
 @import "swtich"
+@import "divider"
 @import "checkbox"
 @import "text-field"
 @import "icon-button"
@@ -14,20 +16,17 @@
 @import "./themes/theme.light.css" (prefers-color-scheme: light)
 
 html
-  font-family: Roboto, serif
-  color: var(--md-sys-color-on-surface)
-  @media (prefers-color-scheme: light)
-    background-color: white
-  @media (prefers-color-scheme: dark)
-    background-color: black
+    font-family: Roboto, serif
+    color: var(--md-sys-color-on-surface)
+    background-color: var(--md-sys-color-surface-container)
 
 .m3
-  user-select: none
+    user-select: none
 
 .m3.m3-wrapper
-  background-color: var(--md-sys-color-surface)
-  border-radius: 25px
-  padding: 25px
-  width: max-content
-  height: min-content
+    background-color: var(--md-sys-color-surface)
+    border-radius: 25px
+    padding: 25px
+    width: max-content
+    height: min-content