@olundot/ui 0.20.0-next.2 → 0.20.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @olundot/ui
 
+## 0.20.0-next.3
+
+### Minor Changes
+
+- b7176ad: `OlunLogo`가 `@olundot/tokens/brand`의 정본 데이터만 그린다. 모양이 바뀐다.
+
+  - 워드마크: Pretendard 800 글자(`<span>`) 대신 Montserrat 700 윤곽 SVG(자간 +0.03em). 접근 가능한 이름은 `role="img"` + `aria-label`(`OLUN`, 워드마크만이면 `OLUN.`)이다.
+  - MASTER(기본형): SVG 하나로 그리고 `symbolSize` 하나로 통째로 확대·축소한다. 간격 12px(`--space-3`) 대신 대문자 높이 H 기준 고정 비율(링 바깥 지름 1.24H, 궤도 점 끝 → O 0.55H)을 쓴다. 높이는 잉크에 맞춰 예전 심볼 상자보다 낮다(기본 `symbolSize` 28에서 약 17px).
+  - `fontSize`: 워드마크만 쓸 때(`showSymbol={false}`)의 글자 크기로만 쓴다. MASTER에서는 무시한다.
+  - 워드마크만 쓸 때 마침표 색이 `--accent`에서 `--accent-pop`으로 바뀐다(궤도 점과 같은 색 표식 `olun-accent`).
+  - `OlunSymbol`: 모양과 크기는 그대로다.
+
+### Patch Changes
+
+- 15f638e: 겹친 오버레이를 한 동작으로 함께 닫아도 포커스가 `<body>`로 떨어지지 않고 바깥 오버레이를 연 요소로 돌아간다. 바깥 오버레이가 먼저 사라지는 동안 안쪽 오버레이가 닫히는 애니메이션 중이어도 해당한다. Trigger가 있는 경우와 닫히는 동안 포커스가 다른 요소로 옮겨 간 경우는 그대로다.
+- Updated dependencies [b7176ad]
+  - @olundot/tokens@0.18.0-next.1
+
 ## 0.20.0-next.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -52,10 +52,10 @@ type GhostDefaultActionStyle = {
 };
 
 declare const buttonCva: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | "icon-xs" | null | undefined;
+    size?: "default" | "md" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
     appearance?: "filled" | "outline" | "ghost" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
-    variant?: "primary" | "secondary" | "destructive" | "default" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "link" | null | undefined;
+    variant?: "default" | "outline" | "ghost" | "primary" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariantsOptions = Parameters<typeof buttonCva>[0];
 declare function buttonVariants(options?: ButtonVariantsOptions): string;
@@ -96,7 +96,7 @@ type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading'
     variant?: ButtonVariant;
     duration?: number;
 };
-declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant" | "size" | "children" | "leadingIcon" | "trailingIcon" | "loading"> & {
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "children" | "leadingIcon" | "trailingIcon" | "loading"> & {
     value: string;
     label?: React.ReactNode;
     copiedLabel?: React.ReactNode;
@@ -107,13 +107,13 @@ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "var
 } & React.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -161,11 +161,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -203,12 +203,12 @@ interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -257,14 +257,14 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare const selectVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     appearance?: "inline" | "field" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -1475,7 +1475,7 @@ interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'ch
 declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const notificationBadgeVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     placement?: "none" | "inline" | "corner" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type NotificationBadgeSize = NonNullable<VariantProps<typeof notificationBadgeVariants>['size']>;
@@ -1488,13 +1488,13 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
 type ChipTone = NonNullable<VariantProps<typeof chipVariants>["tone"]>;
@@ -1508,7 +1508,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const emptyStateBaseVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateTone = "neutral" | "muted" | "raised";
@@ -1519,7 +1519,7 @@ interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVar
 }
 declare function emptyStateVariants({ size, tone, surface, bordered, className, }?: EmptyStateVariantOptions): string;
 declare const emptyStateIconVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateSize = NonNullable<VariantProps<typeof emptyStateBaseVariants>["size"]>;
 interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyStateBaseVariants> {
@@ -1538,7 +1538,7 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const errorStateVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ErrorStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof errorStateVariants> {
@@ -1558,7 +1558,7 @@ declare const skeletonVariants: (props?: ({
     shape?: "text" | "block" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const spinnerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | 16 | 24 | 32 | null | undefined;
+    size?: "md" | "sm" | "lg" | 16 | 24 | 32 | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
@@ -1591,7 +1591,7 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const iconButtonCva: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
     appearance?: "filled" | "outline" | "ghost" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
@@ -1781,7 +1781,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
+    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -1835,19 +1835,19 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "error" | "default" | null | undefined;
+    state?: "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -1874,10 +1874,10 @@ interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetEl
 declare const OTPField: React.ForwardRefExoticComponent<OTPFieldProps & React.RefAttributes<HTMLFieldSetElement>>;
 
 declare const searchFieldVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const searchFieldInputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     hasClear?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1901,14 +1901,14 @@ declare const checkboxVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxRootVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const checkboxBoxVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupBoxVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
 type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -1933,7 +1933,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxGroupVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1954,16 +1954,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const radioGroupVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioControlVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;
@@ -2055,11 +2055,11 @@ declare function TreeView<T extends TreeNode>({ nodes, selectedId, selectionAria
 /**
  * OLUN 브랜드 로고.
  *
- * - symbol: O 원형 테두리 + 우하단 accent-pop 작은 circle (32px 초과/이하 두 비율)
- * - wordmark: "OLUN" + 마지막 "." 은 accent 색상
- * - 조합: symbol과 함께 쓰면 wordmark의 "."를 뺀다. 궤도 점은 symbol이 맡는다(점 두 개 경쟁 방지).
+ * - symbol: O 링 + 우하단 accent-pop 궤도 점 (32px 초과/이하 두 광학 비율)
+ * - wordmark: Montserrat 700 윤곽 `OLUN` + 단독일 때 accent-pop 마침표
+ * - MASTER: symbol과 함께 쓰면 wordmark의 "."를 뺀다. 궤도 점이 마침표를 맡는다(점 두 개 경쟁 방지).
  *
- * 레퍼런스: apps/web/docs/wireframes/ref/shell-wireframe.html Topbar 브랜드 영역.
+ * 기하는 `@olundot/tokens/brand`의 정본 데이터(scripts/brand/build-brand-svg.mjs가 생성)에서만 온다.
  */
 interface OlunSymbolProps {
     /** 심볼 크기 px (기본 28) */
@@ -2068,9 +2068,15 @@ interface OlunSymbolProps {
 }
 declare function OlunSymbol({ size, className }: OlunSymbolProps): react_jsx_runtime.JSX.Element;
 interface OlunLogoProps {
-    /** 심볼 크기 px (기본 28) */
+    /**
+     * MASTER 크기. 심볼 240 상자 기준 px (기본 28).
+     * 워드마크와 간격은 고정 비율로 함께 커진다. 32px 이하는 아이콘 비율 심볼을 쓴다.
+     */
     symbolSize?: number;
-    /** wordmark font-size px (기본 18) */
+    /**
+     * 워드마크만 쓸 때(`showSymbol={false}`) 글자 크기 px (기본 18).
+     * MASTER에서는 쓰지 않는다. MASTER 크기는 `symbolSize` 하나로 정한다.
+     */
     fontSize?: number;
     /** 심볼 표시 여부 (기본 true) */
     showSymbol?: boolean;

package/dist/index.js

@@ -3672,6 +3672,7 @@ function useOverlayAction({
 
 // src/lib/use-return-focus.ts
 import * as React21 from "react";
+var closingOverlay = '[role="dialog"][data-state="closed"], [role="alertdialog"][data-state="closed"]';
 function useReturnFocus() {
   const returnTo = React21.useRef(null);
   const onOpenAutoFocus = React21.useCallback((event) => {
@@ -3687,7 +3688,9 @@ function useReturnFocus() {
     returnTo.current = null;
     if (!target?.isConnected) return;
     const active = document.activeElement;
-    if (active instanceof HTMLElement && active !== document.body && active !== target) return;
+    if (active instanceof HTMLElement && active !== document.body && active !== target && !active.closest(closingOverlay)) {
+      return;
+    }
     event.preventDefault();
     target.focus();
   }, []);
@@ -10569,36 +10572,46 @@ function TreeView({
 }
 
 // src/components/branding/olun-logo.tsx
-import { jsx as jsx64, jsxs as jsxs50 } from "react/jsx-runtime";
-var SYMBOL_LARGE = { stroke: 24, dotX: 184, dotY: 180, dotR: 13 };
-var SYMBOL_SMALL = { stroke: 18, dotX: 185, dotY: 175, dotR: 22 };
+import { OLUN_MASTER, OLUN_SYMBOL, OLUN_WORDMARK } from "@olundot/tokens/brand";
+import { Fragment as Fragment13, jsx as jsx64, jsxs as jsxs50 } from "react/jsx-runtime";
+var ACCENT_FILL = "var(--accent-pop)";
+var INK = { color: "var(--text-primary)" };
+var INK_TIGHT = { ...INK, display: "block", overflow: "visible" };
+function symbolGeometry(size) {
+  return size > OLUN_SYMBOL.smallMax ? OLUN_SYMBOL.large : OLUN_SYMBOL.small;
+}
+function SymbolCircles({ size }) {
+  const { ring } = OLUN_SYMBOL;
+  const g = symbolGeometry(size);
+  return /* @__PURE__ */ jsxs50(Fragment13, { children: [
+    /* @__PURE__ */ jsx64(
+      "circle",
+      {
+        className: "olun-logo__ring",
+        cx: ring.cx,
+        cy: ring.cy,
+        r: ring.r,
+        stroke: "currentColor",
+        strokeWidth: g.stroke,
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx64("circle", { className: "olun-accent olun-logo__dot", cx: g.dot.cx, cy: g.dot.cy, r: g.dot.r, fill: ACCENT_FILL })
+  ] });
+}
 function OlunSymbol({ size = 28, className }) {
-  const g = size > 32 ? SYMBOL_LARGE : SYMBOL_SMALL;
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsx64(
     "svg",
     {
       width: size,
       height: size,
-      viewBox: "0 0 240 240",
+      viewBox: `0 0 ${OLUN_SYMBOL.box} ${OLUN_SYMBOL.box}`,
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       className,
+      style: INK,
       "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx64(
-          "circle",
-          {
-            cx: "108",
-            cy: "120",
-            r: "60",
-            stroke: "currentColor",
-            strokeWidth: g.stroke,
-            fill: "none",
-            style: { color: "var(--text-primary)" }
-          }
-        ),
-        /* @__PURE__ */ jsx64("circle", { cx: g.dotX, cy: g.dotY, r: g.dotR, fill: "var(--accent-pop)" })
-      ]
+      children: /* @__PURE__ */ jsx64(SymbolCircles, { size })
     }
   );
 }
@@ -10608,33 +10621,61 @@ function OlunLogo({
   showSymbol = true,
   className
 }) {
+  if (!showSymbol) {
+    const { full } = OLUN_WORDMARK;
+    const height2 = fontSize * full.height / OLUN_WORDMARK.unitsPerEm;
+    return /* @__PURE__ */ jsxs50(
+      "svg",
+      {
+        width: height2 * full.width / full.height,
+        height: height2,
+        viewBox: full.viewBox,
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className,
+        style: INK_TIGHT,
+        role: "img",
+        "aria-label": "OLUN.",
+        children: [
+          /* @__PURE__ */ jsx64("path", { className: "olun-logo__wordmark", fill: "currentColor", d: full.letters }),
+          /* @__PURE__ */ jsx64(
+            "circle",
+            {
+              className: "olun-accent olun-logo__period",
+              cx: full.period.cx,
+              cy: full.period.cy,
+              r: full.period.r,
+              fill: ACCENT_FILL
+            }
+          )
+        ]
+      }
+    );
+  }
+  const layout = symbolSize > OLUN_SYMBOL.smallMax ? OLUN_MASTER.large : OLUN_MASTER.small;
+  const height = symbolSize * layout.height / (OLUN_SYMBOL.box * layout.symbol.scale);
   return /* @__PURE__ */ jsxs50(
-    "div",
+    "svg",
     {
+      width: height * layout.width / layout.height,
+      height,
+      viewBox: layout.viewBox,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
       className,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "var(--space-3)"
-      },
+      style: INK_TIGHT,
+      role: "img",
+      "aria-label": "OLUN",
       children: [
-        showSymbol && /* @__PURE__ */ jsx64(OlunSymbol, { size: symbolSize }),
-        /* @__PURE__ */ jsxs50(
-          "span",
+        /* @__PURE__ */ jsx64(
+          "g",
           {
-            style: {
-              fontFamily: "var(--font-display)",
-              fontWeight: 800,
-              fontSize: `${fontSize}px`,
-              letterSpacing: "-0.02em",
-              color: "var(--text-primary)"
-            },
-            children: [
-              "OLUN",
-              !showSymbol && /* @__PURE__ */ jsx64("span", { style: { color: "var(--accent)" }, children: "." })
-            ]
+            className: "olun-logo__symbol",
+            transform: `translate(${layout.symbol.x} ${layout.symbol.y}) scale(${layout.symbol.scale})`,
+            children: /* @__PURE__ */ jsx64(SymbolCircles, { size: symbolSize })
           }
-        )
+        ),
+        /* @__PURE__ */ jsx64("path", { className: "olun-logo__wordmark", fill: "currentColor", d: layout.letters })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.20.0-next.2",
+  "version": "0.20.0-next.3",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [
@@ -44,7 +44,7 @@
     "lucide-react": "^1.8.0",
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3.5.0",
-    "@olundot/tokens": "^0.18.0-next.0"
+    "@olundot/tokens": "^0.18.0-next.1"
   },
   "peerDependencies": {
     "react": ">=18",