@womp/kookie-ui 0.9.1 → 0.11.0

package/styles.css

@@ -3420,6 +3420,20 @@
   --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
   --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
+  --color-page: var(--color-background);
+  --color-text: var(--gray-12);
+  --neutral-1: var(--gray-1);
+  --neutral-2: var(--gray-2);
+  --neutral-3: var(--gray-3);
+  --neutral-4: var(--gray-4);
+  --neutral-5: var(--gray-5);
+  --neutral-6: var(--gray-6);
+  --neutral-7: var(--gray-7);
+  --neutral-8: var(--gray-8);
+  --neutral-9: var(--gray-9);
+  --neutral-10: var(--gray-10);
+  --neutral-11: var(--gray-11);
+  --neutral-12: var(--gray-12);
   --material-blend: 100%;
   --material-alpha: 0;
   --color-transparent: rgb(0 0 0 / 0);
@@ -18981,6 +18995,19 @@
     background-color: var(--gray-a8);
   }
 }
+:where(.rt-ScrollAreaRoot[data-fade]) > .rt-ScrollAreaViewport,
+.rt-MessageScrollerViewport:where([data-fade]) {
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black min(var(--scroll-overflow-start, 0px), var(--scroll-fade-start, var(--scroll-fade-size))), black calc(100% - min(var(--scroll-overflow-end, 0px), var(--scroll-fade-end, var(--scroll-fade-size)))), transparent 100%);
+          mask-image: linear-gradient(to bottom, transparent 0%, black min(var(--scroll-overflow-start, 0px), var(--scroll-fade-start, var(--scroll-fade-size))), black calc(100% - min(var(--scroll-overflow-end, 0px), var(--scroll-fade-end, var(--scroll-fade-size)))), transparent 100%);
+}
+:root,
+.radix-themes {
+  --scroll-fade-size: var(--space-6);
+}
+:where(.rt-ScrollAreaViewport, .rt-MessageScrollerViewport) :where(.rt-ScrollAreaRoot, .rt-MessageScrollerViewport) {
+  --scroll-fade-start: initial;
+  --scroll-fade-end: initial;
+}
 .rt-SegmentedControlRoot:where(:has([data-icon-only])) {
   grid-auto-columns: minmax(var(--segmented-control-height), 1fr);
 }
@@ -26708,11 +26735,11 @@
   outline-style: solid;
   outline-color: var(--accent-9);
 }
-.rt-Toolbar {
+.rt-AppBar {
   position: absolute;
   z-index: 1;
 }
-.rt-ToolbarInner {
+.rt-AppBarInner {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   -webkit-box-align: center;
@@ -26722,112 +26749,218 @@
   height: 100%;
   gap: var(--space-2);
 }
-.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarInner {
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarInner {
   grid-template-columns: 1fr;
   grid-template-rows: 1fr auto 1fr;
 }
-.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft {
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarLeft {
   grid-column: 1;
   grid-row: 1;
   align-self: start;
   justify-self: center;
 }
-.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter {
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarCenter {
   grid-column: 1;
   grid-row: 2;
   align-self: center;
   justify-self: center;
 }
-.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight {
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarRight {
   grid-column: 1;
   grid-row: 3;
   align-self: end;
   justify-self: center;
 }
-.rt-Toolbar:where([data-anchor='top']) {
+.rt-AppBar:where([data-anchor='top']) {
   top: 0;
   left: 0;
   right: 0;
 }
-.rt-Toolbar:where([data-anchor='bottom']) {
+.rt-AppBar:where([data-anchor='bottom']) {
   bottom: 0;
   left: 0;
   right: 0;
 }
-.rt-Toolbar:where([data-anchor='left']) {
+.rt-AppBar:where([data-anchor='left']) {
   top: 0;
   bottom: 0;
   left: 0;
 }
-.rt-Toolbar:where([data-anchor='right']) {
+.rt-AppBar:where([data-anchor='right']) {
   top: 0;
   bottom: 0;
   right: 0;
 }
-.rt-Toolbar:where(:not([data-floating])) {
+.rt-AppBar:where(:not([data-floating])) {
   --base-card-border-radius: 0;
   border-radius: 0;
 }
-.rt-Toolbar:where([data-anchor='top']:not([data-floating]))::after {
+.rt-AppBar:where([data-anchor='top']:not([data-floating]))::after {
   -webkit-box-shadow: inset 0 -1px 0 0 var(--gray-6);
           box-shadow: inset 0 -1px 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent'],[data-material='translucent']) .rt-Toolbar:where([data-anchor='top']:not([data-floating]))::after,.rt-Toolbar:where([data-anchor='top']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
+:where([data-panel-background='translucent'],[data-material='translucent']) .rt-AppBar:where([data-anchor='top']:not([data-floating]))::after,.rt-AppBar:where([data-anchor='top']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
   -webkit-box-shadow: inset 0 -1px 0 0 var(--gray-a6);
           box-shadow: inset 0 -1px 0 0 var(--gray-a6);
 }
-.rt-Toolbar:where([data-anchor='bottom']:not([data-floating]))::after {
+.rt-AppBar:where([data-anchor='bottom']:not([data-floating]))::after {
   -webkit-box-shadow: inset 0 1px 0 0 var(--gray-6);
           box-shadow: inset 0 1px 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent'],[data-material='translucent']) .rt-Toolbar:where([data-anchor='bottom']:not([data-floating]))::after,.rt-Toolbar:where([data-anchor='bottom']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
+:where([data-panel-background='translucent'],[data-material='translucent']) .rt-AppBar:where([data-anchor='bottom']:not([data-floating]))::after,.rt-AppBar:where([data-anchor='bottom']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
   -webkit-box-shadow: inset 0 1px 0 0 var(--gray-a6);
           box-shadow: inset 0 1px 0 0 var(--gray-a6);
 }
-.rt-Toolbar:where([data-anchor='left']:not([data-floating]))::after {
+.rt-AppBar:where([data-anchor='left']:not([data-floating]))::after {
   -webkit-box-shadow: inset -1px 0 0 0 var(--gray-6);
           box-shadow: inset -1px 0 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent'],[data-material='translucent']) .rt-Toolbar:where([data-anchor='left']:not([data-floating]))::after,.rt-Toolbar:where([data-anchor='left']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
+:where([data-panel-background='translucent'],[data-material='translucent']) .rt-AppBar:where([data-anchor='left']:not([data-floating]))::after,.rt-AppBar:where([data-anchor='left']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
   -webkit-box-shadow: inset -1px 0 0 0 var(--gray-a6);
           box-shadow: inset -1px 0 0 0 var(--gray-a6);
 }
-.rt-Toolbar:where([data-anchor='right']:not([data-floating]))::after {
+.rt-AppBar:where([data-anchor='right']:not([data-floating]))::after {
   -webkit-box-shadow: inset 1px 0 0 0 var(--gray-6);
           box-shadow: inset 1px 0 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent'],[data-material='translucent']) .rt-Toolbar:where([data-anchor='right']:not([data-floating]))::after,.rt-Toolbar:where([data-anchor='right']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
+:where([data-panel-background='translucent'],[data-material='translucent']) .rt-AppBar:where([data-anchor='right']:not([data-floating]))::after,.rt-AppBar:where([data-anchor='right']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
   -webkit-box-shadow: inset 1px 0 0 0 var(--gray-a6);
           box-shadow: inset 1px 0 0 0 var(--gray-a6);
 }
-.rt-Toolbar:where(.rt-variant-ghost:not([data-floating]))::after {
+.rt-AppBar:where(.rt-variant-ghost:not([data-floating]))::after {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.rt-Toolbar:where(.rt-variant-soft:not([data-floating]))::after {
+.rt-AppBar:where(.rt-variant-soft:not([data-floating]))::after {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.rt-ToolbarTitle {
+.rt-AppBarTitle {
   min-width: 0;
   -ms-flex-negative: 1;
       flex-shrink: 1;
 }
-.rt-ToolbarSection {
+.rt-AppBarSection {
   min-width: 0;
 }
-.rt-ToolbarLeft {
+.rt-AppBarLeft {
   grid-column: 1;
   justify-self: start;
 }
-.rt-ToolbarCenter {
+.rt-AppBarCenter {
   grid-column: 2;
   justify-self: center;
 }
-.rt-ToolbarRight {
+.rt-AppBarRight {
   grid-column: 3;
   justify-self: end;
 }
+.rt-Toolbar {
+  --toolbar-group-inset: calc(var(--space-1) / 2);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  gap: var(--toolbar-gap);
+  min-width: 0;
+  min-height: var(--toolbar-control-height);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.rt-Toolbar:where([data-orientation='vertical']) {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  min-height: 0;
+  min-width: var(--toolbar-control-height);
+}
+.rt-Toolbar:where(.rt-r-size-1) {
+  --toolbar-control-height: var(--space-5);
+  --toolbar-radius: max(var(--radius-1), var(--radius-full));
+  --toolbar-gap: var(--space-1);
+  --toolbar-title-gap: var(--space-2);
+}
+.rt-Toolbar:where(.rt-r-size-2) {
+  --toolbar-control-height: var(--space-6);
+  --toolbar-radius: max(var(--radius-2), var(--radius-full));
+  --toolbar-gap: var(--space-2);
+  --toolbar-title-gap: var(--space-3);
+}
+.rt-Toolbar:where(.rt-r-size-3) {
+  --toolbar-control-height: var(--space-7);
+  --toolbar-radius: max(var(--radius-3), var(--radius-full));
+  --toolbar-gap: var(--space-2);
+  --toolbar-title-gap: var(--space-4);
+}
+.rt-Toolbar:where(.rt-r-size-4) {
+  --toolbar-control-height: var(--space-8);
+  --toolbar-radius: max(var(--radius-4), var(--radius-full));
+  --toolbar-gap: var(--space-3);
+  --toolbar-title-gap: var(--space-5);
+}
+.rt-ToolbarGroup {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: var(--toolbar-control-height);
+  padding: var(--toolbar-group-inset);
+  border-radius: var(--toolbar-radius);
+  background-color: var(--gray-a3);
+}
+.rt-ToolbarGroup:where([data-orientation='vertical']) {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: auto;
+  width: var(--toolbar-control-height);
+}
+.rt-ToolbarGroup > :where(.rt-BaseButton) {
+  --base-button-height: calc(var(--toolbar-control-height) - 2 * var(--toolbar-group-inset));
+  border-radius: max(0px, calc(var(--toolbar-radius) - var(--toolbar-group-inset)));
+}
+.rt-ToolbarSeparator {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  background-color: var(--gray-a5);
+}
+.rt-ToolbarSeparator:where([data-orientation='vertical']) {
+  width: var(--border-width-standard);
+  height: calc(var(--toolbar-control-height) / 2);
+}
+.rt-ToolbarSeparator:where([data-orientation='horizontal']) {
+  height: var(--border-width-standard);
+  width: calc(var(--toolbar-control-height) / 2);
+}
+.rt-ToolbarTitle {
+  min-width: 0;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
+}
+:where(.rt-Toolbar) .rt-ToolbarTitle:where(:not(:first-child)) {
+  -webkit-margin-start: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
+          margin-inline-start: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
+}
+:where(.rt-Toolbar) .rt-ToolbarTitle:where(:not(:last-child)) {
+  -webkit-margin-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
+          margin-inline-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
+}
 .rt-TooltipContent {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/tokens/base.css

@@ -66,6 +66,20 @@
   --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
   --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
+  --color-page: var(--color-background);
+  --color-text: var(--gray-12);
+  --neutral-1: var(--gray-1);
+  --neutral-2: var(--gray-2);
+  --neutral-3: var(--gray-3);
+  --neutral-4: var(--gray-4);
+  --neutral-5: var(--gray-5);
+  --neutral-6: var(--gray-6);
+  --neutral-7: var(--gray-7);
+  --neutral-8: var(--gray-8);
+  --neutral-9: var(--gray-9);
+  --neutral-10: var(--gray-10);
+  --neutral-11: var(--gray-11);
+  --neutral-12: var(--gray-12);
   --material-blend: 100%;
   --material-alpha: 0;
   --color-transparent: rgb(0 0 0 / 0);

package/tokens.css

@@ -3420,6 +3420,20 @@
   --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
   --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
+  --color-page: var(--color-background);
+  --color-text: var(--gray-12);
+  --neutral-1: var(--gray-1);
+  --neutral-2: var(--gray-2);
+  --neutral-3: var(--gray-3);
+  --neutral-4: var(--gray-4);
+  --neutral-5: var(--gray-5);
+  --neutral-6: var(--gray-6);
+  --neutral-7: var(--gray-7);
+  --neutral-8: var(--gray-8);
+  --neutral-9: var(--gray-9);
+  --neutral-10: var(--gray-10);
+  --neutral-11: var(--gray-11);
+  --neutral-12: var(--gray-12);
   --material-blend: 100%;
   --material-alpha: 0;
   --color-transparent: rgb(0 0 0 / 0);

package/dist/esm/chunk-47LMOIW3.js

@@ -1,2 +0,0 @@
-import{a as P}from"./chunk-JDGJSNWT.js";import{a as u}from"./chunk-GO7OHBHW.js";import{a as p}from"./chunk-FHOCUZDR.js";import*as e from"react";import c from"classnames";var h=e.forwardRef((l,o)=>{let{anchor:r="top",floating:t=!1,offset:s="2",size:n="1",variant:i="ghost",material:N,className:x,style:R,children:L,...H}=l,T=r==="top"||r==="bottom",y=e.useRef(null),F=e.useCallback(a=>{y.current=a,typeof o=="function"?o(a):o&&(o.current=a)},[o]);e.useEffect(()=>{let a=y.current;if(!a)return;let m=a.parentElement;if(!m)return;let d=()=>{let b=T?a.offsetHeight:a.offsetWidth;if(t){let j=getComputedStyle(a),w=parseFloat(j.marginTop)||0;b+=w*2}T?m.style.setProperty("--rt-toolbar-height",`${b}px`):m.style.setProperty("--rt-toolbar-width",`${b}px`)};d();let g=new ResizeObserver(d);return g.observe(a),()=>g.disconnect()},[T,t]);let z=t?{margin:`var(--space-${s})`,...R}:R;return e.createElement(P,{ref:F,size:n,variant:i,material:N,"data-anchor":r,"data-floating":t||void 0,className:c("rt-Toolbar",x),style:z,...H},e.createElement("div",{className:"rt-ToolbarInner"},L))});h.displayName="Toolbar.Root";var S=e.forwardRef(({gap:l="2",align:o="center",className:r,children:t,...s},n)=>e.createElement(p,{ref:n,align:o,gap:l,className:c("rt-ToolbarSection","rt-ToolbarLeft",r),...s},t));S.displayName="Toolbar.Left";var C=e.forwardRef(({gap:l="2",align:o="center",justify:r="center",className:t,children:s,...n},i)=>e.createElement(p,{ref:i,align:o,justify:r,gap:l,className:c("rt-ToolbarSection","rt-ToolbarCenter",t),...n},s));C.displayName="Toolbar.Center";var E=e.forwardRef(({gap:l="2",align:o="center",justify:r="end",className:t,children:s,...n},i)=>e.createElement(p,{ref:i,align:o,justify:r,gap:l,className:c("rt-ToolbarSection","rt-ToolbarRight",t),...n},s));E.displayName="Toolbar.Right";var v=e.forwardRef(({className:l,size:o="2",weight:r="medium",truncate:t=!0,children:s,...n},i)=>e.createElement(u,{ref:i,size:o,weight:r,truncate:t,className:c("rt-ToolbarTitle",l),...n},s));v.displayName="Toolbar.Title";var f=h;f.Left=S;f.Center=C;f.Right=E;f.Title=v;export{h as a,S as b,C as c,E as d,v as e,f};
-//# sourceMappingURL=chunk-47LMOIW3.js.map

package/dist/esm/chunk-47LMOIW3.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { Card } from './card.js';\nimport { Flex } from './flex.js';\nimport { Heading } from './heading.js';\n\nimport type { CardProps } from './card.js';\nimport type { FlexProps } from './flex.js';\n\n// ============================================================================\n// Toolbar Root\n// ============================================================================\n\ntype ToolbarRootElement = React.ElementRef<'div'>;\ntype Anchor = 'top' | 'bottom' | 'left' | 'right';\ntype SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\ninterface ToolbarRootProps extends Omit<CardProps, 'asChild'> {\n  /**\n   * Which edge to anchor to. Sets position: sticky and the appropriate edge.\n   * @default \"top\"\n   */\n  anchor?: Anchor;\n  /**\n   * Floating mode adds margin from edges for a detached look with absolute positioning.\n   * When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.\n   * @default false\n   */\n  floating?: boolean;\n  /**\n   * Margin offset from edges when floating. Uses space scale values.\n   * @default \"2\"\n   */\n  offset?: SpaceScale;\n}\n\nconst ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(\n  (props, forwardedRef) => {\n    const {\n      anchor = 'top',\n      floating = false,\n      offset = '2',\n      size = '1',\n      variant = 'ghost',\n      material,\n      className,\n      style,\n      children,\n      ...restProps\n    } = props;\n\n    const isHorizontal = anchor === 'top' || anchor === 'bottom';\n    const internalRef = React.useRef<HTMLDivElement>(null);\n\n    // Merge refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      },\n      [forwardedRef],\n    );\n\n    // Expose height/width as CSS variable on parent element\n    React.useEffect(() => {\n      const element = internalRef.current;\n      if (!element) return;\n\n      const parent = element.parentElement;\n      if (!parent) return;\n\n      const update = () => {\n        let dimension = isHorizontal ? element.offsetHeight : element.offsetWidth;\n\n        // For floating mode, include the margin in the total space\n        if (floating) {\n          const computedStyle = getComputedStyle(element);\n          const margin = parseFloat(computedStyle.marginTop) || 0;\n          dimension += margin * 2;\n        }\n\n        if (isHorizontal) {\n          parent.style.setProperty('--rt-toolbar-height', `${dimension}px`);\n        } else {\n          parent.style.setProperty('--rt-toolbar-width', `${dimension}px`);\n        }\n      };\n\n      update();\n\n      const resizeObserver = new ResizeObserver(update);\n      resizeObserver.observe(element);\n\n      return () => resizeObserver.disconnect();\n    }, [isHorizontal, floating]);\n\n    const computedStyle = floating\n      ? { margin: `var(--space-${offset})`, ...style }\n      : style;\n\n    return (\n      <Card\n        ref={mergedRef}\n        size={size}\n        variant={variant}\n        material={material}\n        data-anchor={anchor}\n        data-floating={floating || undefined}\n        className={classNames('rt-Toolbar', className)}\n        style={computedStyle}\n        {...restProps}\n      >\n        <div className=\"rt-ToolbarInner\">\n          {children}\n        </div>\n      </Card>\n    );\n  },\n);\nToolbarRoot.displayName = 'Toolbar.Root';\n\n// ============================================================================\n// Toolbar Left (for horizontal) / Start (alias)\n// ============================================================================\n\ntype ToolbarSectionElement = React.ElementRef<'div'>;\ntype ToolbarSectionProps = FlexProps;\n\nconst ToolbarLeft = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ gap = '2', align = 'center', className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align={align}\n      gap={gap}\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarLeft', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarLeft.displayName = 'Toolbar.Left';\n\n// ============================================================================\n// Toolbar Center\n// ============================================================================\n\nconst ToolbarCenter = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ gap = '2', align = 'center', justify = 'center', className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align={align}\n      justify={justify}\n      gap={gap}\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarCenter', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarCenter.displayName = 'Toolbar.Center';\n\n// ============================================================================\n// Toolbar Right (for horizontal) / End (alias)\n// ============================================================================\n\nconst ToolbarRight = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ gap = '2', align = 'center', justify = 'end', className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align={align}\n      justify={justify}\n      gap={gap}\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarRight', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarRight.displayName = 'Toolbar.Right';\n\n// ============================================================================\n// Toolbar Title\n// ============================================================================\n\ntype ToolbarTitleElement = React.ElementRef<typeof Heading>;\ntype ToolbarTitleProps = React.ComponentPropsWithoutRef<typeof Heading>;\n\nconst ToolbarTitle = React.forwardRef<ToolbarTitleElement, ToolbarTitleProps>(\n  ({ className, size = '2', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (\n    <Heading\n      ref={forwardedRef}\n      size={size}\n      weight={weight}\n      truncate={truncate}\n      className={classNames('rt-ToolbarTitle', className)}\n      {...props}\n    >\n      {children}\n    </Heading>\n  ),\n);\nToolbarTitle.displayName = 'Toolbar.Title';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst Toolbar = ToolbarRoot as typeof ToolbarRoot & {\n  Left: typeof ToolbarLeft;\n  Center: typeof ToolbarCenter;\n  Right: typeof ToolbarRight;\n  Title: typeof ToolbarTitle;\n};\n\nToolbar.Left = ToolbarLeft;\nToolbar.Center = ToolbarCenter;\nToolbar.Right = ToolbarRight;\nToolbar.Title = ToolbarTitle;\n\nexport {\n  Toolbar,\n  ToolbarRoot as Root,\n  ToolbarLeft as Left,\n  ToolbarCenter as Center,\n  ToolbarRight as Right,\n  ToolbarTitle as Title,\n};\nexport type {\n  ToolbarRootProps as RootProps,\n  ToolbarSectionProps as LeftProps,\n  ToolbarSectionProps as CenterProps,\n  ToolbarSectionProps as RightProps,\n  ToolbarTitleProps as TitleProps,\n};\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "ToolbarRoot", "props", "forwardedRef", "anchor", "floating", "offset", "size", "variant", "material", "className", "style", "children", "restProps", "isHorizontal", "internalRef", "mergedRef", "node", "element", "parent", "update", "dimension", "computedStyle", "margin", "resizeObserver", "Card", "classNames", "ToolbarLeft", "gap", "align", "Flex", "ToolbarCenter", "justify", "ToolbarRight", "ToolbarTitle", "weight", "truncate", "Heading", "Toolbar"]
-}

package/dist/esm/chunk-5KICSAT7.js

@@ -1,2 +0,0 @@
-import{b as e}from"./chunk-KRJTW535.js";import{a as s}from"./chunk-NZJGC6ZW.js";var r=["1","2","3"],o=["vertical","horizontal","both"],l={...s,size:{type:"enum",className:"rt-r-size",values:r,default:"1",responsive:!0},...e,scrollbars:{type:"enum",values:o,default:"both"}};export{l as a};
-//# sourceMappingURL=chunk-5KICSAT7.js.map

package/dist/esm/chunk-CTA5ODAO.js

@@ -1,2 +0,0 @@
-import{a as S}from"./chunk-5GXFBLBJ.js";import{a as f}from"./chunk-UBOOUDS4.js";import{a as o}from"./chunk-5KICSAT7.js";import{a as n}from"./chunk-PS6NEG5A.js";import{a as c}from"./chunk-E23RKOQJ.js";import{b as a}from"./chunk-JUY7CBSL.js";import*as r from"react";import t from"classnames";import{ScrollArea as e}from"radix-ui";var C=r.forwardRef((P,u)=>{let{rest:A,...d}=S(P),[y,v]=f(d),{asChild:s,children:N,className:R,style:b,type:i,scrollHideDelay:g=i!=="scroll"?0:void 0,dir:z,size:p=o.size.default,radius:m=o.radius.default,scrollbars:l=o.scrollbars.default,...h}=A;return r.createElement(e.Root,{type:i,scrollHideDelay:g,className:t("rt-ScrollAreaRoot",y,R),style:c(v,b),asChild:s},n({asChild:s,children:N},w=>r.createElement(r.Fragment,null,r.createElement(e.Viewport,{...h,ref:u,className:"rt-ScrollAreaViewport"},w),r.createElement("div",{className:"rt-ScrollAreaViewportFocusRing"}),l!=="vertical"?r.createElement(e.Scrollbar,{"data-radius":m,orientation:"horizontal",className:t("rt-ScrollAreaScrollbar",a({className:"rt-r-size",value:p,propValues:o.size.values}))},r.createElement(e.Thumb,{className:"rt-ScrollAreaThumb"})):null,l!=="horizontal"?r.createElement(e.Scrollbar,{"data-radius":m,orientation:"vertical",className:t("rt-ScrollAreaScrollbar",a({className:"rt-r-size",value:p,propValues:o.size.values}))},r.createElement(e.Thumb,{className:"rt-ScrollAreaThumb"})):null,l==="both"?r.createElement(e.Corner,{className:"rt-ScrollAreaCorner"}):null)))});C.displayName="ScrollArea";export{C as a};
-//# sourceMappingURL=chunk-CTA5ODAO.js.map

package/dist/esm/chunk-CTA5ODAO.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/scroll-area.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';\n\nimport { scrollAreaPropDefs } from './scroll-area.props.js';\nimport { extractMarginProps } from '../helpers/extract-margin-props.js';\nimport { getMarginStyles } from '../helpers/get-margin-styles.js';\nimport { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';\nimport { getSubtree } from '../helpers/get-subtree.js';\nimport { mergeStyles } from '../helpers/merge-styles.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Viewport>;\ntype ScrollAreaOwnProps = GetPropDefTypes<typeof scrollAreaPropDefs>;\ninterface ScrollAreaProps\n  extends ComponentPropsWithout<typeof ScrollAreaPrimitive.Root, RemovedProps>,\n    ComponentPropsWithout<typeof ScrollAreaPrimitive.Viewport, RemovedProps | 'dir'>,\n    MarginProps,\n    ScrollAreaOwnProps {}\nconst ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props, forwardedRef) => {\n  const { rest: marginRest, ...marginProps } = extractMarginProps(props);\n  const [marginClassNames, marginCustomProperties] = getMarginStyles(marginProps);\n\n  const {\n    asChild,\n    children,\n    className,\n    style,\n    type,\n    scrollHideDelay = type !== 'scroll' ? 0 : undefined,\n    dir,\n    size = scrollAreaPropDefs.size.default,\n    radius = scrollAreaPropDefs.radius.default,\n    scrollbars = scrollAreaPropDefs.scrollbars.default,\n    ...viewportProps\n  } = marginRest;\n\n  return (\n    <ScrollAreaPrimitive.Root\n      type={type}\n      scrollHideDelay={scrollHideDelay}\n      className={classNames('rt-ScrollAreaRoot', marginClassNames, className)}\n      style={mergeStyles(marginCustomProperties, style)}\n      asChild={asChild}\n    >\n      {getSubtree({ asChild, children }, (children) => (\n        <>\n          <ScrollAreaPrimitive.Viewport\n            {...viewportProps}\n            ref={forwardedRef}\n            className=\"rt-ScrollAreaViewport\"\n          >\n            {children}\n          </ScrollAreaPrimitive.Viewport>\n\n          <div className=\"rt-ScrollAreaViewportFocusRing\" />\n\n          {scrollbars !== 'vertical' ? (\n            <ScrollAreaPrimitive.Scrollbar\n              data-radius={radius}\n              orientation=\"horizontal\"\n              className={classNames(\n                'rt-ScrollAreaScrollbar',\n                getResponsiveClassNames({\n                  className: 'rt-r-size',\n                  value: size,\n                  propValues: scrollAreaPropDefs.size.values,\n                }),\n              )}\n            >\n              <ScrollAreaPrimitive.Thumb className=\"rt-ScrollAreaThumb\" />\n            </ScrollAreaPrimitive.Scrollbar>\n          ) : null}\n\n          {scrollbars !== 'horizontal' ? (\n            <ScrollAreaPrimitive.Scrollbar\n              data-radius={radius}\n              orientation=\"vertical\"\n              className={classNames(\n                'rt-ScrollAreaScrollbar',\n                getResponsiveClassNames({\n                  className: 'rt-r-size',\n                  value: size,\n                  propValues: scrollAreaPropDefs.size.values,\n                }),\n              )}\n            >\n              <ScrollAreaPrimitive.Thumb className=\"rt-ScrollAreaThumb\" />\n            </ScrollAreaPrimitive.Scrollbar>\n          ) : null}\n\n          {scrollbars === 'both' ? (\n            <ScrollAreaPrimitive.Corner className=\"rt-ScrollAreaCorner\" />\n          ) : null}\n        </>\n      ))}\n    </ScrollAreaPrimitive.Root>\n  );\n});\nScrollArea.displayName = 'ScrollArea';\n\nexport { ScrollArea };\nexport type { ScrollAreaProps };\n"],
-  "mappings": "gPAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,cAAcC,MAA2B,WAoBlD,IAAMC,EAAmB,aAA+C,CAACC,EAAOC,IAAiB,CAC/F,GAAM,CAAE,KAAMC,EAAY,GAAGC,CAAY,EAAIC,EAAmBJ,CAAK,EAC/D,CAACK,EAAkBC,CAAsB,EAAIC,EAAgBJ,CAAW,EAExE,CACJ,QAAAK,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkBD,IAAS,SAAW,EAAI,OAC1C,IAAAE,EACA,KAAAC,EAAOC,EAAmB,KAAK,QAC/B,OAAAC,EAASD,EAAmB,OAAO,QACnC,WAAAE,EAAaF,EAAmB,WAAW,QAC3C,GAAGG,CACL,EAAIjB,EAEJ,OACE,gBAACkB,EAAoB,KAApB,CACC,KAAMR,EACN,gBAAiBC,EACjB,UAAWQ,EAAW,oBAAqBhB,EAAkBK,CAAS,EACtE,MAAOY,EAAYhB,EAAwBK,CAAK,EAChD,QAASH,GAERe,EAAW,CAAE,QAAAf,EAAS,SAAAC,CAAS,EAAIA,GAClC,gCACE,gBAACW,EAAoB,SAApB,CACE,GAAGD,EACJ,IAAKlB,EACL,UAAU,yBAETQ,CACH,EAEA,gBAAC,OAAI,UAAU,iCAAiC,EAE/CS,IAAe,WACd,gBAACE,EAAoB,UAApB,CACC,cAAaH,EACb,YAAY,aACZ,UAAWI,EACT,yBACAG,EAAwB,CACtB,UAAW,YACX,MAAOT,EACP,WAAYC,EAAmB,KAAK,MACtC,CAAC,CACH,GAEA,gBAACI,EAAoB,MAApB,CAA0B,UAAU,qBAAqB,CAC5D,EACE,KAEHF,IAAe,aACd,gBAACE,EAAoB,UAApB,CACC,cAAaH,EACb,YAAY,WACZ,UAAWI,EACT,yBACAG,EAAwB,CACtB,UAAW,YACX,MAAOT,EACP,WAAYC,EAAmB,KAAK,MACtC,CAAC,CACH,GAEA,gBAACI,EAAoB,MAApB,CAA0B,UAAU,qBAAqB,CAC5D,EACE,KAEHF,IAAe,OACd,gBAACE,EAAoB,OAApB,CAA2B,UAAU,sBAAsB,EAC1D,IACN,CACD,CACH,CAEJ,CAAC,EACDrB,EAAW,YAAc",
-  "names": ["React", "classNames", "ScrollAreaPrimitive", "ScrollArea", "props", "forwardedRef", "marginRest", "marginProps", "extractMarginProps", "marginClassNames", "marginCustomProperties", "getMarginStyles", "asChild", "children", "className", "style", "type", "scrollHideDelay", "dir", "size", "scrollAreaPropDefs", "radius", "scrollbars", "viewportProps", "ScrollAreaPrimitive", "classNames", "mergeStyles", "getSubtree", "getResponsiveClassNames"]
-}

package/dist/esm/chunk-JKS2YXMS.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-JKS2YXMS.js.map

package/dist/esm/chunk-W4WWN3RC.js

@@ -1,2 +0,0 @@
-import{a as m}from"./chunk-4XGGX2V2.js";import{a as b}from"./chunk-OS3FCYZY.js";var B={};b(B,{Button:()=>g,Content:()=>d,Item:()=>f,Root:()=>S,Viewport:()=>u,useMessageScroller:()=>v,useMessageScrollerScrollable:()=>y,useMessageScrollerVisibility:()=>w});import*as e from"react";import a from"classnames";import{MessageScroller as l,useMessageScroller as v,useMessageScrollerScrollable as y,useMessageScrollerVisibility as w}from"@shadcn/react/message-scroller";var S=e.forwardRef(({autoScroll:o=!0,defaultScrollPosition:r="end",scrollEdgeThreshold:t,scrollMargin:s,className:i,children:n,...c},p)=>e.createElement(l.Provider,{autoScroll:o,defaultScrollPosition:r,...t!=null?{scrollEdgeThreshold:t}:{},...s!=null?{scrollMargin:s}:{}},e.createElement(l.Root,{...c,ref:p,className:a("rt-MessageScrollerRoot",i)},n)));S.displayName="MessageScroller.Root";var u=e.forwardRef(({className:o,"aria-label":r,...t},s)=>e.createElement(l.Viewport,{"aria-label":r??"",...t,ref:s,className:a("rt-MessageScrollerViewport",o)}));u.displayName="MessageScroller.Viewport";var d=e.forwardRef(({className:o,...r},t)=>e.createElement(l.Content,{...r,ref:t,className:a("rt-MessageScrollerContent",o)}));d.displayName="MessageScroller.Content";var f=e.forwardRef(({className:o,...r},t)=>e.createElement(l.Item,{...r,ref:t,className:a("rt-MessageScrollerItem",o)}));f.displayName="MessageScroller.Item";var g=e.forwardRef(({direction:o="end",behavior:r,className:t,children:s,size:i="2",variant:n="surface",color:c="gray",radius:p="full","aria-label":P,...M},R)=>e.createElement(l.Button,{direction:o,...r?{behavior:r}:{},render:e.createElement(m,{...M,ref:R,size:i,variant:n,color:c,radius:p,"aria-label":P??(o==="end"?"Jump to the latest":"Jump to the first"),className:a("rt-MessageScrollerButton",t),"data-direction":o},s??e.createElement("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none","aria-hidden":!0,style:o==="start"?{transform:"rotate(180deg)"}:void 0},e.createElement("path",{d:"M7.5 2.5v10M3.5 8.5l4 4 4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})))}));g.displayName="MessageScroller.Button";export{v as a,y as b,w as c,S as d,u as e,d as f,f as g,g as h,B as i};
-//# sourceMappingURL=chunk-W4WWN3RC.js.map

package/dist/esm/chunk-W4WWN3RC.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/message-scroller.tsx"],
-  "sourcesContent": ["'use client';\n\n/**\n * MessageScroller \u2014 a transcript that follows a conversation.\n *\n * The behaviour is shadcn/ui's Message Scroller primitive (`@shadcn/react/message-scroller`,\n * MIT, https://ui.shadcn.com). Streaming, anchoring a new turn, keeping your place when history\n * loads above, and jumping back to the latest are a body of edge cases nobody should rewrite, so\n * Kookie takes the primitive and adds only the surface: the parts, the class names, the button.\n *\n * Anatomy\n * ```tsx\n * <MessageScroller.Root>\n *   <MessageScroller.Viewport aria-label=\"Conversation\">\n *     <MessageScroller.Content>\n *       <MessageScroller.Item messageId=\"u1\" scrollAnchor>\u2026</MessageScroller.Item>\n *       <MessageScroller.Item messageId=\"a1\">\u2026</MessageScroller.Item>\n *     </MessageScroller.Content>\n *   </MessageScroller.Viewport>\n *   <MessageScroller.Button aria-label=\"Jump to the latest\" />\n * </MessageScroller.Root>\n * ```\n *\n * The viewport is its own scroller. Kookie's `ScrollArea` is Radix's, and Radix cannot hand its\n * viewport element to another library, so the transcript scrolls natively with a thin scrollbar.\n *\n * Requires React 19, which the primitive needs.\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport {\n  MessageScroller as Primitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n  type MessageScrollerDefaultScrollPosition,\n  type MessageScrollerScrollOptions,\n  type MessageScrollerScrollable,\n  type MessageScrollerVisibilityState,\n} from '@shadcn/react/message-scroller';\n\nimport { IconButton, type IconButtonProps } from './icon-button.js';\n\ninterface RootProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Keeps the newest content in view while the reader is at the end. Default `true`.\n   * Once the reader scrolls up, the transcript stays where they are until they return.\n   */\n  autoScroll?: boolean;\n  /** Where the transcript opens: `end` (default), `start`, or the last anchored message. */\n  defaultScrollPosition?: MessageScrollerDefaultScrollPosition;\n  /** Distance in pixels from the end that still counts as \"at the end\". */\n  scrollEdgeThreshold?: number;\n  /** Space in pixels kept above a message when one is scrolled to or anchored. */\n  scrollMargin?: number;\n}\n\n/** Holds the scroll state. Everything else goes inside it. */\nconst Root = React.forwardRef<HTMLDivElement, RootProps>(\n  ({ autoScroll = true, defaultScrollPosition = 'end', scrollEdgeThreshold, scrollMargin, className, children, ...props }, forwardedRef) => (\n    <Primitive.Provider\n      autoScroll={autoScroll}\n      defaultScrollPosition={defaultScrollPosition}\n      {...(scrollEdgeThreshold != null ? { scrollEdgeThreshold } : {})}\n      {...(scrollMargin != null ? { scrollMargin } : {})}\n    >\n      <Primitive.Root {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerRoot', className)}>\n        {children}\n      </Primitive.Root>\n    </Primitive.Provider>\n  ),\n);\nRoot.displayName = 'MessageScroller.Root';\n\ninterface ViewportProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Name of the transcript region, e.g. \"Conversation\". */\n  'aria-label'?: string;\n  /** Keep the reader's place when older messages are added above. Default `true`. */\n  preserveScrollOnPrepend?: boolean;\n}\n\n/** The scrolling element. */\nconst Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(({ className, 'aria-label': label, ...props }, forwardedRef) => (\n  // The primitive names an unnamed viewport \"Messages\", in English. An empty name is skipped by\n  // accessible-name computation, so a transcript is only named when the app names it.\n  <Primitive.Viewport aria-label={label ?? ''} {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerViewport', className)} />\n));\nViewport.displayName = 'MessageScroller.Viewport';\n\ntype ContentProps = React.ComponentPropsWithoutRef<'div'>;\n\n/** The list of messages, inside the viewport. */\nconst Content = React.forwardRef<HTMLDivElement, ContentProps>(({ className, ...props }, forwardedRef) => (\n  <Primitive.Content {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerContent', className)} />\n));\nContent.displayName = 'MessageScroller.Content';\n\ninterface ItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** A stable id, so the row can be scrolled to with `useMessageScroller().scrollToMessage`. */\n  messageId?: string;\n  /** Anchor this row near the top when it arrives. Set it on the person's own messages. */\n  scrollAnchor?: boolean;\n}\n\n/** One row of the transcript. */\nconst Item = React.forwardRef<HTMLDivElement, ItemProps>(({ className, ...props }, forwardedRef) => (\n  <Primitive.Item {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerItem', className)} />\n));\nItem.displayName = 'MessageScroller.Item';\n\ntype ButtonProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> & {\n  /** Accessible name, in your words. Default \"Jump to the latest\". */\n  'aria-label'?: string;\n  /** `end` jumps to the latest message (default); `start` to the first. */\n  direction?: 'start' | 'end';\n  /** Scroll behaviour of the jump. Default `smooth`. */\n  behavior?: ScrollBehavior;\n};\n\n/**\n * Jumps back to the latest message. It renders only while the reader is away from the end.\n * Place it inside `Root`, after the viewport. It sits over the viewport's bottom edge.\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ direction = 'end', behavior, className, children, size = '2', variant = 'surface', color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (\n    <Primitive.Button\n      direction={direction}\n      {...(behavior ? { behavior } : {})}\n      render={\n        <IconButton\n          {...props}\n          ref={forwardedRef}\n          size={size}\n          variant={variant}\n          color={color}\n          radius={radius}\n          aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}\n          className={classNames('rt-MessageScrollerButton', className)}\n          data-direction={direction}\n        >\n          {children ?? (\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" aria-hidden style={direction === 'start' ? { transform: 'rotate(180deg)' } : undefined}>\n              <path d=\"M7.5 2.5v10M3.5 8.5l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          )}\n        </IconButton>\n      }\n    />\n  ),\n);\nButton.displayName = 'MessageScroller.Button';\n\nexport { Root, Viewport, Content, Item, Button, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };\nexport type {\n  RootProps as MessageScrollerRootProps,\n  ViewportProps as MessageScrollerViewportProps,\n  ContentProps as MessageScrollerContentProps,\n  ItemProps as MessageScrollerItemProps,\n  ButtonProps as MessageScrollerButtonProps,\n  MessageScrollerDefaultScrollPosition,\n  MessageScrollerScrollOptions,\n  MessageScrollerScrollable,\n  MessageScrollerVisibilityState,\n};\n"],
-  "mappings": "gFAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,EAAA,YAAAC,EAAA,SAAAC,EAAA,SAAAC,EAAA,aAAAC,EAAA,uBAAAC,EAAA,iCAAAC,EAAA,iCAAAC,IA6BA,UAAYC,MAAW,QACvB,OAAOC,MAAgB,aACvB,OACE,mBAAmBC,EACnB,sBAAAL,EACA,gCAAAC,EACA,gCAAAC,MAKK,iCAmBP,IAAMI,EAAa,aACjB,CAAC,CAAE,WAAAC,EAAa,GAAM,sBAAAC,EAAwB,MAAO,oBAAAC,EAAqB,aAAAC,EAAc,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IACvH,gBAACC,EAAU,SAAV,CACC,WAAYR,EACZ,sBAAuBC,EACtB,GAAIC,GAAuB,KAAO,CAAE,oBAAAA,CAAoB,EAAI,CAAC,EAC7D,GAAIC,GAAgB,KAAO,CAAE,aAAAA,CAAa,EAAI,CAAC,GAEhD,gBAACK,EAAU,KAAV,CAAgB,GAAGF,EAAO,IAAKC,EAAc,UAAWE,EAAW,yBAA0BL,CAAS,GACpGC,CACH,CACF,CAEJ,EACAN,EAAK,YAAc,uBAUnB,IAAMW,EAAiB,aAA0C,CAAC,CAAE,UAAAN,EAAW,aAAcO,EAAO,GAAGL,CAAM,EAAGC,IAG9G,gBAACC,EAAU,SAAV,CAAmB,aAAYG,GAAS,GAAK,GAAGL,EAAO,IAAKC,EAAc,UAAWE,EAAW,6BAA8BL,CAAS,EAAG,CAC5I,EACDM,EAAS,YAAc,2BAKvB,IAAME,EAAgB,aAAyC,CAAC,CAAE,UAAAR,EAAW,GAAGE,CAAM,EAAGC,IACvF,gBAACC,EAAU,QAAV,CAAmB,GAAGF,EAAO,IAAKC,EAAc,UAAWE,EAAW,4BAA6BL,CAAS,EAAG,CACjH,EACDQ,EAAQ,YAAc,0BAUtB,IAAMC,EAAa,aAAsC,CAAC,CAAE,UAAAT,EAAW,GAAGE,CAAM,EAAGC,IACjF,gBAACC,EAAU,KAAV,CAAgB,GAAGF,EAAO,IAAKC,EAAc,UAAWE,EAAW,yBAA0BL,CAAS,EAAG,CAC3G,EACDS,EAAK,YAAc,uBAenB,IAAMC,EAAe,aACnB,CAAC,CAAE,UAAAC,EAAY,MAAO,SAAAC,EAAU,UAAAZ,EAAW,SAAAC,EAAU,KAAAY,EAAO,IAAK,QAAAC,EAAU,UAAW,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,OAAQ,aAAcT,EAAO,GAAGL,CAAM,EAAGC,IACtJ,gBAACC,EAAU,OAAV,CACC,UAAWO,EACV,GAAIC,EAAW,CAAE,SAAAA,CAAS,EAAI,CAAC,EAChC,OACE,gBAACK,EAAA,CACE,GAAGf,EACJ,IAAKC,EACL,KAAMU,EACN,QAASC,EACT,MAAOC,EACP,OAAQC,EACR,aAAYT,IAAUI,IAAc,MAAQ,qBAAuB,qBACnE,UAAWN,EAAW,2BAA4BL,CAAS,EAC3D,iBAAgBW,GAEfV,GACC,gBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,cAAW,GAAC,MAAOU,IAAc,QAAU,CAAE,UAAW,gBAAiB,EAAI,QACvI,gBAAC,QAAK,EAAE,8BAA8B,OAAO,eAAe,YAAY,MAAM,cAAc,QAAQ,eAAe,QAAQ,CAC7H,CAEJ,EAEJ,CAEJ,EACAD,EAAO,YAAc",
-  "names": ["message_scroller_exports", "__export", "Button", "Content", "Item", "Root", "Viewport", "useMessageScroller", "useMessageScrollerScrollable", "useMessageScrollerVisibility", "React", "classNames", "Primitive", "Root", "autoScroll", "defaultScrollPosition", "scrollEdgeThreshold", "scrollMargin", "className", "children", "props", "forwardedRef", "Primitive", "classNames", "Viewport", "label", "Content", "Item", "Button", "direction", "behavior", "size", "variant", "color", "radius", "IconButton"]
-}