athameui 0.0.8 → 0.0.9-c

package/dist/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE;QACV,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;KAEnB,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChD,EAAE,CAAC,EAAE;QACH,MAAM,CAAC,EAAE,SAAS,CAAC;QACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;KAEtB,CAAC;CACH,CAAC;AAGF,eAAO,MAAM,MAAM,GAAI,uCAKpB,WAAW,qDAmBb,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE;QACV,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;KAEnB,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChD,EAAE,CAAC,EAAE;QACH,MAAM,CAAC,EAAE,SAAS,CAAC;QACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;KAEtB,CAAC;CACH,CAAC;AAGF,eAAO,MAAM,MAAM,GAAI,uCAKpB,WAAW,qDAmBb,CAAC"}

package/dist/components/Block/Block.d.ts

@@ -0,0 +1,13 @@
+import { CSSObject } from "@emotion/react";
+type BlockProps = {
+    children: React.ReactNode;
+    className?: {
+        block?: string | false | null | undefined;
+    };
+    sx?: {
+        block: CSSObject;
+    };
+};
+export declare const Block: ({ children, className, sx }: BlockProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Block.d.ts.map

package/dist/components/Block/Block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../components/Block/Block.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KAC3C,CAAC;IACF,EAAE,CAAC,EAAE;QACH,KAAK,EAAE,SAAS,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,6BAA6B,UAAU,qDAQ5D,CAAC"}

package/dist/components/Block/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Block";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Block/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/DropDown/Dropdown.d.ts

@@ -0,0 +1,14 @@
+import { CSSObject } from "@emotion/react";
+export type DropdownProps = {
+    children: React.ReactNode;
+    className?: {
+        dropdown?: string | false | null | undefined;
+    };
+    isOpen: boolean;
+    sx?: {
+        dropdown?: CSSObject;
+    };
+    onClose: () => void;
+};
+export declare const Dropdown: ({ children, className, isOpen, sx, onClose, }: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/DropDown/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../components/DropDown/Dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE;QACV,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9C,CAAC;IACF,MAAM,EAAE,OAAO,CAAC;IAChB,EAAE,CAAC,EAAE;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC;KACtB,CAAC;IAEF,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,+CAOtB,aAAa,qDAmCf,CAAC"}

package/dist/components/DropDown/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Dropdown";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DropDown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/DropDown/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/Layout/Main.d.ts

@@ -1,10 +1,14 @@
 import type { CSSObject } from "@emotion/react";
 type MainProps = {
     children?: React.ReactNode;
-    className?: string | {
+    className?: {
         main?: string | false | null | undefined;
-    } | false | undefined | null;
-    sx?: CSSObject;
+        mainContent?: string | false | null | undefined;
+    };
+    sx?: {
+        main?: CSSObject;
+        mainContent?: CSSObject;
+    };
 };
 export declare const Main: ({ children, className, sx }: MainProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Layout/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../components/Layout/Main.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EACN,MAAM,GACN;QACE,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KAC1C,GACD,KAAK,GACL,SAAS,GACT,IAAI,CAAC;IACT,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,6BAA6B,SAAS,qDAa1D,CAAC"}
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../components/Layout/Main.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE;QACV,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QACzC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KACjD,CAAC;IAEF,EAAE,CAAC,EAAE;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,WAAW,CAAC,EAAE,SAAS,CAAC;KACzB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,6BAA6B,SAAS,qDAoB1D,CAAC"}

package/dist/components/SlideOut/SlideOut.d.ts

@@ -0,0 +1,21 @@
+import { CSSObject } from "@emotion/react";
+export type SlideOutProps = {
+    children: React.ReactNode;
+    className?: {
+        slideOut?: string | false | null | undefined;
+        overlay?: string | false | null | undefined;
+        panel?: string | false | null | undefined;
+        closeButton?: string | false | null | undefined;
+    };
+    from?: "left" | "right";
+    isOpen?: boolean;
+    sx?: {
+        slideOut?: CSSObject;
+        overlay?: CSSObject;
+        panel?: CSSObject;
+        closeButton?: CSSObject;
+    };
+    onClose: () => void;
+};
+export declare const SlideOut: ({ children, className, from, isOpen, sx, onClose, }: SlideOutProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SlideOut.d.ts.map

package/dist/components/SlideOut/SlideOut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideOut.d.ts","sourceRoot":"","sources":["../../../components/SlideOut/SlideOut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAM3C,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE;QACV,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC7C,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC1C,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KACjD,CAAC;IACF,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,WAAW,CAAC,EAAE,SAAS,CAAC;KACzB,CAAC;IAEF,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,qDAQtB,aAAa,qDAoCf,CAAC"}

package/dist/components/SlideOut/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SlideOut";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SlideOut/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SlideOut/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/index.d.ts

@@ -1,7 +1,9 @@
 export * from "./Accordion";
 export * from "./Avatar";
+export * from "./Block";
 export * from "./Button";
 export * from "./ButtonGroup";
+export * from "./DropDown";
 export * from "./ContainerScalingText";
 export * from "./FormField";
 export * from "./FormLabel";
@@ -11,4 +13,5 @@ export * from "./Layout";
 export * from "./List";
 export * from "./Modal";
 export * from "./Search";
+export * from "./SlideOut";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}

package/dist/styles/breakpoints.d.ts

@@ -0,0 +1,13 @@
+export declare const breakpoints: {
+    readonly xs: 320;
+    readonly sm: 480;
+    readonly md: 620;
+    readonly lg: 768;
+    readonly xl: 896;
+    readonly "2xl": 1024;
+    readonly "3xl": 1280;
+    readonly "4xl": 1536;
+};
+export type Breakpoints = typeof breakpoints;
+export type Breakpoint = keyof typeof breakpoints;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/styles/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../styles/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;;;CASd,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC;AAC7C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC"}

package/dist/styles/breakpoints.ts

@@ -0,0 +1,13 @@
+export const breakpoints = {
+  xs: 320,
+  sm: 480,
+  md: 620,
+  lg: 768,
+  xl: 896,
+  "2xl": 1024,
+  "3xl": 1280,
+  "4xl": 1536,
+} as const;
+
+export type Breakpoints = typeof breakpoints;
+export type Breakpoint = keyof typeof breakpoints;

package/dist/styles/components/accordion.css

@@ -4,15 +4,15 @@
   .ath-accordion {
     display: flex;
     flex-direction: column;
-    font-size: var(--font-size-md);
     margin: 0;
     width: 100%;
     border-radius: 3px;
     overflow: hidden;
 
     .ath-accordion-item-heading {
+      white-space: normal;
       width: 100%;
-      padding: 12px 20px;
+      padding: 10px;
       background-color: transparent;
       border: none;
       display: flex;
@@ -71,7 +71,7 @@
     flex: 1;
     margin-right: 12px;
     font-weight: 600;
-    font-size: 18px;
+    font-size: var(--font-size-md);
   }
 
   .ath-accordion-item-icon {
@@ -91,8 +91,11 @@
   }
 
   .ath-accordion-content-wrapper {
-    padding: 14px 20px 14px 40px;
+    padding: 14px 20px 14px 20px;
+    /* padding: 14px 20px 14px 40px; */
     background-color: rgb(from var(--color-primary-50) r g b / 0.01);
-    font-size: var(--font-size-lg);
+    /* font-size: var(--font-size-lg); */
+    font-size: var(--font-size-md);
+    line-height: 1.5;
   }
 }

package/dist/styles/components/block.css

@@ -0,0 +1,8 @@
+@layer components {
+  .ath-block {
+    /* width: 100%; */
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 15px;
+  }
+}

package/dist/styles/components/button.css

@@ -116,7 +116,7 @@
   .ath-button-full {
     font-size: var(--font-size-lg);
     line-height: var(--font-size-xl);
-    width: 100%;
+    /* width: 100%; */
     justify-content: center;
     padding: 10px 40px;
 

package/dist/styles/components/dropdown.css

@@ -0,0 +1,18 @@
+@import "../tokens.css";
+
+@layer components {
+  .ath-dropdown {
+    display: none;
+    position: absolute;
+    z-index: 10;
+    background-color: var(--color-tertiary-100);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    min-width: 160px;
+  }
+
+  .ath-dropdown-open {
+    display: block;
+  }
+}

package/dist/styles/components/main.css

@@ -4,11 +4,20 @@
   .ath-main {
     overflow-x: hidden;
     position: relative;
-    padding: 32px;
+    padding: 25px 0;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     gap: 20px;
-    flex-grow: 1;
+    flex: 1;
+    min-height: 100vh;
+  }
+
+  .ath-main-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    max-width: 1200px;
+    padding: 0 15px;
   }
 }

package/dist/styles/components/slide-out.css

@@ -0,0 +1,69 @@
+@import "../tokens.css";
+
+@layer components {
+  .ath-slide-out {
+    display: flex;
+    overflow: hidden;
+  }
+
+  .ath-slide-out-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 100;
+    display: flex;
+    justify-content: flex-end;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease;
+  }
+
+  .ath-slide-out-overlay-open {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .ath-slide-out-panel {
+    position: fixed;
+    top: 0;
+    z-index: 100;
+    background-color: var(--color-primary-500);
+    width: 280px;
+    height: 100%;
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.1s ease-in-out;
+  }
+
+  .ath-slide-out-from-left {
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  .ath-slide-out-from-right {
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  .ath-slide-out-panel-open {
+    transform: translateX(0);
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .ath-slide-out-close-button {
+    padding: 0;
+    align-self: flex-end;
+    margin-bottom: 10px;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}

package/dist/styles/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./mediaQueries";
+export * from "./breakpoints";
 export * from "./tokens";
 //# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}

package/dist/styles/index.ts

@@ -1,2 +1,2 @@
-export * from "./mediaQueries";
+export * from "./breakpoints";
 export * from "./tokens";

package/dist/styles/theme.css

@@ -1,7 +1,9 @@
 @import "./components/accordion.css";
 @import "./components/avatar.css";
+@import "./components/block.css";
 @import "./components/button.css";
 @import "./components/button-group.css";
+@import "./components/dropdown.css";
 @import "./components/footer.css";
 @import "./components/form-input.css";
 @import "./components/form-label.css";
@@ -10,4 +12,5 @@
 @import "./components/main.css";
 @import "./components/modals.css";
 @import "./components/search.css";
+@import "./components/slide-out.css";
 @import "./tokens.css";

package/dist/styles/tokens.css

@@ -126,36 +126,46 @@
   --radius-lg: 8px;
 
   /* ----- Font Sizes ----- */
-  --font-size-xs: 0.625rem;
-  --font-size-sm: 0.75rem;
-  --font-size-md: 0.875rem;
-  --font-size-lg: 1rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 2rem;
-  --font-size-4xl: 2.5rem;
-  --font-size-5xl: 3rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+  --font-size-3xl: 2.5rem;
+  --font-size-4xl: 3rem;
+  --font-size-5xl: 3.5rem;
 
   /* ----- Screen Sizes ----- */
-  --screen-xs: 360px;
+  /* --screen-xs: 320px;
   --screen-sm: 480px;
-  --screen-md: 768px;
-  --screen-lg: 896px;
-  --screen-xl: 1024px;
-  --screen-2xl: 1280px;
-  --screen-3xl: 1536px;
+  --screen-md: 620px;
+  --screen-lg: 768px;
+  --screen-xl: 896px;
+  --screen-2xl: 1024px;
+  --screen-3xl: 1280px;
+  --screen-4xl: 1536px; */
+
+  --screen-xs: 320;
+  --screen-sm: 480;
+  --screen-md: 620;
+  --screen-lg: 768;
+  --screen-xl: 896;
+  --screen-2xl: 1024;
+  --screen-3xl: 1280;
+  --screen-4xl: 1536;
 
   /* ----- Media Queries ----- */
   /* Only useful for CSS-in-JS media query handling */
-  --media-min-xs: @media (min-width: 360px);
+  --media-min-xs: @media (min-width: 320px);
   --media-min-sm: @media (min-width: 480px);
-  --media-min-md: @media (min-width: 768px);
-  --media-min-lg: @media (min-width: 896px);
-  --media-min-xl: @media (min-width: 1024px);
-  --media-min-2xl: @media (min-width: 1280px);
-  --media-min-3xl: @media (min-width: 1536px);
+  --media-min-md: @media (min-width: 620px);
+  --media-min-lg: @media (min-width: 768px);
+  --media-min-xl: @media (min-width: 896px);
+  --media-min-2xl: @media (min-width: 1024px);
+  --media-min-3xl: @media (min-width: 1280px);
 
-  --media-max-xs: @media (max-width: 359px);
+  --media-max-xs: @media (max-width: 319px);
   --media-max-sm: @media (max-width: 479px);
   --media-max-md: @media (max-width: 767px);
   --media-max-lg: @media (max-width: 895px);
@@ -174,30 +184,39 @@
     -moz-osx-font-smoothing: grayscale;
     margin: 0;
   }
+
   h1 {
     color: var(--color-text-light);
-    font-size: var(--font-size-3xl);
+    font-size: var(--font-size-2xl);
+    /* font-size: var(--font-size-3xl); */
     font-weight: 300;
     margin: 0 0 1rem;
     line-height: normal;
+    @media (max-width: var(--screen-lg)) {
+      font-size: var(--font-size-4xl);
+    }
   }
+
   h2 {
     color: var(--color-primary-300);
     font-size: var(--font-size-lg);
     font-weight: 400;
     margin: 0;
   }
+
   h3 {
     color: var(--color-primary-200);
-    font-size: var(--font-size-xl);
+    font-size: var(--font-size-lg);
     font-weight: 500;
-    margin: 0;
+    margin: 0 0 0.5rem 0;
   }
+
   p {
     margin: 0;
     margin-bottom: 1rem;
     line-height: 1.5;
   }
+
   button {
     font-family: inherit;
     background-color: transparent;
@@ -207,6 +226,7 @@
       outline: none;
     }
   }
+
   a {
     text-decoration: none;
     color: inherit;

package/dist/styles/tokens.d.ts

@@ -146,15 +146,6 @@ export declare const tokens: {
         md: string;
         lg: string;
     };
-    screen: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-    };
     media: {
         min: {
             xs: string;
@@ -181,6 +172,5 @@ export type FontTokens = typeof tokens.font;
 export type ColorTokens = typeof tokens.color;
 export type PaddingTokens = typeof tokens.padding;
 export type RadiusTokens = typeof tokens.radius;
-export type ScreenTokens = typeof tokens.screen;
 export type MediaTokens = typeof tokens.media;
 //# sourceMappingURL=tokens.d.ts.map

package/dist/styles/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../styles/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiLlB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC;AAGnC,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,MAAM,CAAC,OAAO,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../styles/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKlB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC;AAGnC,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,MAAM,CAAC,OAAO,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC"}

package/dist/styles/tokens.ts

@@ -5,15 +5,15 @@ export const tokens = {
       serif: "Libre Baskerville, serif"
     },
     size: {
-      xs: "0.625rem",
-      sm: "0.75rem",
-      md: "0.875rem",
-      lg: "1rem",
-      xl: "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "2rem",
-      "4xl": "2.5rem",
-      "5xl": "3rem"
+      xs: "0.75rem",
+      sm: "0.875rem",
+      md: "1rem",
+      lg: "1.25rem",
+      xl: "1.5rem",
+      "2xl": "2rem",
+      "3xl": "2.5rem",
+      "4xl": "3rem",
+      "5xl": "3.5rem"
     }
   },
   color: {
@@ -146,27 +146,18 @@ export const tokens = {
     md: "5px",
     lg: "8px"
   },
-  screen: {
-    xs: "360px",
-    sm: "480px",
-    md: "768px",
-    lg: "896px",
-    xl: "1024px",
-    "2xl": "1280px",
-    "3xl": "1536px"
-  },
   media: {
     min: {
-      xs: "@media (min-width: 360px)",
+      xs: "@media (min-width: 320px)",
       sm: "@media (min-width: 480px)",
-      md: "@media (min-width: 768px)",
-      lg: "@media (min-width: 896px)",
-      xl: "@media (min-width: 1024px)",
-      "2xl": "@media (min-width: 1280px)",
-      "3xl": "@media (min-width: 1536px)"
+      md: "@media (min-width: 620px)",
+      lg: "@media (min-width: 768px)",
+      xl: "@media (min-width: 896px)",
+      "2xl": "@media (min-width: 1024px)",
+      "3xl": "@media (min-width: 1280px)"
     },
     max: {
-      xs: "@media (max-width: 359px)",
+      xs: "@media (max-width: 319px)",
       sm: "@media (max-width: 479px)",
       md: "@media (max-width: 767px)",
       lg: "@media (max-width: 895px)",
@@ -184,5 +175,4 @@ export type FontTokens = typeof tokens.font;
 export type ColorTokens = typeof tokens.color;
 export type PaddingTokens = typeof tokens.padding;
 export type RadiusTokens = typeof tokens.radius;
-export type ScreenTokens = typeof tokens.screen;
 export type MediaTokens = typeof tokens.media;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "athameui",
   "private": false,
-  "version": "0.0.8",
+  "version": "0.0.9-c",
   "type": "module",
   "main": "./dist/athameui.cjs",
   "module": "./dist/athameui.mjs",

package/styles/breakpoints.ts

@@ -0,0 +1,13 @@
+export const breakpoints = {
+  xs: 320,
+  sm: 480,
+  md: 620,
+  lg: 768,
+  xl: 896,
+  "2xl": 1024,
+  "3xl": 1280,
+  "4xl": 1536,
+} as const;
+
+export type Breakpoints = typeof breakpoints;
+export type Breakpoint = keyof typeof breakpoints;