2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T2415,"use client"; import { IconStar, IconStarFilled } from "@tabler/icons-react"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; import { cn } from "@/lib/utils"; const ratingInput = cva( "group/ri relative inline-flex w-fit touch-manipulation items-center rounded-lg text-muted-foreground outline-none select-none [--rating-active:var(--rating-color,var(--foreground))] focus-visible:ring-3 focus-visible:ring-ring/50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50", { variants: { size: { sm: "[--ri-icon:1rem] [--ri-box:2rem]", default: "[--ri-icon:1.5rem] [--ri-box:2.75rem]", lg: "[--ri-icon:2rem] [--ri-box:3.25rem]", }, }, defaultVariants: { size: "default" }, }, ); export type RatingInputItemState = { /** Zero-based position. */ index: number; /** 0, 0.5 or 1: how much of this item is lit right now (preview included). */ fill: number; /** The item is lit at all. */ active: boolean; /** The pointer is previewing this fill instead of the committed value. */ previewing: boolean; /** The per-item icon, when `icons` was given. */ icon: React.ReactNode; }; export type RatingInputProps = VariantProps & { /** Controlled value, 0 to `max`. */ value?: number; defaultValue?: number; onValueChange?: (value: number) => void; /** Number of items. */ max?: number; /** 1 for whole items, 0.5 for half steps. */ step?: 1 | 0.5; /** Visible label, also the accessible name. */ label?: React.ReactNode; /** Accessible name when there is no visible label. */ "aria-label"?: string; /** Icon for every item. Defaults to a star. Filled icons are clipped to the lit amount. */ icon?: React.ReactNode; /** One icon per item (for example faces from sad to happy). Lit items show in color, the rest recede. */ icons?: React.ReactNode[]; /** Replace the drawing of every item. */ renderItem?: (item: RatingInputItemState) => React.ReactNode; /** Text beside the items, from the value being shown (preview included). */ valueLabel?: (value: number) => React.ReactNode; /** Submitted with a form under this name. */ name?: string; disabled?: boolean; readOnly?: boolean; className?: string; }; /** Interactive sibling of the read-only Rating. One focus stop, arrow keys, hover preview, half steps. */ export function RatingInput({ value, defaultValue = 0, onValueChange, max = 5, step = 1, label, "aria-label": ariaLabel, icon, icons, renderItem, valueLabel, name, disabled = false, readOnly = false, size, className, }: RatingInputProps) { const [inner, setInner] = React.useState(defaultValue); const current = clamp(value ?? inner, 0, max); const [hover, setHover] = React.useState(null); const [pressed, setPressed] = React.useState(false); const labelId = React.useId(); const interactive = !disabled && !readOnly; const shown = interactive && hover !== null ? hover : current; const commit = (next: number) => { const v = clamp(next, 0, max); if (v === current) return; setInner(v); onValueChange?.(v); }; const valueAt = (index: number, e: React.PointerEvent | React.MouseEvent) => { if (step === 1) return index + 1; const rect = e.currentTarget.getBoundingClientRect(); const rtl = getComputedStyle(e.currentTarget).direction === "rtl"; const frac = rtl ? (rect.right - e.clientX) / rect.width : (e.clientX - rect.left) / rect.width; return index + (frac <= 0.5 ? 0.5 : 1); }; const onKeyDown = (e: React.KeyboardEvent) => { if (!interactive) return; const rtl = getComputedStyle(e.currentTarget).direction === "rtl"; const up = e.key === "ArrowUp" || e.key === (rtl ? "ArrowLeft" : "ArrowRight"); const down = e.key === "ArrowDown" || e.key === (rtl ? "ArrowRight" : "ArrowLeft"); if (up) commit(current + step); else if (down) commit(current - step); else if (e.key === "Home") commit(0); else if (e.key === "End") commit(max); else if (/^[0-9]$/.test(e.key)) commit(Number(e.key)); else return; e.preventDefault(); }; const valueText = `${trim(current)} out of ${max}`; return (

{label ? ( {label} ) : null}

{ setHover(null); setPressed(false); }} onPointerDown={() => interactive && setPressed(true)} onPointerUp={() => setPressed(false)} className={ratingInput({ size })} > {Array.from({ length: max }, (_, index) => { const fill = clamp(shown - index, 0, 1); const snapped = fill >= 0.75 ? 1 : fill >= 0.25 ? 0.5 : 0; const state: RatingInputItemState = { index, fill: snapped, active: snapped > 0, previewing: interactive && hover !== null, icon: icons?.[index] ?? icon, }; return ( { if (!interactive || e.pointerType === "touch") return; const next = valueAt(index, e); if (next !== hover) setHover(next); }} onClick={(e) => interactive && commit(valueAt(index, e))} className={cn( "relative grid size-(--ri-box) shrink-0 place-items-center before:absolute before:inset-x-0 before:-inset-y-2", interactive && "cursor-pointer", )} > {renderItem ? renderItem(state) : } ); })}

{valueLabel ? ( {valueLabel(shown)} ) : null}

{name ? : null}

); } function DefaultItem({ state, custom }: { state: RatingInputItemState; custom: boolean }) { const { fill, active, previewing, icon } = state; // Per-item icons are not clipped: lit ones show in color, the rest recede. if (custom) { return ( {icon} ); } const Empty = IconStar; const Filled = IconStarFilled; return ( {icon ? ( {icon} ) : ( )} {icon ?? } ); } function clamp(n: number, lo: number, hi: number) { return Math.min(hi, Math.max(lo, n)); } function trim(n: number) { return Number.isInteger(n) ? String(n) : n.toFixed(1); } export default RatingInput; 31:T18c6,"use client"; import { IconFlame, IconHeartFilled } from "@tabler/icons-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { DemoGroup, DemoPage } from "../_demo-group"; import { ratingLabels, sampleReview } from "../_fixtures"; import { RatingInput } from "./rating-input"; const faces = ["😡", "🙁", "😐", "🙂", "😍"]; function ReviewForm() { const [ratings, setRatings] = useState>({ ...sampleReview.initial }); const [text, setText] = useState(""); const [sent, setSent] = useState(false); const overall = ratings.overall ?? 0; const missing = sent && overall === 0; return (

{ e.preventDefault(); setSent(true); }} >

{sampleReview.product}

setRatings((r) => ({ ...r, overall: v }))} valueLabel={(v) => (v === 0 ? "" : (ratingLabels[Math.ceil(v) - 1] ?? ""))} name="overall" />

{missing ? "Pick a rating before you send." : ""}

{sampleReview.prompts.map((p) => (

setRatings((r) => ({ ...r, [p.id]: v }))} /> {p.low} to {p.high}

))}

Your review

setText(e.target.value)} placeholder="What should the next person know?" />
      </div>
      <div className="flex items-center gap-3">
        <Button type="submit">Send review</Button>
        {sent && overall > 0 ? <p className="text-[13px] text-muted-foreground">Thanks. Sample form, nothing was sent.</p> : null}
      </div>
    </form>
  );
}

export function RatingInputDemo() {
  const [a, setA] = useState(3);
  const [half, setHalf] = useState(2.5);
  const [face, setFace] = useState(4);
  return (
    <DemoPage>
      <DemoGroup label="Controlled" hint="Hover to preview, click to set, or focus and use the arrow keys, Home, End, or a digit.">
        <div className="grid gap-2">
          <RatingInput label="How was it?" value={a} onValueChange={setA} />
          <p className="text-[13px] text-muted-foreground tabular-nums">Value {a} of 5</p>
        </div>
      </DemoGroup>

<DemoGroup label="Custom icon" hint="Same behavior, any filled icon. Color comes from the --rating-color variable.">
        <RatingInput icon={<IconHeartFilled />} defaultValue={4} aria-label="Hearts" className="[--rating-color:var(--destructive)]" />
        <RatingInput icon={<IconFlame />} defaultValue={2} max={3} aria-label="Spice level" className="[--rating-color:var(--chart-3)]" />
      </DemoGroup>

<DemoGroup label="Per-item icon" hint="Each position has its own icon. Lit ones show in color, the rest recede.">
        <RatingInput
          label="Satisfaction"
          icons={faces.map((f) => (
            <span key={f}>{f}</span>
          ))}
          value={face}
          onValueChange={setFace}
          valueLabel={(v) => (v === 0 ? "" : (ratingLabels[Math.ceil(v) - 1] ?? ""))}
        />
      </DemoGroup>

<DemoGroup label="Render function" hint="renderItem draws each item from its state: here a numbered chip.">
        <RatingInput
          aria-label="Numbered rating"
          defaultValue={3}
          renderItem={({ index, active, previewing }) => (
            <span
              className={`grid size-8 place-items-center rounded-full border text-sm tabular-nums transition-[background-color,color,border-color] duration-150 ease-(--ease-out) motion-reduce:transition-none ${
                active ? "border-foreground bg-foreground text-background" : "border-input"
              } ${previewing && active ? "opacity-80" : ""}`}
            >
              {index + 1}
            </span>
          )}
        />
      </DemoGroup>

<DemoGroup label="Product review form" hint="A sample form: overall in half steps with a word beside it, three small ratings, an error in words if you skip the overall." bare>
        <ReviewForm />
      </DemoGroup>
    </DemoPage>
  );
}

export default RatingInputDemo;
32:T74e,import type { BlockMeta } from "../../../lib/block-meta";

export const ratingInputMeta: BlockMeta = {
  slug: "rating-input",
  title: "Rating input",
  description: "The interactive sibling of the read-only Rating: hover preview, half steps, arrow keys, custom and per-item icons, a token color variable, and a review form sub-demo.",
  group: "feedback",
  kobraDeps: [],
  files: ["blocks/feedback/rating-input/rating-input.tsx"],
  props: [
    { name: "value / defaultValue", type: "number", description: "Controlled and uncontrolled value, 0 to max." },
    { name: "onValueChange", type: "(value: number) => void", description: "Called with the new value." },
    { name: "max", type: "number", default: "5", description: "Number of items." },
    { name: "step", type: "1 | 0.5", default: "1", description: "Whole items or half steps." },
    { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Item size." },
    { name: "label", type: "ReactNode", description: "Visible label and accessible name." },
    { name: "icon", type: "ReactNode", description: "Icon for every item (default star)." },
    { name: "icons", type: "ReactNode[]", description: "One icon per item." },
    { name: "renderItem", type: "(item: RatingInputItemState) => ReactNode", description: "Replace the drawing of each item." },
    { name: "valueLabel", type: "(value: number) => ReactNode", description: "Text beside the items from the shown value." },
    { name: "name", type: "string", description: "Submit the value with a form." },
    { name: "disabled / readOnly", type: "boolean", description: "Inert and dimmed, or inert without dimming." },
    { name: "--rating-color", type: "CSS variable", description: "Set on the root, e.g. [--rating-color:var(--chart-1)]." },
  ],
  tags: ["rating", "review", "input", "stars"],
  status: "ready",
};
23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#feedback","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Feedback"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Rating input"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Rating input"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"The interactive sibling of the read-only Rating: hover preview, half steps, arrow keys, custom and per-item icons, a token color variable, and a review form sub-demo."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"rating-input","group":"feedback","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/feedback/rating-input/rating-input.tsx","code":"$30"},{"path":"blocks/feedback/rating-input/demo.tsx","code":"$31"},{"path":"blocks/feedback/rating-input/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]
</article></body></html>