@clubmed/trident-ui 2.0.0-beta.4 → 2.0.0-beta.40

package/styles/ui/controls.css

@@ -1,8 +1,7 @@
 @layer utilities {
   /* This file is for styling the controls of the form inputs (checkbox, radio, switch, filter) */
   /* Styling the controls by their HTML semantic allows us to visually guarantee the non-regression of this semantic */
-  /* Radio and Checkbox */
-  label > span > input[type='checkbox']:not([role='switch']),
+  /* Radio  */
   label > span > input[type='radio'] {
     opacity: 0;
     position: absolute;
@@ -10,7 +9,6 @@
     height: 100%;
     border: 0;
   }
-  label > span > input[type='checkbox']:not([role='switch']) + span,
   label > span > input[type='radio'] + span {
     @apply border transition-all duration-200;
     --tw-ring-color: transparent;
@@ -20,25 +18,20 @@
     align-items: center;
     justify-content: center;
   }
-  label > span > input[type='checkbox']:not([role='switch']) + span svg,
   label > span > input[type='radio'] + span svg {
     opacity: 0;
     transform: scale(0);
     transform-origin: center;
     transition: all var(--transition-duration-boop) var(--transition-fn-boop);
   }
-  label > span > input[type='checkbox']:not([role='switch']):checked + span svg,
   label > span > input[type='radio']:checked + span svg {
     opacity: 1;
     transform: scale(1);
   }
-  label > span > input[type='checkbox']:not([role='switch']):checked + span,
-  label > span > input[type='checkbox']:not([role='switch']):not([disabled]):hover + span,
   label > span > input[type='radio']:checked + span,
   label > span > input[type='radio']:not([disabled]):hover + span {
     @apply border-black;
   }
-  label > span > input[type='checkbox']:not([role='switch']):focus-visible + span,
   label > span > input[type='radio']:focus-visible + span {
     @apply ring-8;
     --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
@@ -46,9 +39,6 @@
   label > span > input[type='radio'] + span {
     @apply rounded-full;
   }
-  label > span > input[type='checkbox']:not([role='switch']) + span {
-    border-radius: calc(var(--spacing) * 8);
-  }
   /* Filter */
   @media (hover: hover) and (pointer: fine) {
     label:active > input[type='checkbox'][data-name='Filter']:not(:disabled) {
@@ -100,62 +90,21 @@
     --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
   }
   /* Switch */
-  label > span > input[type='checkbox'][role='switch'] + span {
-    @apply transition-all;
+  input[role='switch'][data-name='Switch'] + span {
     @apply relative flex items-center transition-colors duration-200;
     @apply ring-0;
     --tw-ring-color: color-mix(in oklab, var(--color-lavender) 0%, transparent);
-    background-color: var(--color-middleGrey);
-    border-radius: var(--radius-pill);
-  }
-  label > span > input[type='checkbox'][role='switch'] + span > svg {
-    transition: all var(--transition-duration-boop) var(--transition-fn-boop);
-    transform: translate(calc(0% + 4px));
-  }
-  label > span > input[type='checkbox'][role='switch'] + span > svg circle + circle {
-    opacity: 1;
-    transition: opacity var(--transition-duration-boop) var(--transition-fn-boop);
-  }
-  label > span > input[type='checkbox'][role='switch'] + span > svg path {
-    opacity: 0;
-    scale: 0;
-    transform-origin: center;
-    transition:
-      opacity var(--transition-duration-boop) var(--transition-fn-boop),
-      scale var(--transition-duration-boop) var(--transition-fn-boop);
-  }
-  label > span > input[type='checkbox'][role='switch']:checked + span {
-    background-color: var(--color-saffron);
-  }
-  label > span > input[type='checkbox'][role='switch']:checked + span > svg {
-    transform: translate(calc(100% + 4px));
-  }
-  label > span > input[type='checkbox'][role='switch']:checked + span > svg circle + circle {
-    opacity: 0;
-  }
-  label > span > input[type='checkbox'][role='switch']:checked + span > svg path {
-    scale: 1;
-    opacity: 1;
-  }
-  label > span > input[type='checkbox'][role='switch']:focus-visible + span {
-    @apply ring-8;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
   }
 
-  button[role='switch'][data-name='Switch'] {
-    @apply relative flex items-center transition-colors duration-200;
-    @apply ring-0;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 0%, transparent);
-  }
-  button[role='switch'][data-name='Switch'] svg {
+  input[role='switch'][data-name='Switch'] + span svg {
     transition: all var(--transition-duration-boop) var(--transition-fn-boop);
     transform: translate(calc(0%));
   }
-  button[role='switch'][data-name='Switch'] svg circle + circle {
+  input[role='switch'][data-name='Switch'] + span svg circle + circle {
     opacity: 1;
     transition: opacity var(--transition-duration-boop) var(--transition-fn-boop);
   }
-  button[role='switch'][data-name='Switch'] svg path {
+  input[role='switch'][data-name='Switch'] + span svg path {
     opacity: 0;
     scale: 0;
     transform-origin: center;
@@ -163,20 +112,17 @@
       opacity var(--transition-duration-boop) var(--transition-fn-boop),
       scale var(--transition-duration-boop) var(--transition-fn-boop);
   }
-  button[role='switch'][data-name='Switch'][aria-checked='true'] {
-    background-color: var(--color-saffron);
-  }
-  button[role='switch'][data-name='Switch'][aria-checked='true'] svg {
+  input[role='switch'][data-name='Switch']:checked + span svg {
     transform: translate(calc(100%));
   }
-  button[role='switch'][data-name='Switch'][aria-checked='true'] svg circle + circle {
+  input[role='switch'][data-name='Switch']:checked + span svg circle + circle {
     opacity: 0;
   }
-  button[role='switch'][data-name='Switch'][aria-checked='true'] svg path {
+  input[role='switch'][data-name='Switch']:checked + span svg path {
     scale: 1;
     opacity: 1;
   }
-  button[role='switch'][data-name='Switch']:focus-visible {
+  input[role='switch'][data-name='Switch']:focus-visible + span {
     @apply ring-8;
     --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
   }

package/styles/ui/range.css

@@ -159,7 +159,7 @@
     color: hsl(0deg 0% 0%);
     font-size: 0.75rem;
     line-height: 0.875rem;
-    @apply font-semibold;
+    font-weight: 600;
 
     left: calc(0.5 * var(--thumbWidth));
   }

package/styles/variants.css

@@ -10,5 +10,3 @@
 }
 
 @custom-variant hoverable (@media (hover: hover) and (pointer: fine));
-
-@custom-variant popover ('open', '&:popover-open');

package/ui/AdvancedToast.js

@@ -1,15 +1,15 @@
 "use client";
 import { t as e } from "../chunks/clsx.js";
-import t from "./hooks/useResizeObserver.js";
-import { ElasticHeight as n } from "./ElasticHeight.js";
-import { Colors as r, getBgColor as i, getBorderColor as a, getTextColor as o } from "./helpers/colors/colors.js";
-import { useCountdown as s } from "./hooks/useCountdown.js";
+import { ElasticHeight as t } from "./ElasticHeight.js";
+import { Colors as n, getBgColor as r, getBorderColor as i, getTextColor as a } from "./helpers/colors/colors.js";
+import { useCountdown as o } from "./hooks/useCountdown.js";
+import s from "./hooks/useResizeObserver.js";
 import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
 import { Icon as f } from "@clubmed/trident-icons";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region lib/ui/AdvancedToast.tsx
-var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, children: x, accentColor: S = r.orange, duration: C = 1e4, onClose: w, toastId: T, updateHeight: E, ...D }) => {
-	let O = l(), [k, A] = d(!1), [j, M] = d(!1), N = u(null), { progress: P } = s({
+var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, children: x, accentColor: S = n.orange, duration: C = 1e4, onClose: w, toastId: T, updateHeight: E, ...D }) => {
+	let O = l(), [k, A] = d(!1), [j, M] = d(!1), N = u(null), { progress: P } = o({
 		duration: C,
 		isPaused: j,
 		isVisible: y
@@ -18,7 +18,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 		P === 100 && w?.();
 	}, [P, w]);
 	let F = () => M(!0), I = () => M(!1), L = () => M(!1);
-	return t({
+	return s({
 		ref: N,
 		onResize: () => {
 			N.current && E(T, N.current.offsetHeight);
@@ -26,7 +26,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 	}), /* @__PURE__ */ m("div", {
 		ref: N,
 		...D,
-		className: e(y ? "animate-slideRightEnter" : "animate-slideRightExit opacity-0", "relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden", a(S), h),
+		className: e(y ? "animate-slide-right-enter" : "animate-slide-right-exit opacity-0", "relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden", i(S), h),
 		role: "note",
 		onMouseDown: F,
 		onMouseUp: I,
@@ -35,7 +35,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 			/* @__PURE__ */ p(f, {
 				name: v,
 				width: "30px",
-				className: e("flex-shrink-0 pt-4", o(S))
+				className: e("flex-shrink-0 pt-4", a(S))
 			}),
 			/* @__PURE__ */ m("div", {
 				className: "flex flex-1 flex-col gap-12 pe-24 text-b4",
@@ -54,7 +54,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 						style: { rotate: k ? "180deg" : "0deg" },
 						className: "transition-all duration-300"
 					})]
-				}), /* @__PURE__ */ p(n, {
+				}), /* @__PURE__ */ p(t, {
 					isExpanded: k,
 					children: /* @__PURE__ */ p("div", {
 						className: "pt-4",
@@ -76,7 +76,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 			C !== !1 && /* @__PURE__ */ p("div", {
 				className: "absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16",
 				children: /* @__PURE__ */ p("div", {
-					className: i(S),
+					className: r(S),
 					style: {
 						width: "100%",
 						height: "100%",

package/ui/AdvancedToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slideRightEnter' : 'animate-slideRightExit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Icon\n        name={icon}\n        width=\"30px\"\n        className={clsx('flex-shrink-0 pt-4', getTextColor(accentColor))}\n      />\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,4BAA4B,oCACxC,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,GAAD;IACE,MAAM;IACN,OAAM;IACN,WAAW,EAAK,sBAAsB,EAAa,EAAY,CAAA;IAC/D,CAAA;GACF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}
+{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Icon\n        name={icon}\n        width=\"30px\"\n        className={clsx('flex-shrink-0 pt-4', getTextColor(accentColor))}\n      />\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,GAAD;IACE,MAAM;IACN,OAAM;IACN,WAAW,EAAK,sBAAsB,EAAa,EAAY,CAAA;IAC/D,CAAA;GACF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}

package/ui/BasicToast.js

@@ -10,7 +10,7 @@ function l({ className: l, description: u, href: d, icon: f, incentive: p, isVis
 	let S = r(v), C = a(), w = b ?? u;
 	return /* @__PURE__ */ c("div", {
 		...x,
-		className: e(m ? "animate-slideRightEnter" : "animate-slideRightExit opacity-0", "relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300", t(S), n(S), l),
+		className: e(m ? "animate-slide-right-enter" : "animate-slide-right-exit opacity-0", "relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300", t(S), n(S), l),
 		role: "note",
 		children: [
 			f && /* @__PURE__ */ s(o, {

package/ui/BasicToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicToast.js","names":[],"sources":["../../lib/ui/BasicToast.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, useId } from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { getBgColor, getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\nimport { Link } from './Link';\nimport type { Theme } from './types/Theme';\n\nexport interface BasicToastProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * @deprecated use children slot instead\n   */\n  description?: string;\n  href: string;\n  icon?: IconicNames;\n  incentive: string;\n  isVisible: boolean;\n  labels: { close: string };\n  onClick?: () => void;\n  onClose?: () => void;\n  theme: Theme;\n  title: string;\n}\n\nexport function BasicToast({\n  className,\n  description,\n  href,\n  icon,\n  incentive,\n  isVisible,\n  labels,\n  onClick,\n  onClose,\n  theme = 'dark',\n  title,\n  children,\n  ...attrs\n}: PropsWithChildren<BasicToastProps>) {\n  const color = getThemeColor(theme);\n  const id = useId();\n  const content = children ?? description;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slideRightEnter' : 'animate-slideRightExit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300',\n        getBgColor(color),\n        getComplementaryTextColor(color),\n        className,\n      )}\n      role=\"note\"\n    >\n      {icon && <Icon name={icon} width=\"30px\" />}\n      <a className=\"group pe-44\" href={href} onClick={onClick}>\n        <p className=\"mb-4 text-b3 font-bold\" id={id}>\n          {title}\n        </p>\n        {content && <div className=\"mb-12 text-b4\">{content}</div>}\n        <Link component=\"span\" className=\"text-b3 font-bold\" label={incentive} />\n      </a>\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className={clsx('absolute end-0 top-0 m-20', getComplementaryTextColor(color))}\n          onClick={onClose}\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAyBA,SAAgB,EAAW,EACzB,cACA,gBACA,SACA,SACA,cACA,cACA,WACA,YACA,YACA,WAAQ,QACR,UACA,aACA,GAAG,KACkC;CACrC,IAAM,IAAQ,EAAc,EAAM,EAC5B,IAAK,GAAO,EACZ,IAAU,KAAY;AAE5B,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,IAAY,4BAA4B,oCACxC,kFACA,EAAW,EAAM,EACjB,EAA0B,EAAM,EAChC,EACD;EACD,MAAK;YATP;GAWG,KAAQ,kBAAC,GAAD;IAAM,MAAM;IAAM,OAAM;IAAS,CAAA;GAC1C,kBAAC,KAAD;IAAG,WAAU;IAAoB;IAAe;cAAhD;KACE,kBAAC,KAAD;MAAG,WAAU;MAA6B;gBACvC;MACC,CAAA;KACH,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAiB;MAAc,CAAA;KAC1D,kBAAC,GAAD;MAAM,WAAU;MAAO,WAAU;MAAoB,OAAO;MAAa,CAAA;;;GAE1E,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAW,EAAK,6BAA6B,EAA0B,EAAM,CAAC;IAC9E,SAAS;cAET,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA"}
+{"version":3,"file":"BasicToast.js","names":[],"sources":["../../lib/ui/BasicToast.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, useId } from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { getBgColor, getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\nimport { Link } from './Link';\nimport type { Theme } from './types/Theme';\n\nexport interface BasicToastProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * @deprecated use children slot instead\n   */\n  description?: string;\n  href: string;\n  icon?: IconicNames;\n  incentive: string;\n  isVisible: boolean;\n  labels: { close: string };\n  onClick?: () => void;\n  onClose?: () => void;\n  theme: Theme;\n  title: string;\n}\n\nexport function BasicToast({\n  className,\n  description,\n  href,\n  icon,\n  incentive,\n  isVisible,\n  labels,\n  onClick,\n  onClose,\n  theme = 'dark',\n  title,\n  children,\n  ...attrs\n}: PropsWithChildren<BasicToastProps>) {\n  const color = getThemeColor(theme);\n  const id = useId();\n  const content = children ?? description;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 p-20 transition-opacity duration-300',\n        getBgColor(color),\n        getComplementaryTextColor(color),\n        className,\n      )}\n      role=\"note\"\n    >\n      {icon && <Icon name={icon} width=\"30px\" />}\n      <a className=\"group pe-44\" href={href} onClick={onClick}>\n        <p className=\"mb-4 text-b3 font-bold\" id={id}>\n          {title}\n        </p>\n        {content && <div className=\"mb-12 text-b4\">{content}</div>}\n        <Link component=\"span\" className=\"text-b3 font-bold\" label={incentive} />\n      </a>\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className={clsx('absolute end-0 top-0 m-20', getComplementaryTextColor(color))}\n          onClick={onClose}\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAyBA,SAAgB,EAAW,EACzB,cACA,gBACA,SACA,SACA,cACA,cACA,WACA,YACA,YACA,WAAQ,QACR,UACA,aACA,GAAG,KACkC;CACrC,IAAM,IAAQ,EAAc,EAAM,EAC5B,IAAK,GAAO,EACZ,IAAU,KAAY;AAE5B,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,kFACA,EAAW,EAAM,EACjB,EAA0B,EAAM,EAChC,EACD;EACD,MAAK;YATP;GAWG,KAAQ,kBAAC,GAAD;IAAM,MAAM;IAAM,OAAM;IAAS,CAAA;GAC1C,kBAAC,KAAD;IAAG,WAAU;IAAoB;IAAe;cAAhD;KACE,kBAAC,KAAD;MAAG,WAAU;MAA6B;gBACvC;MACC,CAAA;KACH,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAiB;MAAc,CAAA;KAC1D,kBAAC,GAAD;MAAM,WAAU;MAAO,WAAU;MAAoB,OAAO;MAAa,CAAA;;;GAE1E,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAW,EAAK,6BAA6B,EAA0B,EAAM,CAAC;IAC9E,SAAS;cAET,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA"}

package/ui/Breadcrumb.d.ts

@@ -1,10 +1,10 @@
 import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
 import { Theme } from './types/Theme';
 export interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {
-    items: ({
+    items: Array<{
         href: string;
         label: string;
-    } & ComponentPropsWithoutRef<'li'>)[];
+    }>;
     theme?: Theme;
 }
 export declare const Breadcrumb: FunctionComponent<BreadcrumbProps>;

package/ui/Breadcrumb.js

@@ -1,43 +1,39 @@
 import { t as e } from "../chunks/clsx.js";
-import { getTheme as t } from "./Breadcrumb.themes.js";
-import { createElement as n } from "react";
-import { Icon as r } from "@clubmed/trident-icons";
-import { jsx as i } from "react/jsx-runtime";
+import { getComplementaryTextColor as t, getThemeColor as n } from "./helpers/colors/colors.js";
+import { createElement as r } from "react";
+import { Icon as i } from "@clubmed/trident-icons";
+import { jsx as a } from "react/jsx-runtime";
 //#region lib/ui/Breadcrumb.tsx
-var a = ({ className: a, items: o, theme: s = "light", ...c }) => {
-	if (o.length == 0) return null;
-	let [l, u, , ...d] = o, f = d.length ? d[d.length - 1] : o[o.length - 1], p = d.length ? [
-		l,
-		u,
+var o = ({ className: o, items: s, theme: c = "light", ...l }) => {
+	if (s.length == 0) return null;
+	let u = t(n(c)), d = u === "text-white" ? u : "text-middleGrey", [f, p, , ...m] = s, h = m.length ? m[m.length - 1] : s[s.length - 1], g = m.length ? [
+		f,
+		p,
 		{
-			label: "",
-			href: "",
-			className: "breadcrumb-spacer"
+			label: "…",
+			href: ""
 		},
-		f
-	] : o, { thStart: m, thEnd: h } = t(s);
-	return /* @__PURE__ */ i("nav", {
-		role: "navigation",
+		h
+	] : s;
+	return /* @__PURE__ */ a("nav", {
 		"aria-label": "Breadcrumb",
-		...c,
-		className: e(a, "overflow-hidden"),
-		"data-name": "Breadcrumb",
-		children: /* @__PURE__ */ i("ol", {
-			className: "scrollbar-hidden flex items-center overflow-x-auto font-sans text-b4",
-			children: p.map(({ label: t, href: a, className: o, ...s }, c) => {
-				let l = c === p.length - 1, u = a && !l;
-				return /* @__PURE__ */ n("li", {
-					...s,
-					...l && { "aria-current": "page" },
-					className: e("flex shrink-0 items-center", {
-						[m]: !l,
-						[h]: l
-					}, o),
-					key: `${t}-${c}`
-				}, u ? /* @__PURE__ */ i("a", {
-					href: a,
+		...l,
+		className: e(o, "overflow-hidden"),
+		children: /* @__PURE__ */ a("ul", {
+			className: "scrollbar-hidden text-b4 flex items-center overflow-x-auto font-sans",
+			children: g.map(({ label: t, href: n }, o) => {
+				let s = o === g.length - 1, c = n && !s;
+				return /* @__PURE__ */ r("li", {
+					...s && { "aria-current": "page" },
+					className: e("flex shrink-0 items-center", { [d]: !s }, {
+						"font-bold": s,
+						[u]: s
+					}),
+					key: t
+				}, c ? /* @__PURE__ */ a("a", {
+					href: n,
 					children: t
-				}) : t, !l && /* @__PURE__ */ i(r, {
+				}) : t, !s && /* @__PURE__ */ a(i, {
 					className: "mx-4",
 					name: "Diamond",
 					width: "14px"
@@ -47,6 +43,6 @@ var a = ({ className: a, items: o, theme: s = "light", ...c }) => {
 	});
 };
 //#endregion
-export { a as Breadcrumb };
+export { o as Breadcrumb };
 
 //# sourceMappingURL=Breadcrumb.js.map

package/ui/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../lib/ui/Breadcrumb.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport { getTheme } from './Breadcrumb.themes';\n\nimport type { Theme } from './types/Theme';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  items: ({\n    href: string;\n    label: string;\n  } & ComponentPropsWithoutRef<'li'>)[];\n  theme?: Theme;\n}\n\nexport const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({\n  className,\n  items,\n  theme = 'light',\n  ...attrs\n}) => {\n  if (items.length == 0) {\n    return null;\n  }\n\n  const [first, second, , ...rest] = items;\n  const lastItem = rest.length ? rest[rest.length - 1] : items[items.length - 1];\n  const spacer = { label: '', href: '', className: 'breadcrumb-spacer' };\n  const itemsToRender = !rest.length ? items : [first, second, spacer, lastItem];\n\n  const { thStart, thEnd } = getTheme(theme);\n\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"Breadcrumb\"\n      {...attrs}\n      className={clsx(className, 'overflow-hidden')}\n      data-name=\"Breadcrumb\"\n    >\n      <ol className=\"scrollbar-hidden flex items-center overflow-x-auto font-sans text-b4\">\n        {itemsToRender.map(({ label, href, className, ...attrs }, index) => {\n          const isLast = index === itemsToRender.length - 1;\n          const isLink = href && !isLast;\n          return (\n            <li\n              {...attrs}\n              {...(isLast && { 'aria-current': 'page' })}\n              className={clsx(\n                'flex shrink-0 items-center',\n                {\n                  [thStart]: !isLast,\n                  [thEnd]: isLast,\n                },\n                className,\n              )}\n              key={`${label}-${index}`}\n            >\n              {isLink ? <a href={href}>{label}</a> : label}\n              {!isLast && <Icon className=\"mx-4\" name=\"Diamond\" width=\"14px\" />}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;AAgBA,IAAa,KAAkD,EAC7D,cACA,UACA,WAAQ,SACR,GAAG,QACC;AACJ,KAAI,EAAM,UAAU,EAClB,QAAO;CAGT,IAAM,CAAC,GAAO,KAAU,GAAG,KAAQ,GAC7B,IAAW,EAAK,SAAS,EAAK,EAAK,SAAS,KAAK,EAAM,EAAM,SAAS,IAEtE,IAAiB,EAAK,SAAiB;EAAC;EAAO;EADtC;GAAE,OAAO;GAAI,MAAM;GAAI,WAAW;GAAqB;EACD;EAAS,GAAzC,GAE/B,EAAE,YAAS,aAAU,EAAS,EAAM;AAE1C,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,GAAI;EACJ,WAAW,EAAK,GAAW,kBAAkB;EAC7C,aAAU;YAEV,kBAAC,MAAD;GAAI,WAAU;aACX,EAAc,KAAK,EAAE,UAAO,SAAM,cAAW,GAAG,KAAS,MAAU;IAClE,IAAM,IAAS,MAAU,EAAc,SAAS,GAC1C,IAAS,KAAQ,CAAC;AACxB,WACE,kBAAC,MAAD;KACE,GAAI;KACJ,GAAK,KAAU,EAAE,gBAAgB,QAAQ;KACzC,WAAW,EACT,8BACA;OACG,IAAU,CAAC;OACX,IAAQ;MACV,EACD,EACD;KACD,KAAK,GAAG,EAAM,GAAG;KAId,EAFF,IAAS,kBAAC,KAAD;KAAS;eAAO;KAAU,CAAA,GAAG,GACtC,CAAC,KAAU,kBAAC,GAAD;KAAM,WAAU;KAAO,MAAK;KAAU,OAAM;KAAS,CAAA,CAC9D;KAEP;GACC,CAAA;EACD,CAAA"}
+{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../lib/ui/Breadcrumb.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { Theme } from './types/Theme';\nimport { Icon } from '@clubmed/trident-icons';\nimport { getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  items: Array<{\n    href: string;\n    label: string;\n  }>;\n  theme?: Theme;\n}\n\nexport const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({\n  className,\n  items,\n  theme = 'light',\n  ...attrs\n}) => {\n  if (items.length == 0) {\n    return null;\n  }\n\n  const themeColor = getThemeColor(theme);\n  const accentColor = getComplementaryTextColor(themeColor);\n  const color = accentColor === 'text-white' ? accentColor : 'text-middleGrey';\n\n  const [first, second, , ...rest] = items;\n  const lastItem = rest.length ? rest[rest.length - 1] : items[items.length - 1];\n  const spacer = { label: '…', href: '' };\n  const itemsToRender = !rest.length ? items : [first, second, spacer, lastItem];\n\n  return (\n    <nav aria-label=\"Breadcrumb\" {...attrs} className={clsx(className, 'overflow-hidden')}>\n      <ul className=\"scrollbar-hidden text-b4 flex items-center overflow-x-auto font-sans\">\n        {itemsToRender.map(({ label, href }, index) => {\n          const isLast = index === itemsToRender.length - 1;\n          const isLink = href && !isLast;\n\n          return (\n            <li\n              {...(isLast && { 'aria-current': 'page' })}\n              className={clsx(\n                'flex shrink-0 items-center',\n                { [color]: !isLast },\n                {\n                  'font-bold': isLast,\n                  [accentColor]: isLast,\n                },\n              )}\n              key={label}\n            >\n              {isLink ? <a href={href}>{label}</a> : label}\n              {!isLast && <Icon className=\"mx-4\" name=\"Diamond\" width=\"14px\" />}\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;AAeA,IAAa,KAAkD,EAC7D,cACA,UACA,WAAQ,SACR,GAAG,QACC;AACJ,KAAI,EAAM,UAAU,EAClB,QAAO;CAIT,IAAM,IAAc,EADD,EAAc,EAAM,CACkB,EACnD,IAAQ,MAAgB,eAAe,IAAc,mBAErD,CAAC,GAAO,KAAU,GAAG,KAAQ,GAC7B,IAAW,EAAK,SAAS,EAAK,EAAK,SAAS,KAAK,EAAM,EAAM,SAAS,IAEtE,IAAiB,EAAK,SAAiB;EAAC;EAAO;EADtC;GAAE,OAAO;GAAK,MAAM;GAAI;EAC8B;EAAS,GAAzC;AAErC,QACE,kBAAC,OAAD;EAAK,cAAW;EAAa,GAAI;EAAO,WAAW,EAAK,GAAW,kBAAkB;YACnF,kBAAC,MAAD;GAAI,WAAU;aACX,EAAc,KAAK,EAAE,UAAO,WAAQ,MAAU;IAC7C,IAAM,IAAS,MAAU,EAAc,SAAS,GAC1C,IAAS,KAAQ,CAAC;AAExB,WACE,kBAAC,MAAD;KACE,GAAK,KAAU,EAAE,gBAAgB,QAAQ;KACzC,WAAW,EACT,8BACA,GAAG,IAAQ,CAAC,GAAQ,EACpB;MACE,aAAa;OACZ,IAAc;MAChB,CACF;KACD,KAAK;KAIF,EAFF,IAAS,kBAAC,KAAD;KAAS;eAAO;KAAU,CAAA,GAAG,GACtC,CAAC,KAAU,kBAAC,GAAD;KAAM,WAAU;KAAO,MAAK;KAAU,OAAM;KAAS,CAAA,CAC9D;KAEP;GACC,CAAA;EACD,CAAA"}

package/ui/ChatButton.js

@@ -10,7 +10,7 @@ function o({ children: o = i, className: s, type: c = "button", "aria-label": l,
 		"aria-label": m,
 		tabIndex: u ?? 0,
 		...p,
-		className: e("chat-button grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-8 focus-visible:ring-lavender/20 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]", d && "md:translate-x-[40px] focus-visible:translate-x-0", f === "hover" && "group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0", f === "active" && "group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0", "focus-visible:grid-cols-[24px_1fr]", s),
+		className: e("chat-border grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-8 focus-visible:ring-lavender/20 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]", d && "md:translate-x-[40px] focus-visible:translate-x-0", f === "hover" && "group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0", f === "active" && "group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0", "focus-visible:grid-cols-[24px_1fr]", s),
 		children: [/* @__PURE__ */ n(t, {
 			name: "Sparkles",
 			className: e("chat-button-icon w-24 transition-all", d && "relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0")

package/ui/ChatButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatButton.js","names":[],"sources":["../../lib/ui/ChatButton.tsx"],"sourcesContent":["import { Icon } from '@clubmed/trident-icons';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nconst DEFAULT_TEASER_COPY = 'Hello, Ask me a question';\nconst FALLBACK_ARIA_LABEL = 'Chat with your assistant';\n\nexport type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  offset?: boolean;\n  unfoldOn?: 'hover' | 'active';\n};\n\nexport function ChatButton({\n  children = DEFAULT_TEASER_COPY,\n  className,\n  type = 'button',\n  'aria-label': ariaLabel,\n  tabIndex,\n  offset,\n  unfoldOn = 'hover',\n  ...rest\n}: ChatButtonProps) {\n  const label =\n    ariaLabel ??\n    (typeof children === 'string' && children.trim().length > 0\n      ? children.trim()\n      : FALLBACK_ARIA_LABEL);\n\n  return (\n    <button\n      type={type}\n      aria-label={label}\n      tabIndex={tabIndex ?? 0}\n      {...rest}\n      className={twMerge(\n        'chat-button grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-8 focus-visible:ring-lavender/20 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]',\n        offset && 'md:translate-x-[40px] focus-visible:translate-x-0',\n        unfoldOn === 'hover' &&\n          'group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0',\n        unfoldOn === 'active' &&\n          'group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0',\n        'focus-visible:grid-cols-[24px_1fr]',\n        className,\n      )}\n    >\n      <Icon\n        name=\"Sparkles\"\n        className={twMerge(\n          'chat-button-icon w-24 transition-all',\n          offset &&\n            'relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0',\n        )}\n      />\n      <div className=\"grid grid-cols-[0fr] overflow-hidden opacity-0 transition-opacity group-hover/hoverChatbutton:opacity-100 group-focus-visible/Chatbutton:opacity-100 group-active/activeChatbutton:opacity-100 duration-500\">\n        <span\n          aria-hidden=\"true\"\n          className=\"chat-button-text items-center ps-20 flex gap-10 whitespace-nowrap font-semibold text-b3 text-black\"\n        >\n          {children}\n          <Icon name=\"ArrowTailRight\" width=\"24px\" />\n        </span>\n      </div>\n    </button>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAsB,4BACtB,IAAsB;AAO5B,SAAgB,EAAW,EACzB,cAAW,GACX,cACA,UAAO,UACP,cAAc,GACd,aACA,WACA,cAAW,SACX,GAAG,KACe;CAClB,IAAM,IACJ,MACC,OAAO,KAAa,YAAY,EAAS,MAAM,CAAC,SAAS,IACtD,EAAS,MAAM,GACf;AAEN,QACE,kBAAC,UAAD;EACQ;EACN,cAAY;EACZ,UAAU,KAAY;EACtB,GAAI;EACJ,WAAW,EACT,6UACA,KAAU,qDACV,MAAa,WACX,wEACF,MAAa,YACX,2EACF,sCACA,EACD;YAdH,CAgBE,kBAAC,GAAD;GACE,MAAK;GACL,WAAW,EACT,wCACA,KACE,mJACH;GACD,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;cAFZ,CAIG,GACD,kBAAC,GAAD;KAAM,MAAK;KAAiB,OAAM;KAAS,CAAA,CACtC;;GACH,CAAA,CACC"}
+{"version":3,"file":"ChatButton.js","names":[],"sources":["../../lib/ui/ChatButton.tsx"],"sourcesContent":["import { Icon } from '@clubmed/trident-icons';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nconst DEFAULT_TEASER_COPY = 'Hello, Ask me a question';\nconst FALLBACK_ARIA_LABEL = 'Chat with your assistant';\n\nexport type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  offset?: boolean;\n  unfoldOn?: 'hover' | 'active';\n};\n\nexport function ChatButton({\n  children = DEFAULT_TEASER_COPY,\n  className,\n  type = 'button',\n  'aria-label': ariaLabel,\n  tabIndex,\n  offset,\n  unfoldOn = 'hover',\n  ...rest\n}: ChatButtonProps) {\n  const label =\n    ariaLabel ??\n    (typeof children === 'string' && children.trim().length > 0\n      ? children.trim()\n      : FALLBACK_ARIA_LABEL);\n\n  return (\n    <button\n      type={type}\n      aria-label={label}\n      tabIndex={tabIndex ?? 0}\n      {...rest}\n      className={twMerge(\n        'chat-border grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-8 focus-visible:ring-lavender/20 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]',\n        offset && 'md:translate-x-[40px] focus-visible:translate-x-0',\n        unfoldOn === 'hover' &&\n          'group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0',\n        unfoldOn === 'active' &&\n          'group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0',\n        'focus-visible:grid-cols-[24px_1fr]',\n        className,\n      )}\n    >\n      <Icon\n        name=\"Sparkles\"\n        className={twMerge(\n          'chat-button-icon w-24 transition-all',\n          offset &&\n            'relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0',\n        )}\n      />\n      <div className=\"grid grid-cols-[0fr] overflow-hidden opacity-0 transition-opacity group-hover/hoverChatbutton:opacity-100 group-focus-visible/Chatbutton:opacity-100 group-active/activeChatbutton:opacity-100 duration-500\">\n        <span\n          aria-hidden=\"true\"\n          className=\"chat-button-text items-center ps-20 flex gap-10 whitespace-nowrap font-semibold text-b3 text-black\"\n        >\n          {children}\n          <Icon name=\"ArrowTailRight\" width=\"24px\" />\n        </span>\n      </div>\n    </button>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAsB,4BACtB,IAAsB;AAO5B,SAAgB,EAAW,EACzB,cAAW,GACX,cACA,UAAO,UACP,cAAc,GACd,aACA,WACA,cAAW,SACX,GAAG,KACe;CAClB,IAAM,IACJ,MACC,OAAO,KAAa,YAAY,EAAS,MAAM,CAAC,SAAS,IACtD,EAAS,MAAM,GACf;AAEN,QACE,kBAAC,UAAD;EACQ;EACN,cAAY;EACZ,UAAU,KAAY;EACtB,GAAI;EACJ,WAAW,EACT,6UACA,KAAU,qDACV,MAAa,WACX,wEACF,MAAa,YACX,2EACF,sCACA,EACD;YAdH,CAgBE,kBAAC,GAAD;GACE,MAAK;GACL,WAAW,EACT,wCACA,KACE,mJACH;GACD,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;cAFZ,CAIG,GACD,kBAAC,GAAD;KAAM,MAAK;KAAiB,OAAM;KAAS,CAAA,CACtC;;GACH,CAAA,CACC"}

package/ui/ChatInput.d.ts

@@ -0,0 +1,10 @@
+import { FormHTMLAttributes } from 'react';
+export interface ChatInputProps extends FormHTMLAttributes<HTMLFormElement> {
+    value: string;
+    placeholder?: string;
+    onValueChange: (value: string) => void;
+    onSubmit: () => void;
+    /** Fallback for when the browser does not support the Web Speech API */
+    onAudioClick?: () => void;
+}
+export declare function ChatInput({ value, placeholder, onValueChange, onSubmit, onAudioClick, className, ...props }: ChatInputProps): import("react/jsx-runtime").JSX.Element;

package/ui/ChatInput.js

@@ -0,0 +1,149 @@
+"use client";
+import { Button as e } from "./buttons/Button.js";
+import { twMerge as t } from "./helpers/twMerge.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/ui/ChatInput.tsx
+var s = 12, c = 48, l = 8;
+function u(e) {
+	let t = r(e);
+	return n(() => {
+		t.current = e;
+	}), t;
+}
+var d = 3e3;
+function f(e) {
+	let [t, a] = i(!1), [o, s] = i(!1), c = r(null), l = r(null), f = r(!1), p = u(e);
+	function m() {
+		l.current && clearTimeout(l.current);
+	}
+	function h() {
+		m(), l.current = setTimeout(() => {
+			f.current = !1, s(!1), c.current?.stop();
+		}, d);
+	}
+	n(() => {
+		let e = window.webkitSpeechRecognition ?? window.SpeechRecognition;
+		if (!e) return;
+		a(!0);
+		let t = new e();
+		return t.continuous = !0, t.interimResults = !0, t.lang = navigator.language, t.onresult = (e) => {
+			let t = Array.from(e.results).map((e) => e[0].transcript).join("");
+			p.current(t), h();
+		}, t.onend = () => {
+			if (m(), f.current) try {
+				t.start();
+			} catch {}
+			else s(!1);
+		}, t.onerror = (e) => {
+			(e.error === "not-allowed" || e.error === "aborted") && (f.current = !1, s(!1), m());
+		}, c.current = t, () => {
+			t.abort(), m();
+		};
+	}, []);
+	function g() {
+		let e = c.current;
+		e && (f.current ? (f.current = !1, e.stop()) : (f.current = !0, s(!0), e.start(), h()));
+	}
+	return {
+		isSupported: t,
+		isListening: o,
+		toggle: g
+	};
+}
+function p(e) {
+	let t = r(null);
+	return n(() => {
+		let n = t.current;
+		if (!e) {
+			n && (n.style.height = "0px");
+			return;
+		}
+		let r, i = null, a = null;
+		return navigator.mediaDevices.getUserMedia({
+			audio: !0,
+			video: !1
+		}).then((e) => {
+			i = e, a = new AudioContext();
+			let n = a.createMediaStreamSource(i), o = a.createAnalyser();
+			o.fftSize = 256, n.connect(o);
+			let s = new Uint8Array(o.frequencyBinCount);
+			function c() {
+				o.getByteFrequencyData(s);
+				let e = s.reduce((e, t) => e + t, 0) / s.length, n = t.current;
+				n && (n.style.height = `${Math.sqrt(e / 255) * 10}px`), r = requestAnimationFrame(c);
+			}
+			r = requestAnimationFrame(c);
+		}), () => {
+			cancelAnimationFrame(r), i?.getTracks().forEach((e) => e.stop()), a?.close();
+		};
+	}, [e]), t;
+}
+function m({ value: n, placeholder: r = "Ask a question?", onValueChange: u, onSubmit: d, onAudioClick: m, className: h, ...g }) {
+	let [_, v] = i(!1), y = n.trim(), b = _ || y.length > 0, { isSupported: x, isListening: S, toggle: C } = f(u), w = p(S), T = x || !!m, E = T ? c + l + c : c;
+	function D() {
+		x ? C() : m?.();
+	}
+	function O(e) {
+		e.preventDefault(), y && d();
+	}
+	return /* @__PURE__ */ o("form", {
+		onSubmit: O,
+		onMouseDown: (e) => {
+			e.target.tagName !== "TEXTAREA" && e.preventDefault();
+		},
+		...g,
+		style: { paddingBottom: b ? s + l + c : s },
+		className: t("relative flex items-start overflow-hidden bg-white border border-light-grey p-12 w-full", "transition-[padding-bottom,border-radius] duration-250 ease-out rounded-b-[24]", b ? "rounded-32" : "rounded-[40]", h),
+		children: [/* @__PURE__ */ a("textarea", {
+			rows: b ? 3 : 1,
+			value: n,
+			onChange: (e) => u(e.target.value),
+			onKeyDown: (e) => {
+				e.key === "Enter" && (e.metaKey || e.ctrlKey) && y && (e.preventDefault(), d());
+			},
+			onFocus: () => v(!0),
+			onBlur: () => v(!1),
+			placeholder: r,
+			"aria-label": r,
+			style: { marginInlineEnd: b ? 0 : E + l },
+			className: t("scrollbar-hidden bg-transparent text-b3 py-12 outline-none resize-none w-full px-20 border border-middleGrey", "transition-[margin-inline-end,border-radius] duration-250 ease-out", b ? "text-black rounded-[20]" : "text-darkGrey placeholder:text-darkGrey rounded-[40]")
+		}), /* @__PURE__ */ o("div", {
+			style: {
+				insetInlineStart: b ? `calc(50% - ${E / 2}px)` : `calc(100% - ${s + E}px)`,
+				bottom: s
+			},
+			className: "absolute flex gap-8 items-center transition-[inset-inline-start] duration-250 ease-out",
+			children: [/* @__PURE__ */ a(e, {
+				type: "submit",
+				"aria-label": "Send message",
+				disabled: !y,
+				variant: "circle",
+				color: "saffron",
+				icon: "ArrowTailRight",
+				iconWidth: "24px"
+			}), T && /* @__PURE__ */ a(e, {
+				type: "button",
+				"aria-label": S ? "Stop recording" : "Use microphone",
+				"aria-pressed": S,
+				onClick: D,
+				variant: "circle",
+				theme: S ? "solid" : "outline",
+				color: S ? "sienna" : "black",
+				icon: "Audio",
+				iconWidth: "24px",
+				className: t("relative", S && "animate-pulse", !S && "border-lightGrey"),
+				children: /* @__PURE__ */ a("span", {
+					ref: w,
+					"aria-hidden": "true",
+					className: "bg-current absolute w-5 bottom-21",
+					style: { height: "0px" }
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { m as ChatInput };
+
+//# sourceMappingURL=ChatInput.js.map

package/ui/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","names":[],"sources":["../../lib/ui/ChatInput.tsx"],"sourcesContent":["/// <reference types=\"@types/dom-speech-recognition\" />\n'use client';\n\nimport type { FormHTMLAttributes } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from './buttons/Button';\nimport { twMerge } from './helpers/twMerge';\n\nexport interface ChatInputProps extends FormHTMLAttributes<HTMLFormElement> {\n  value: string;\n  placeholder?: string;\n  onValueChange: (value: string) => void;\n  onSubmit: () => void;\n  /** Fallback for when the browser does not support the Web Speech API */\n  onAudioClick?: () => void;\n}\n\nconst FORM_PAD = 12; // matches p-12\nconst BTN_SIZE = 48; // matches size-48\nconst BTN_GAP = 8; // matches gap-8\n\n// Keep onValueChange stable inside the recognition handler without re-creating the SR instance\nfunction useCallbackRef<T extends (...args: never[]) => unknown>(fn: T) {\n  const ref = useRef(fn);\n  useEffect(() => {\n    ref.current = fn;\n  });\n  return ref;\n}\n\nconst SILENCE_TIMEOUT_MS = 3_000;\n\nfunction useSpeechRecognition(onValueChange: (v: string) => void) {\n  const [isSupported, setIsSupported] = useState(false);\n  const [isListening, setIsListening] = useState(false);\n  const recognitionRef = useRef<SpeechRecognition | null>(null);\n  const silenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isListeningRef = useRef(false);\n  const onValueChangeRef = useCallbackRef(onValueChange);\n\n  function clearSilenceTimer() {\n    if (silenceTimerRef.current) clearTimeout(silenceTimerRef.current);\n  }\n\n  function resetSilenceTimer() {\n    clearSilenceTimer();\n    silenceTimerRef.current = setTimeout(() => {\n      isListeningRef.current = false;\n      setIsListening(false);\n      recognitionRef.current?.stop();\n    }, SILENCE_TIMEOUT_MS);\n  }\n\n  useEffect(() => {\n    const SR: typeof SpeechRecognition | undefined =\n      (window as Window & { webkitSpeechRecognition?: typeof SpeechRecognition })\n        .webkitSpeechRecognition ?? window.SpeechRecognition;\n    if (!SR) return;\n\n    setIsSupported(true);\n\n    const recognition = new SR();\n    recognition.continuous = true;\n    recognition.interimResults = true;\n    recognition.lang = navigator.language;\n\n    recognition.onresult = (event: SpeechRecognitionEvent) => {\n      const transcript = Array.from(event.results)\n        .map((r: SpeechRecognitionResult) => r[0].transcript)\n        .join('');\n      onValueChangeRef.current(transcript);\n      resetSilenceTimer();\n    };\n\n    recognition.onend = () => {\n      clearSilenceTimer();\n      // Restart automatically if the user hasn't manually stopped (browser cut us off)\n      if (isListeningRef.current) {\n        try {\n          recognition.start();\n        } catch {\n          /* already starting */\n        }\n      } else {\n        setIsListening(false);\n      }\n    };\n\n    recognition.onerror = (e: SpeechRecognitionErrorEvent) => {\n      if (e.error === 'not-allowed' || e.error === 'aborted') {\n        isListeningRef.current = false;\n        setIsListening(false);\n        clearSilenceTimer();\n      }\n    };\n\n    recognitionRef.current = recognition;\n    return () => {\n      recognition.abort();\n      clearSilenceTimer();\n    };\n    // SR detection and instance creation only needs to run once on mount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  function toggle() {\n    const recognition = recognitionRef.current;\n    if (!recognition) return;\n    if (isListeningRef.current) {\n      isListeningRef.current = false;\n      recognition.stop();\n    } else {\n      isListeningRef.current = true;\n      setIsListening(true);\n      recognition.start();\n      resetSilenceTimer();\n    }\n  }\n\n  return { isSupported, isListening, toggle };\n}\n\n/**\n * Drives the audio-level indicator by writing directly to the DOM element's\n * style — avoids triggering a React re-render on every animation frame\n * (rule: rerender-use-ref-transient-values).\n *\n * Returns a ref to attach to the indicator <span>.\n */\nfunction useAudioLevel(isListening: boolean) {\n  const indicatorRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    const el = indicatorRef.current;\n\n    if (!isListening) {\n      if (el) el.style.height = '0px';\n      return;\n    }\n\n    let animId: number;\n    let stream: MediaStream | null = null;\n    let ctx: AudioContext | null = null;\n\n    navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then((s) => {\n      stream = s;\n      ctx = new AudioContext();\n      const source = ctx.createMediaStreamSource(stream);\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 256;\n      source.connect(analyser);\n      const data = new Uint8Array(analyser.frequencyBinCount);\n\n      function tick() {\n        analyser.getByteFrequencyData(data);\n        const avg = data.reduce((sum, v) => sum + v, 0) / data.length;\n        // Square-root curve so quiet sounds register more visibly\n        const node = indicatorRef.current;\n        if (node) node.style.height = `${Math.sqrt(avg / 255) * 10}px`;\n        animId = requestAnimationFrame(tick);\n      }\n      animId = requestAnimationFrame(tick);\n    });\n\n    return () => {\n      cancelAnimationFrame(animId);\n      stream?.getTracks().forEach((t) => t.stop());\n      ctx?.close();\n    };\n  }, [isListening]);\n\n  return indicatorRef;\n}\n\nexport function ChatInput({\n  value,\n  placeholder = 'Ask a question?',\n  onValueChange,\n  onSubmit,\n  onAudioClick,\n  className,\n  ...props\n}: ChatInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const trimmed = value.trim();\n  const isOpen = isFocused || trimmed.length > 0;\n  const { isSupported, isListening, toggle } = useSpeechRecognition(onValueChange);\n  const audioIndicatorRef = useAudioLevel(isListening);\n\n  const showAudio = isSupported || !!onAudioClick;\n  const btnW = showAudio ? BTN_SIZE + BTN_GAP + BTN_SIZE : BTN_SIZE;\n\n  function handleAudioClick() {\n    if (isSupported) {\n      toggle();\n    } else {\n      onAudioClick?.();\n    }\n  }\n\n  function handleSubmit(e: React.FormEvent) {\n    e.preventDefault();\n    if (trimmed) onSubmit();\n  }\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      onMouseDown={(e) => {\n        if ((e.target as HTMLElement).tagName !== 'TEXTAREA') e.preventDefault();\n      }}\n      {...props}\n      style={{\n        paddingBottom: isOpen ? FORM_PAD + BTN_GAP + BTN_SIZE : FORM_PAD,\n      }}\n      className={twMerge(\n        'relative flex items-start overflow-hidden bg-white border border-light-grey p-12 w-full',\n        'transition-[padding-bottom,border-radius] duration-250 ease-out rounded-b-[24]',\n        isOpen ? 'rounded-32' : 'rounded-[40]',\n        className,\n      )}\n    >\n      <textarea\n        rows={isOpen ? 3 : 1}\n        value={value}\n        onChange={(e) => onValueChange(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && trimmed) {\n            e.preventDefault();\n            onSubmit();\n          }\n        }}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        placeholder={placeholder}\n        aria-label={placeholder}\n        style={{\n          marginInlineEnd: isOpen ? 0 : btnW + BTN_GAP,\n        }}\n        className={twMerge(\n          'scrollbar-hidden bg-transparent text-b3 py-12 outline-none resize-none w-full px-20 border border-middleGrey',\n          'transition-[margin-inline-end,border-radius] duration-250 ease-out',\n          isOpen\n            ? 'text-black rounded-[20]'\n            : 'text-darkGrey placeholder:text-darkGrey rounded-[40]',\n        )}\n      />\n\n      <div\n        style={{\n          insetInlineStart: isOpen\n            ? `calc(50% - ${btnW / 2}px)`\n            : `calc(100% - ${FORM_PAD + btnW}px)`,\n          bottom: FORM_PAD,\n        }}\n        className=\"absolute flex gap-8 items-center transition-[inset-inline-start] duration-250 ease-out\"\n      >\n        <Button\n          type=\"submit\"\n          aria-label=\"Send message\"\n          disabled={!trimmed}\n          variant=\"circle\"\n          color=\"saffron\"\n          icon=\"ArrowTailRight\"\n          iconWidth=\"24px\"\n        />\n        {showAudio && (\n          <Button\n            type=\"button\"\n            aria-label={isListening ? 'Stop recording' : 'Use microphone'}\n            aria-pressed={isListening}\n            onClick={handleAudioClick}\n            variant=\"circle\"\n            theme={isListening ? 'solid' : 'outline'}\n            color={isListening ? 'sienna' : 'black'}\n            icon=\"Audio\"\n            iconWidth=\"24px\"\n            className={twMerge(\n              'relative',\n              isListening && 'animate-pulse',\n              !isListening && 'border-lightGrey',\n            )}\n          >\n            <span\n              ref={audioIndicatorRef}\n              aria-hidden=\"true\"\n              className=\"bg-current absolute w-5 bottom-21\"\n              style={{ height: '0px' }}\n            />\n          </Button>\n        )}\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}