sheerly 0.0.3 → 0.0.5

package/lib/sheet.d.ts

@@ -15,15 +15,15 @@ export interface SheetProps extends DialogHTMLAttributes<HTMLDialogElement> {
  *   <SheetBody>…</SheetBody>
  * </Sheet>
  */
-export declare function Sheet({ className, ...props }: SheetProps): import("react").JSX.Element;
+export declare function Sheet({ className, ...props }: SheetProps): import('react').JSX.Element;
 export type SheetHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
-export declare function SheetHeader<T extends ElementType = 'div'>({ as, className, ...props }: SheetHeaderProps<T>): import("react").JSX.Element;
+export declare function SheetHeader<T extends ElementType = 'div'>({ as, className, ...props }: SheetHeaderProps<T>): import('react').JSX.Element;
 export type SheetTitleProps<T extends ElementType = 'h3'> = PolymorphicProps<T>;
-export declare function SheetTitle<T extends ElementType = 'h3'>({ as, className, ...props }: SheetTitleProps<T>): import("react").JSX.Element;
+export declare function SheetTitle<T extends ElementType = 'h3'>({ as, className, ...props }: SheetTitleProps<T>): import('react').JSX.Element;
 export type SheetDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<T>;
-export declare function SheetDescription<T extends ElementType = 'p'>({ as, className, ...props }: SheetDescriptionProps<T>): import("react").JSX.Element;
+export declare function SheetDescription<T extends ElementType = 'p'>({ as, className, ...props }: SheetDescriptionProps<T>): import('react').JSX.Element;
 export type SheetBodyProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
-export declare function SheetBody<T extends ElementType = 'div'>({ as, className, ...props }: SheetBodyProps<T>): import("react").JSX.Element;
+export declare function SheetBody<T extends ElementType = 'div'>({ as, className, ...props }: SheetBodyProps<T>): import('react').JSX.Element;
 export type SheetFooterProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
-export declare function SheetFooter<T extends ElementType = 'div'>({ as, className, ...props }: SheetFooterProps<T>): import("react").JSX.Element;
-export declare function SheetClose({ className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export declare function SheetFooter<T extends ElementType = 'div'>({ as, className, ...props }: SheetFooterProps<T>): import('react').JSX.Element;
+export declare function SheetClose({ className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): import('react').JSX.Element;

package/lib/skeleton.d.ts

@@ -9,4 +9,4 @@ export type SkeletonProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
  * @example
  * <Skeleton style={{ width: 200, height: 20, borderRadius: 6 }} />
  */
-export declare function Skeleton<T extends ElementType = 'div'>({ as, className, ...props }: SkeletonProps<T>): import("react").JSX.Element;
+export declare function Skeleton<T extends ElementType = 'div'>({ as, className, ...props }: SkeletonProps<T>): import('react').JSX.Element;

package/lib/slider.d.ts

@@ -6,4 +6,4 @@ export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
  * @example
  * <Slider min={0} max={100} defaultValue={50} />
  */
-export declare function Slider({ className, ...props }: SliderProps): import("react").JSX.Element;
+export declare function Slider({ className, ...props }: SliderProps): import('react').JSX.Element;

package/lib/spinner.d.ts

@@ -13,4 +13,4 @@ export type SpinnerProps<T extends ElementType = 'span'> = PolymorphicProps<T, {
  * @example
  * <Spinner data-size="lg" />
  */
-export declare function Spinner<T extends ElementType = 'span'>({ as, className, children, ...props }: SpinnerProps<T>): import("react").JSX.Element;
+export declare function Spinner<T extends ElementType = 'span'>({ as, className, children, ...props }: SpinnerProps<T>): import('react').JSX.Element;

package/lib/switch.d.ts

@@ -8,4 +8,4 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * @example
  * <Switch defaultChecked />
  */
-export declare function Switch({ className, ...props }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ className, ...props }: SwitchProps): import('react').JSX.Element;

package/lib/table.css

@@ -1 +1 @@
-.sheerly-table-container{width:100%;overflow-x:auto}.sheerly-table{caption-side:bottom;border-collapse:collapse;width:100%;color:var(--sheerly-foreground);font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;line-height:20px}.sheerly-table caption{color:var(--sheerly-muted-foreground);margin-top:16px;font-size:14px;line-height:20px}.sheerly-table thead tr{border-bottom:1px solid var(--sheerly-border)}.sheerly-table th{text-align:left;vertical-align:middle;white-space:nowrap;height:40px;color:var(--sheerly-foreground);padding:0 8px;font-weight:500}.sheerly-table tbody tr{border-bottom:1px solid var(--sheerly-border);transition:background-color .1s}.sheerly-table tbody tr:last-child{border-bottom:none}.sheerly-table tbody tr:hover{background-color:var(--sheerly-accent)}.sheerly-table tbody tr[data-state=selected]{background-color:var(--sheerly-muted)}.sheerly-table td{vertical-align:middle;white-space:nowrap;padding:8px}.sheerly-table tfoot{border-top:1px solid var(--sheerly-border);background-color:var(--sheerly-accent);font-weight:500}.sheerly-table tfoot tr:last-child{border-bottom:none}.sheerly-table tfoot td,.sheerly-table tfoot th{vertical-align:middle;padding:8px}
+.sheerly-table-container{width:100%;overflow-x:auto}.sheerly-table{caption-side:bottom;border-collapse:collapse;width:100%;font-family:var(--sheerly-font-sans);color:var(--sheerly-foreground);font-size:14px;line-height:20px}.sheerly-table caption{color:var(--sheerly-muted-foreground);margin-top:16px;font-size:14px;line-height:20px}.sheerly-table thead tr{border-bottom:1px solid var(--sheerly-border)}.sheerly-table th{text-align:left;vertical-align:middle;white-space:nowrap;height:40px;color:var(--sheerly-foreground);padding:0 8px;font-weight:500}.sheerly-table tbody tr{border-bottom:1px solid var(--sheerly-border);transition:background-color .1s}.sheerly-table tbody tr:last-child{border-bottom:none}.sheerly-table tbody tr:hover{background-color:var(--sheerly-accent)}.sheerly-table tbody tr[data-state=selected]{background-color:var(--sheerly-muted)}.sheerly-table td{vertical-align:middle;white-space:nowrap;padding:8px}.sheerly-table tfoot{border-top:1px solid var(--sheerly-border);background-color:var(--sheerly-accent);font-weight:500}.sheerly-table tfoot tr:last-child{border-bottom:none}.sheerly-table tfoot td,.sheerly-table tfoot th{vertical-align:middle;padding:8px}

package/lib/table.d.ts

@@ -1,7 +1,7 @@
 import { ElementType, TableHTMLAttributes } from 'react';
 import { PolymorphicProps } from './utils/polymorphic';
 export type TableContainerProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
-export declare function TableContainer<T extends ElementType = 'div'>({ as, className, ...props }: TableContainerProps<T>): import("react").JSX.Element;
+export declare function TableContainer<T extends ElementType = 'div'>({ as, className, ...props }: TableContainerProps<T>): import('react').JSX.Element;
 export type TableProps = TableHTMLAttributes<HTMLTableElement>;
 /**
  * A data table. Use semantic HTML inside (no classes on inner elements); wrap
@@ -13,4 +13,4 @@ export type TableProps = TableHTMLAttributes<HTMLTableElement>;
  *   <tbody><tr><td>Ada</td></tr></tbody>
  * </Table>
  */
-export declare function Table({ className, ...props }: TableProps): import("react").JSX.Element;
+export declare function Table({ className, ...props }: TableProps): import('react').JSX.Element;

package/lib/tabs.css

@@ -1 +1 @@
-.sheerly-tabs{flex-direction:column;gap:8px;display:flex}.sheerly-tabs-list{background-color:var(--sheerly-muted);border-radius:8px;justify-content:center;align-items:center;width:fit-content;height:36px;padding:3px;display:inline-flex}.sheerly-tabs-list[data-variant=line]{border-bottom:1px solid var(--sheerly-border);background-color:#0000;border-radius:0;gap:4px;height:auto;padding:0}.sheerly-tabs-trigger{white-space:nowrap;color:var(--sheerly-muted-foreground);cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:6px;outline:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:4px 8px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:500;line-height:20px;transition:color .15s,background-color .15s;display:inline-flex;position:relative}.sheerly-tabs-trigger:hover{color:var(--sheerly-foreground)}.sheerly-tabs-trigger:focus-visible{box-shadow:var(--sheerly-focus-ring)}.sheerly-tabs-trigger:disabled{pointer-events:none;opacity:.5}.sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-trigger[data-state=active]{background-color:var(--sheerly-background);color:var(--sheerly-foreground);box-shadow:0 1px 2px #0000000d}.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger{box-shadow:none;border-radius:0;padding:8px 12px}.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[data-state=active]{box-shadow:none;background-color:#0000}:is(.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[data-state=active]):after{content:"";background-color:var(--sheerly-foreground);height:2px;position:absolute;bottom:-1px;left:0;right:0}.sheerly-tabs-trigger svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}.sheerly-tabs-content{outline:none;flex:1}.sheerly-tabs-content[hidden]{display:none}
+.sheerly-tabs{flex-direction:column;gap:8px;display:flex}.sheerly-tabs-list{background-color:var(--sheerly-muted);border-radius:8px;justify-content:center;align-items:center;width:fit-content;height:36px;padding:3px;display:inline-flex}.sheerly-tabs-list[data-variant=line]{border-bottom:1px solid var(--sheerly-border);background-color:#0000;border-radius:0;gap:4px;height:auto;padding:0}.sheerly-tabs-trigger{font-family:var(--sheerly-font-sans);white-space:nowrap;color:var(--sheerly-muted-foreground);cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:6px;outline:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:4px 8px;font-size:14px;font-weight:500;line-height:20px;transition:color .15s,background-color .15s;display:inline-flex;position:relative}.sheerly-tabs-trigger:hover{color:var(--sheerly-foreground)}.sheerly-tabs-trigger:focus-visible{box-shadow:var(--sheerly-focus-ring)}.sheerly-tabs-trigger:disabled{pointer-events:none;opacity:.5}.sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-trigger[data-state=active]{background-color:var(--sheerly-background);color:var(--sheerly-foreground);box-shadow:0 1px 2px #0000000d}.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger{box-shadow:none;border-radius:0;padding:8px 12px}.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[data-state=active]{box-shadow:none;background-color:#0000}:is(.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[data-state=active]):after{content:"";background-color:var(--sheerly-foreground);height:2px;position:absolute;bottom:-1px;left:0;right:0}.sheerly-tabs-trigger svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}.sheerly-tabs-content{outline:none;flex:1}.sheerly-tabs-content[hidden]{display:none}

package/lib/tabs.d.ts

@@ -17,23 +17,23 @@ export type TabsProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
  *   <TabsContent hidden>…</TabsContent>
  * </Tabs>
  */
-export declare function Tabs<T extends ElementType = 'div'>({ as, className, ...props }: TabsProps<T>): import("react").JSX.Element;
+export declare function Tabs<T extends ElementType = 'div'>({ as, className, ...props }: TabsProps<T>): import('react').JSX.Element;
 export type TabsListProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-variant'?: 'line';
 }>;
 /**
  * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
  */
-export declare function TabsList<T extends ElementType = 'div'>({ as, className, ...props }: TabsListProps<T>): import("react").JSX.Element;
+export declare function TabsList<T extends ElementType = 'div'>({ as, className, ...props }: TabsListProps<T>): import('react').JSX.Element;
 export type TabsTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<T, {
     'data-state'?: 'active';
 }>;
 /**
  * Polymorphic: pass `as` to change the rendered tag (defaults to `button`).
  */
-export declare function TabsTrigger<T extends ElementType = 'button'>({ as, className, ...props }: TabsTriggerProps<T>): import("react").JSX.Element;
+export declare function TabsTrigger<T extends ElementType = 'button'>({ as, className, ...props }: TabsTriggerProps<T>): import('react').JSX.Element;
 export type TabsContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
 /**
  * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
  */
-export declare function TabsContent<T extends ElementType = 'div'>({ as, className, ...props }: TabsContentProps<T>): import("react").JSX.Element;
+export declare function TabsContent<T extends ElementType = 'div'>({ as, className, ...props }: TabsContentProps<T>): import('react').JSX.Element;

package/lib/textarea.css

@@ -1 +1 @@
-.sheerly-textarea{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);width:100%;min-height:64px;color:var(--sheerly-foreground);resize:vertical;field-sizing:content;background-color:#0000;outline:none;padding:6px 10px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;line-height:20px;transition:border-color .15s,box-shadow .15s;display:block}.sheerly-textarea::placeholder{color:var(--sheerly-muted-foreground)}.sheerly-textarea:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-textarea:disabled{cursor:not-allowed;opacity:.5}.sheerly-textarea[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}
+.sheerly-textarea{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);width:100%;min-height:64px;font-family:var(--sheerly-font-sans);color:var(--sheerly-foreground);resize:vertical;field-sizing:content;background-color:#0000;outline:none;padding:6px 10px;font-size:14px;font-weight:400;line-height:20px;transition:border-color .15s,box-shadow .15s;display:block}.sheerly-textarea::placeholder{color:var(--sheerly-muted-foreground)}.sheerly-textarea:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-textarea:disabled{cursor:not-allowed;opacity:.5}.sheerly-textarea[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}

package/lib/textarea.d.ts

@@ -6,4 +6,4 @@ export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
  * @example
  * <Textarea placeholder="Type your message…" />
  */
-export declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function Textarea({ className, ...props }: TextareaProps): import('react').JSX.Element;

package/lib/toggle.css

@@ -1 +1 @@
-.sheerly-toggle{border-radius:var(--sheerly-radius-lg);white-space:nowrap;color:var(--sheerly-foreground);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:4px;min-width:32px;height:32px;padding:0 10px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:500;line-height:20px;transition:all .15s;display:inline-flex}.sheerly-toggle>input[type=checkbox]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sheerly-toggle:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-toggle:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-toggle:has(>input:focus-visible){border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-toggle:disabled{pointer-events:none;opacity:.5}.sheerly-toggle:has(>input:disabled){pointer-events:none;opacity:.5}.sheerly-toggle[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-toggle[aria-pressed=true],.sheerly-toggle[data-state=on]{background-color:var(--sheerly-muted)}.sheerly-toggle:has(>input:checked){background-color:var(--sheerly-muted)}.sheerly-toggle[data-variant=default]{background-color:#0000}.sheerly-toggle[data-variant=outline]{border-color:var(--sheerly-input);background-color:#0000}.sheerly-toggle[data-variant=outline]:hover{background-color:var(--sheerly-muted)}.sheerly-toggle[data-size=default]{min-width:32px;height:32px;padding:0 10px}.sheerly-toggle[data-size=sm]{border-radius:min(var(--sheerly-radius-md), 12px);min-width:28px;height:28px;padding:0 10px;font-size:12.8px}.sheerly-toggle[data-size=sm] svg{width:14px;height:14px}.sheerly-toggle[data-size=lg]{min-width:36px;height:36px;padding:0 10px}.sheerly-toggle:has([data-icon=inline-start]){padding-inline-start:8px}.sheerly-toggle:has([data-icon=inline-end]){padding-inline-end:8px}.sheerly-toggle[data-size=sm]:has([data-icon=inline-start]){padding-inline-start:6px}.sheerly-toggle[data-size=sm]:has([data-icon=inline-end]){padding-inline-end:6px}.sheerly-toggle svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}
+.sheerly-toggle{border-radius:var(--sheerly-radius-lg);font-family:var(--sheerly-font-sans);white-space:nowrap;color:var(--sheerly-foreground);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:4px;min-width:32px;height:32px;padding:0 10px;font-size:14px;font-weight:500;line-height:20px;transition:all .15s;display:inline-flex}.sheerly-toggle>input[type=checkbox]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sheerly-toggle:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-toggle:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-toggle:has(>input:focus-visible){border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-toggle:disabled{pointer-events:none;opacity:.5}.sheerly-toggle:has(>input:disabled){pointer-events:none;opacity:.5}.sheerly-toggle[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-toggle[aria-pressed=true],.sheerly-toggle[data-state=on]{background-color:var(--sheerly-muted)}.sheerly-toggle:has(>input:checked){background-color:var(--sheerly-muted)}.sheerly-toggle[data-variant=default]{background-color:#0000}.sheerly-toggle[data-variant=outline]{border-color:var(--sheerly-input);background-color:#0000}.sheerly-toggle[data-variant=outline]:hover{background-color:var(--sheerly-muted)}.sheerly-toggle[data-size=default]{min-width:32px;height:32px;padding:0 10px}.sheerly-toggle[data-size=sm]{border-radius:min(var(--sheerly-radius-md), 12px);min-width:28px;height:28px;padding:0 10px;font-size:12.8px}.sheerly-toggle[data-size=sm] svg{width:14px;height:14px}.sheerly-toggle[data-size=lg]{min-width:36px;height:36px;padding:0 10px}.sheerly-toggle:has([data-icon=inline-start]){padding-inline-start:8px}.sheerly-toggle:has([data-icon=inline-end]){padding-inline-end:8px}.sheerly-toggle[data-size=sm]:has([data-icon=inline-start]){padding-inline-start:6px}.sheerly-toggle[data-size=sm]:has([data-icon=inline-end]){padding-inline-end:6px}.sheerly-toggle svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}

package/lib/toggle.d.ts

@@ -20,4 +20,4 @@ export interface ToggleProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>,
  * @example
  * <Toggle defaultPressed data-variant="outline">Bold</Toggle>
  */
-export declare function Toggle({ className, pressed, defaultPressed, onPressedChange, disabled, name, value, children, ...props }: ToggleProps): import("react").JSX.Element;
+export declare function Toggle({ className, pressed, defaultPressed, onPressedChange, disabled, name, value, children, ...props }: ToggleProps): import('react').JSX.Element;

package/lib/tooltip.css

@@ -1 +1 @@
-.sheerly-tooltip{anchor-name:--sheerly-tip;anchor-scope:--sheerly-tip;width:fit-content;display:inline-block}.sheerly-tooltip-content{position-anchor:--sheerly-tip;position-area:var(--sheerly-tooltip-position,block-start);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;background-color:var(--sheerly-foreground);color:var(--sheerly-background);text-align:center;white-space:normal;text-wrap:pretty;border-radius:var(--sheerly-radius-sm);pointer-events:none;opacity:0;max-width:200px;transition:opacity .15s ease, display .15s allow-discrete, overlay .15s allow-discrete;border:none;margin:6px;padding:4px 8px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:12px;font-weight:400;line-height:16px;position:fixed;overflow:visible}.sheerly-tooltip-content:popover-open{opacity:1}@starting-style{.sheerly-tooltip-content:popover-open{opacity:0}}
+.sheerly-tooltip{anchor-name:--sheerly-tip;anchor-scope:--sheerly-tip;width:fit-content;display:inline-block}.sheerly-tooltip-content{position-anchor:--sheerly-tip;position-area:var(--sheerly-tooltip-position,block-start);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;background-color:var(--sheerly-foreground);color:var(--sheerly-background);font-family:var(--sheerly-font-sans);text-align:center;white-space:normal;text-wrap:pretty;border-radius:var(--sheerly-radius-sm);pointer-events:none;opacity:0;max-width:200px;transition:opacity .15s ease, display .15s allow-discrete, overlay .15s allow-discrete;border:none;margin:6px;padding:4px 8px;font-size:12px;font-weight:400;line-height:16px;position:fixed;overflow:visible}.sheerly-tooltip-content:popover-open{opacity:1}@starting-style{.sheerly-tooltip-content:popover-open{opacity:0}}

package/lib/tooltip.d.ts

@@ -10,7 +10,7 @@ export type TooltipProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
  *   <TooltipContent id="tt" popover="hint">More info</TooltipContent>
  * </Tooltip>
  */
-export declare function Tooltip<T extends ElementType = 'span'>({ as, className, ...props }: TooltipProps<T>): import("react").JSX.Element;
+export declare function Tooltip<T extends ElementType = 'span'>({ as, className, ...props }: TooltipProps<T>): import('react').JSX.Element;
 export type TooltipContentProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
 /** The floating label. Give it `popover="hint"` and an `id` matched by the trigger's `interestfor`. */
-export declare function TooltipContent<T extends ElementType = 'span'>({ as, className, ...props }: TooltipContentProps<T>): import("react").JSX.Element;
+export declare function TooltipContent<T extends ElementType = 'span'>({ as, className, ...props }: TooltipContentProps<T>): import('react').JSX.Element;

package/lib/typography.css

@@ -1 +1 @@
-.sheerly-typography{color:var(--sheerly-foreground);font-family:Geist Sans,Geist,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.75}.sheerly-typography h1{letter-spacing:-.025em;text-wrap:balance;scroll-margin-block-start:5rem;font-size:36px;font-weight:800;line-height:1.1}.sheerly-typography h2{letter-spacing:-.025em;border-bottom:1px solid var(--sheerly-border);padding-bottom:8px;scroll-margin-block-start:5rem;font-size:30px;font-weight:600;line-height:1.2}.sheerly-typography h3{letter-spacing:-.025em;scroll-margin-block-start:5rem;font-size:24px;font-weight:600;line-height:1.3}.sheerly-typography h4{letter-spacing:-.025em;scroll-margin-block-start:5rem;font-size:20px;font-weight:600;line-height:1.4}.sheerly-typography h1,.sheerly-typography h2,.sheerly-typography h3,.sheerly-typography h4,.sheerly-typography p,.sheerly-typography blockquote,.sheerly-typography ul,.sheerly-typography ol,.sheerly-typography table,.sheerly-typography pre{margin-block-start:24px}.sheerly-typography h2{margin-block-start:40px}.sheerly-typography h3,.sheerly-typography h4{margin-block-start:32px}.sheerly-typography>:first-child{margin-block-start:0}.sheerly-typography a{color:var(--sheerly-primary);text-underline-offset:4px;font-weight:500;text-decoration:underline}.sheerly-typography a:hover{color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-typography blockquote{border-inline-start:2px solid var(--sheerly-border);color:var(--sheerly-muted-foreground);padding-inline-start:24px;font-style:italic}.sheerly-typography ul{padding-inline-start:24px;list-style:outside}.sheerly-typography ol{padding-inline-start:24px;list-style:decimal}.sheerly-typography li{margin-block-start:8px}.sheerly-typography li::marker{color:var(--sheerly-muted-foreground)}.sheerly-typography code{border-radius:var(--sheerly-radius-sm);background-color:var(--sheerly-muted);padding:.2em .35em;font-family:Geist Mono,ui-monospace,monospace;font-size:.875em;font-weight:600}.sheerly-typography pre{border-radius:var(--sheerly-radius-md);background-color:var(--sheerly-muted);padding:16px;overflow-x:auto}.sheerly-typography pre code{background-color:#0000;padding:0;font-weight:400}.sheerly-typography table{border-collapse:collapse;width:100%;font-size:14px}.sheerly-typography th,.sheerly-typography td{border:1px solid var(--sheerly-border);text-align:start;padding:8px 16px}.sheerly-typography th{font-weight:700}.sheerly-typography tbody tr:nth-child(2n){background-color:oklch(from var(--sheerly-muted) l c h / 50%)}.sheerly-typography small{font-size:14px;font-weight:500;line-height:1}.sheerly-typography [data-variant=lead]{color:var(--sheerly-muted-foreground);font-size:20px}.sheerly-typography [data-variant=large]{font-size:18px;font-weight:600}.sheerly-typography [data-variant=muted]{color:var(--sheerly-muted-foreground);font-size:14px}
+.sheerly-typography{font-family:var(--sheerly-font-sans);color:var(--sheerly-foreground);font-size:16px;line-height:1.75}.sheerly-typography h1{letter-spacing:-.025em;text-wrap:balance;scroll-margin-block-start:5rem;font-size:36px;font-weight:800;line-height:1.1}.sheerly-typography h2{letter-spacing:-.025em;border-bottom:1px solid var(--sheerly-border);padding-bottom:8px;scroll-margin-block-start:5rem;font-size:30px;font-weight:600;line-height:1.2}.sheerly-typography h3{letter-spacing:-.025em;scroll-margin-block-start:5rem;font-size:24px;font-weight:600;line-height:1.3}.sheerly-typography h4{letter-spacing:-.025em;scroll-margin-block-start:5rem;font-size:20px;font-weight:600;line-height:1.4}.sheerly-typography h1,.sheerly-typography h2,.sheerly-typography h3,.sheerly-typography h4,.sheerly-typography p,.sheerly-typography blockquote,.sheerly-typography ul,.sheerly-typography ol,.sheerly-typography table,.sheerly-typography pre{margin-block-start:24px}.sheerly-typography h2{margin-block-start:40px}.sheerly-typography h3,.sheerly-typography h4{margin-block-start:32px}.sheerly-typography>:first-child{margin-block-start:0}.sheerly-typography a{color:var(--sheerly-primary);text-underline-offset:4px;font-weight:500;text-decoration:underline}.sheerly-typography a:hover{color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-typography blockquote{border-inline-start:2px solid var(--sheerly-border);color:var(--sheerly-muted-foreground);padding-inline-start:24px;font-style:italic}.sheerly-typography ul{padding-inline-start:24px;list-style:outside}.sheerly-typography ol{padding-inline-start:24px;list-style:decimal}.sheerly-typography li{margin-block-start:8px}.sheerly-typography li::marker{color:var(--sheerly-muted-foreground)}.sheerly-typography code{font-family:var(--sheerly-font-mono);border-radius:var(--sheerly-radius-sm);background-color:var(--sheerly-muted);padding:.2em .35em;font-size:.875em;font-weight:600}.sheerly-typography pre{border-radius:var(--sheerly-radius-md);background-color:var(--sheerly-muted);padding:16px;overflow-x:auto}.sheerly-typography pre code{background-color:#0000;padding:0;font-weight:400}.sheerly-typography table{border-collapse:collapse;width:100%;font-size:14px}.sheerly-typography th,.sheerly-typography td{border:1px solid var(--sheerly-border);text-align:start;padding:8px 16px}.sheerly-typography th{font-weight:700}.sheerly-typography tbody tr:nth-child(2n){background-color:oklch(from var(--sheerly-muted) l c h / 50%)}.sheerly-typography small{font-size:14px;font-weight:500;line-height:1}.sheerly-typography [data-variant=lead]{color:var(--sheerly-muted-foreground);font-size:20px}.sheerly-typography [data-variant=large]{font-size:18px;font-weight:600}.sheerly-typography [data-variant=muted]{color:var(--sheerly-muted-foreground);font-size:14px}

package/lib/typography.d.ts

@@ -14,4 +14,4 @@ export type TypographyProps<T extends ElementType = 'div'> = PolymorphicProps<T>
  *   <p>Some <a href="#">prose</a> with a <code>token</code>.</p>
  * </Typography>
  */
-export declare function Typography<T extends ElementType = 'div'>({ as, className, ...props }: TypographyProps<T>): import("react").JSX.Element;
+export declare function Typography<T extends ElementType = 'div'>({ as, className, ...props }: TypographyProps<T>): import('react').JSX.Element;

package/package.json

@@ -1,34 +1,35 @@
-{
-  "name": "sheerly",
-  "version": "0.0.3",
-  "type": "module",
-  "scripts": {
-    "dev": "vite --config vite.config.doc.ts",
-    "build": "node --run build:lib && node --run build:doc",
-    "build:lib": "tsc -b && vite build --config vite.config.lib.ts",
-    "build:doc": "tsc -b && vite build --config vite.config.doc.ts",
-    "lint": "oxlint",
-    "preview": "vite preview"
-  },
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "files": [
-    "src",
-    "lib"
-  ],
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "@vitejs/plugin-react": "^6.0.5",
-    "nuqs": "^2.9.6",
-    "oxlint": "^1.78.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "tailwindcss": "^4.3.3",
-    "typescript": "^6.0.3",
-    "unplugin-dts": "^1.0.3",
-    "vite": "^8.2.1"
-  }
-}
+{
+  "name": "sheerly",
+  "version": "0.0.5",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --config vite.config.doc.ts",
+    "build": "node --run build:lib && node --run build:doc",
+    "build:lib": "tsc -b && vite build --config vite.config.lib.ts",
+    "build:doc": "tsc -b && vite build --config vite.config.doc.ts",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.6.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "nuqs": "^2.10.1",
+    "oxlint": "^1.86.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "unplugin-dts": "^1.1.1",
+    "vite": "^8.3.1"
+  },
+  "packageManager": "pnpm@11.28.2"
+}

package/src/accordion.css

@@ -17,7 +17,7 @@
     padding: 10px 0;
     border: 1px solid transparent;
     border-radius: var(--sheerly-radius-lg);
-    font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+    font-family: var(--sheerly-font-sans);
     font-size: 14px;
     font-weight: 500;
     line-height: 20px;
@@ -60,7 +60,7 @@
   }
 
   & .sheerly-accordion-content {
-    font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+    font-family: var(--sheerly-font-sans);
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;

package/src/alert.css

@@ -25,7 +25,7 @@
   background-color: var(--sheerly-card);
   color: var(--sheerly-card-foreground);
   box-shadow: 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   line-height: 20px;
   text-align: left;

package/src/avatar.css

@@ -42,7 +42,7 @@
   justify-content: center;
   border-radius: var(--sheerly-radius-full);
   background-color: var(--sheerly-muted);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 500;
   color: var(--sheerly-muted-foreground);

package/src/badge.css

@@ -10,7 +10,7 @@
   border-radius: var(--sheerly-radius-full);
   border: 1px solid transparent;
   padding: 2px 8px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;

package/src/breadcrumb.css

@@ -23,7 +23,7 @@
  * is likewise embedded (masked ::before) when :empty — no <svg> child needed.
  */
 .sheerly-breadcrumb {
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
 }
 
 .sheerly-breadcrumb-list {

package/src/button.css

@@ -7,7 +7,7 @@
   flex-shrink: 0;
   white-space: nowrap;
   border-radius: var(--sheerly-radius-lg);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;

package/src/card.css

@@ -52,7 +52,7 @@
 }
 
 .sheerly-card-title {
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 16px;
   font-weight: 500;
   line-height: 1.3;
@@ -61,7 +61,7 @@
 }
 
 .sheerly-card-description {
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/dialog.css

@@ -86,7 +86,7 @@
 }
 
 .sheerly-dialog-title {
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 16px;
   font-weight: 500;
   line-height: 1;
@@ -96,7 +96,7 @@
 }
 
 .sheerly-dialog-description {
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/dropdown-menu.css

@@ -48,6 +48,7 @@
 
 .sheerly-dropdown-menu {
   anchor-name: --sheerly-dropdown-menu;
+  anchor-scope: --sheerly-dropdown-menu;
   display: inline-block;
   width: fit-content;
 }
@@ -76,7 +77,7 @@
     inset 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%),
     0 4px 16px -4px oklch(0 0 0 / 8%),
     0 1px 2px oklch(0 0 0 / 4%);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   line-height: 20px;
   overflow-x: hidden;

package/src/hover-card.css

@@ -47,7 +47,7 @@
   /* Neutral card-like surface */
   background-color: var(--sheerly-popover);
   color: var(--sheerly-popover-foreground);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   line-height: 20px;
   width: max-content;

package/src/input.css

@@ -7,7 +7,7 @@
   box-sizing: border-box;
   background-color: transparent;
   padding: 0 10px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/kbd.css

@@ -10,7 +10,7 @@
   padding: 0 4px;
   border-radius: 4px;
   background-color: var(--sheerly-muted);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;

package/src/label.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/pagination.css

@@ -31,7 +31,7 @@
   justify-content: center;
   width: 100%;
   margin-inline: auto;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
 }
 
 .sheerly-pagination-content {

package/src/popover.css

@@ -37,7 +37,7 @@
   /* Neutral popover surface */
   background-color: var(--sheerly-popover);
   color: var(--sheerly-popover-foreground);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   line-height: 20px;
   width: max-content;

package/src/root.css

@@ -1,4 +1,10 @@
+/* @import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&display=swap"); */
+
 :root {
+  /* Typography */
+  --sheerly-font-sans: "Geist", "Geist Sans", system-ui, -apple-system, sans-serif;
+  --sheerly-font-mono: "Geist Mono", ui-monospace, monospace;
+
   /* Radius (Nova: 0.625rem base) */
   --sheerly-radius: 0.625rem;
   --sheerly-radius-sm: calc(var(--sheerly-radius) * 0.6);

package/src/root.terminal.css

@@ -0,0 +1,77 @@
+/* Terminal theme — IBM Plex Mono everywhere, square corners, orange accent.
+   Theme override: import AFTER the base library so these tokens win.
+     @import "sheerly/index.css";
+     @import "sheerly/root.terminal.css"; */
+
+/* @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"); */
+
+:root {
+  /* Typography */
+  --sheerly-font-sans: "IBM Plex Mono", ui-monospace, monospace;
+  --sheerly-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+
+  /* Radius (square) — derived radii scale to 0 automatically */
+  --sheerly-radius: 0rem;
+
+  /* Semantic colors (terminal light) */
+  --sheerly-background: oklch(0.9851 0 0);
+  --sheerly-foreground: oklch(0.1448 0 0);
+  --sheerly-card: oklch(0.9702 0 0);
+  --sheerly-card-foreground: oklch(0.1448 0 0);
+  --sheerly-popover: oklch(0.9851 0 0);
+  --sheerly-popover-foreground: oklch(0.1448 0 0);
+  --sheerly-primary: oklch(0.6996 0.202 44.4414);
+  --sheerly-primary-foreground: oklch(0 0 0);
+  --sheerly-secondary: oklch(0.9219 0 0);
+  --sheerly-secondary-foreground: oklch(0.1448 0 0);
+  --sheerly-muted: oklch(0.9401 0 0);
+  --sheerly-muted-foreground: oklch(0.4495 0 0);
+  --sheerly-accent: oklch(0.7512 0.168 52.0772);
+  --sheerly-accent-foreground: oklch(0 0 0);
+  --sheerly-destructive: oklch(0.628 0.2577 29.2339);
+  --sheerly-border: oklch(0.8514 0 0);
+  --sheerly-input: oklch(0.8514 0 0);
+  --sheerly-ring: oklch(0.6996 0.202 44.4414);
+
+  /* Sidebar */
+  --sheerly-sidebar: oklch(0.9851 0 0);
+  --sheerly-sidebar-foreground: oklch(0.1448 0 0);
+  --sheerly-sidebar-primary: oklch(0.2046 0 0);
+  --sheerly-sidebar-primary-foreground: oklch(0.9851 0 0);
+  --sheerly-sidebar-accent: oklch(0.9702 0 0);
+  --sheerly-sidebar-accent-foreground: oklch(0.2046 0 0);
+  --sheerly-sidebar-border: oklch(0.9219 0 0);
+  --sheerly-sidebar-ring: oklch(0.709 0 0);
+}
+
+.dark {
+  /* Semantic colors (terminal dark) */
+  --sheerly-background: oklch(0.1822 0 0);
+  --sheerly-foreground: oklch(0.9612 0 0);
+  --sheerly-card: oklch(0.2178 0 0);
+  --sheerly-card-foreground: oklch(0.9612 0 0);
+  --sheerly-popover: oklch(0.1822 0 0);
+  --sheerly-popover-foreground: oklch(0.9612 0 0);
+  --sheerly-primary: oklch(0.6996 0.202 44.4414);
+  --sheerly-primary-foreground: oklch(0 0 0);
+  --sheerly-secondary: oklch(0.3211 0 0);
+  --sheerly-secondary-foreground: oklch(0.9612 0 0);
+  --sheerly-muted: oklch(0.2686 0 0);
+  --sheerly-muted-foreground: oklch(0.7252 0 0);
+  --sheerly-accent: oklch(0.7512 0.168 52.0772);
+  --sheerly-accent-foreground: oklch(0 0 0);
+  --sheerly-destructive: oklch(0.628 0.2577 29.2339);
+  --sheerly-border: oklch(0.3715 0 0);
+  --sheerly-input: oklch(0.3715 0 0);
+  --sheerly-ring: oklch(0.6996 0.202 44.4414);
+
+  /* Sidebar */
+  --sheerly-sidebar: oklch(0.2046 0 0);
+  --sheerly-sidebar-foreground: oklch(0.9851 0 0);
+  --sheerly-sidebar-primary: oklch(0.4878 0.2432 264.4045);
+  --sheerly-sidebar-primary-foreground: oklch(0.9851 0 0);
+  --sheerly-sidebar-accent: oklch(0.2686 0 0);
+  --sheerly-sidebar-accent-foreground: oklch(0.9851 0 0);
+  --sheerly-sidebar-border: oklch(0.2768 0 0);
+  --sheerly-sidebar-ring: oklch(0.4386 0 0);
+}

package/src/select.css

@@ -15,7 +15,7 @@
   box-sizing: border-box;
   background-color: transparent;
   padding: 0 12px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/sheet.css

@@ -142,7 +142,7 @@
 }
 
 .sheerly-sheet-title {
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 16px;
   font-weight: 500;
   line-height: 1;
@@ -152,7 +152,7 @@
 }
 
 .sheerly-sheet-description {
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/table.css

@@ -9,7 +9,7 @@
   width: 100%;
   caption-side: bottom;
   border-collapse: collapse;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   line-height: 20px;
   color: var(--sheerly-foreground);

package/src/tabs.css

@@ -37,7 +37,7 @@
   border-radius: 6px;
   border: 1px solid transparent;
   padding: 4px 8px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;

package/src/textarea.css

@@ -7,7 +7,7 @@
   border: 1px solid var(--sheerly-input);
   background-color: transparent;
   padding: 6px 10px;
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;

package/src/toggle.css

@@ -18,7 +18,7 @@
   justify-content: center;
   gap: 4px;
   border-radius: var(--sheerly-radius-lg);
-  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-family: var(--sheerly-font-sans);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;