@sakura-ui/sakura-ui 0.4.2 → 0.5.1

package/packages/core/tests/Card.test.tsx

@@ -2,46 +2,150 @@ import React from 'react'
 import { describe, expect, it } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
-import { Card, CardBody, CardHeader } from '../src'
+import { Card, CardBody, CardFooter, CardHeader } from '../src'
 
 describe('Card', () => {
-  it('should labeled text from Card', async () => {
+  it('should render its header and body', async () => {
     render(
       <Card>
-        <CardHeader>Card-Header</CardHeader>
+        <CardHeader as="h3">Card-Header</CardHeader>
         <CardBody>Card-Body</CardBody>
       </Card>
     )
 
-    const text1 = screen.getByText(/Card-Header/)
-    expect(text1).toBeInTheDocument()
+    expect(screen.getByText('Card-Header')).toBeInTheDocument()
+    expect(screen.getByText('Card-Body')).toBeInTheDocument()
+  })
+
+  it('should render the header as the element given by the as property', async () => {
+    render(
+      <Card>
+        <CardHeader as="h4">Card-Header</CardHeader>
+      </Card>
+    )
 
-    const text2 = screen.getByText(/Card-Body/)
-    expect(text2).toBeInTheDocument()
+    // Querying by role rather than by tag name: the point of the change is that
+    // the title is reachable by heading navigation, not that it is an <h4>.
+    expect(
+      screen.getByRole('heading', { level: 4, name: 'Card-Header' })
+    ).toBeInTheDocument()
   })
-  it('should set the role and id correctly', async () => {
+
+  it('should render the header as a paragraph when asked to', async () => {
     render(
       <Card>
-        <CardHeader data-testid="header">Card-Header</CardHeader>
+        <CardHeader as="p">Card-Header</CardHeader>
+      </Card>
+    )
+
+    // Lists of many cards use 'p' so that the headings do not pollute the outline.
+    expect(screen.queryByRole('heading')).toBeNull()
+    expect(screen.getByText('Card-Header')).toBeInTheDocument()
+  })
+
+  it('should render the root as the element given by the as property', async () => {
+    render(
+      <Card as="article">
+        <CardHeader as="h3">Card-Header</CardHeader>
+      </Card>
+    )
+
+    expect(screen.getByRole('article')).toBeInTheDocument()
+  })
+
+  it('should not generate any id or aria reference of its own', async () => {
+    const { container } = render(
+      <Card as="article">
+        <CardHeader as="h3" data-testid="header">
+          Card-Header
+        </CardHeader>
         <CardBody data-testid="body">Card-Body</CardBody>
       </Card>
     )
 
     const card = screen.getByRole('article')
-    expect(card).toBeInTheDocument()
+    // A generated id can only ever dangle or collide, so the library emits none.
+    // Callers that want the card named do it themselves, see the test below.
+    expect(card).not.toHaveAttribute('aria-labelledby')
+    expect(card).not.toHaveAttribute('aria-describedby')
+    expect(screen.getByTestId('header')).not.toHaveAttribute('id')
+    expect(screen.getByTestId('body')).not.toHaveAttribute('id')
+    expect(container.querySelector('[id=""]')).toBeNull()
+  })
+
+  it('should not repeat an id when more than one body is rendered', async () => {
+    render(
+      <Card>
+        <CardBody data-testid="body1">Body-1</CardBody>
+        <CardBody data-testid="body2">Body-2</CardBody>
+      </Card>
+    )
+
+    expect(screen.getByTestId('body1')).not.toHaveAttribute('id')
+    expect(screen.getByTestId('body2')).not.toHaveAttribute('id')
+  })
+
+  it('should let the caller name the card explicitly', async () => {
+    render(
+      <Card as="article" aria-labelledby="card-title" aria-describedby="card-desc">
+        <CardHeader as="h3" id="card-title">
+          Card-Header
+        </CardHeader>
+        <CardBody id="card-desc">Card-Body</CardBody>
+      </Card>
+    )
+
+    const card = screen.getByRole('article')
+    expect(card).toHaveAccessibleName('Card-Header')
+    expect(card).toHaveAccessibleDescription('Card-Body')
+  })
 
-    const header = screen.getByTestId('header')
-    expect(header).toBeInTheDocument()
-    expect(header).toHaveAttribute('id')
+  it('should render a card without a header', async () => {
+    render(
+      <Card as="article">
+        <CardBody>Card-Body</CardBody>
+      </Card>
+    )
+
+    // Used to leave aria-labelledby pointing at an element that was never rendered.
+    const card = screen.getByRole('article')
+    expect(card).not.toHaveAttribute('aria-labelledby')
+    expect(card).toHaveAccessibleName('')
+  })
 
-    const headerText = screen.getByLabelText('Card-Header')
-    expect(headerText).toBeInTheDocument()
+  it('should say which property is missing when as is left out', async () => {
+    // React would otherwise report an invalid element type and suggest a missing
+    // export, which points nowhere near the actual mistake.
+    const Header = CardHeader as unknown as React.ComponentType<{
+      children: React.ReactNode
+    }>
 
-    const body = screen.getByTestId('body')
-    expect(body).toBeInTheDocument()
-    expect(body).toHaveAttribute('id')
+    expect(() =>
+      render(
+        <Card>
+          <Header>Card-Header</Header>
+        </Card>
+      )
+    ).toThrow(/CardHeader: the "as" property is required/)
+  })
+
+  it('should pass unknown properties through to the elements', async () => {
+    render(
+      <Card>
+        <CardHeader as="h3" data-testid="header" data-kind="title">
+          Card-Header
+        </CardHeader>
+        <CardBody data-testid="body" data-kind="desc">
+          Card-Body
+        </CardBody>
+        <CardFooter data-testid="footer" data-kind="meta">
+          Card-Footer
+        </CardFooter>
+      </Card>
+    )
 
-    const bodyText = screen.getByRole('article', { description: 'Card-Body' })
-    expect(bodyText).toBeInTheDocument()
+    expect(screen.getByTestId('header')).toHaveAttribute('data-kind', 'title')
+    expect(screen.getByTestId('body')).toHaveAttribute('data-kind', 'desc')
+    expect(screen.getByTestId('footer')).toHaveAttribute('data-kind', 'meta')
   })
 })

package/packages/core/tests/Faq.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { Answer, Faq, Question } from '../src'
+
+describe('Faq', () => {
+  it('should render the questions and the answers', async () => {
+    render(
+      <Faq>
+        <Question>Question-1</Question>
+        <Answer>Answer-1</Answer>
+        <Question>Question-2</Question>
+        <Answer>Answer-2</Answer>
+      </Faq>
+    )
+
+    expect(screen.getByText('Question-1')).toBeInTheDocument()
+    expect(screen.getByText('Answer-1')).toBeInTheDocument()
+    expect(screen.getByText('Question-2')).toBeInTheDocument()
+    expect(screen.getByText('Answer-2')).toBeInTheDocument()
+  })
+
+  it('should keep the Q and A markers out of the accessibility tree', async () => {
+    render(
+      <Faq>
+        <Question data-testid="question">Question-1</Question>
+        <Answer>Answer-1</Answer>
+      </Faq>
+    )
+
+    // The letters are there for the eye only; a reader gets the question text.
+    const marker = screen.getByTestId('question').firstElementChild
+    expect(marker).toHaveTextContent('Q')
+    expect(marker).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('should render a plain definition list', async () => {
+    const { container } = render(
+      <Faq>
+        <Question>Question-1</Question>
+        <Answer>Answer-1</Answer>
+        <Question>Question-2</Question>
+        <Answer>Answer-2</Answer>
+      </Faq>
+    )
+
+    // The schema.org markup described the whole list as one Question carrying a
+    // name and an answer per pair, and it wrapped everything in an article that
+    // nothing could name. Both are gone.
+    expect(container.querySelector('[itemscope]')).toBeNull()
+    expect(container.querySelector('[itemprop]')).toBeNull()
+    expect(container.querySelector('article')).toBeNull()
+    expect(container.querySelector('dl')).toBeInTheDocument()
+    expect(container.querySelectorAll('dt')).toHaveLength(2)
+    expect(container.querySelectorAll('dd')).toHaveLength(2)
+  })
+
+  it('should pass unknown properties through to the elements', async () => {
+    render(
+      <Faq data-testid="faq" data-kind="list">
+        <Question data-testid="question" data-kind="q">
+          Question-1
+        </Question>
+        <Answer data-testid="answer" data-kind="a">
+          Answer-1
+        </Answer>
+      </Faq>
+    )
+
+    expect(screen.getByTestId('faq')).toHaveAttribute('data-kind', 'list')
+    expect(screen.getByTestId('question')).toHaveAttribute('data-kind', 'q')
+    expect(screen.getByTestId('answer')).toHaveAttribute('data-kind', 'a')
+  })
+})

package/packages/core/tests/LinkCard.test.tsx

@@ -0,0 +1,151 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { CardBody, LinkCard, LinkCardFooter, LinkCardHeader } from '../src'
+
+describe('LinkCard', () => {
+  it('should render the title as a link', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+        <CardBody>Link-Card-Body</CardBody>
+      </LinkCard>
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveAttribute('href', '/readme')
+  })
+
+  it('should take the accessible name of the link from the title alone', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+        <CardBody>Link-Card-Body</CardBody>
+        <LinkCardFooter>June 27th, 2026</LinkCardFooter>
+      </LinkCard>
+    )
+
+    // Asserting the accessible name rather than the link text: when the anchor
+    // wrapped the whole card, the body and the footer were read out as part of
+    // the link name before it was announced as a link.
+    const link = screen.getByRole('link')
+    expect(link).toHaveAccessibleName('Link-Card-Header')
+    expect(link).not.toHaveAccessibleName(/Link-Card-Body/)
+  })
+
+  it('should keep the title reachable by heading navigation', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    expect(
+      screen.getByRole('heading', { level: 3, name: 'Link-Card-Header' })
+    ).toBeInTheDocument()
+  })
+
+  it('should tell that the link opens in a new tab', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="https://example.com" target="_blank">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    // The icon itself is aria-hidden, so without the alternative text the fact
+    // that the link opens elsewhere reached sighted users only.
+    expect(screen.getByRole('link')).toHaveAccessibleName(
+      /新しいタブで開きます/
+    )
+  })
+
+  it('should not tell about a new tab for a link that stays in the tab', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    expect(screen.getByRole('link')).toHaveAccessibleName('Link-Card-Header')
+  })
+
+  it('should render the link with the component given by linkAs', async () => {
+    const NextLinkLike = ({
+      to,
+      children,
+      ...rest
+    }: { to: string; children: React.ReactNode }) => (
+      <a href={to} {...rest}>
+        {children}
+      </a>
+    )
+
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" linkAs={NextLinkLike} to="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/readme')
+  })
+
+  it('should pass unknown properties through to the link and the footer', async () => {
+    render(
+      <LinkCard data-testid="card">
+        <LinkCardHeader as="h3" href="/readme" data-kind="title">
+          Link-Card-Header
+        </LinkCardHeader>
+        <LinkCardFooter data-testid="footer" data-kind="meta">
+          June 27th, 2026
+        </LinkCardFooter>
+      </LinkCard>
+    )
+
+    // These used to be dropped: both components declared that they accept the
+    // properties of a div but never spread them onto an element.
+    expect(screen.getByRole('link')).toHaveAttribute('data-kind', 'title')
+    expect(screen.getByTestId('footer')).toHaveAttribute('data-kind', 'meta')
+    expect(screen.getByTestId('card')).toBeInTheDocument()
+  })
+
+  it('should say which property is missing when as is left out', async () => {
+    const Header = LinkCardHeader as unknown as React.ComponentType<{
+      href: string
+      children: React.ReactNode
+    }>
+
+    expect(() =>
+      render(
+        <LinkCard>
+          <Header href="/readme">Link-Card-Header</Header>
+        </LinkCard>
+      )
+    ).toThrow(/LinkCardHeader: the "as" property is required/)
+  })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+    render(
+      <LinkCard ref={ref}>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+})

package/packages/forms/.turbo/turbo-build.log

@@ -7,6 +7,6 @@ transforming...
 ✓ 25 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.js  24.36 kB │ gzip: 6.13 kB
-dist/index.cjs.js  16.94 kB │ gzip: 5.27 kB
-✓ built in 582ms
+dist/index.es.js  24.22 kB │ gzip: 6.09 kB
+dist/index.cjs.js  16.80 kB │ gzip: 5.23 kB
+✓ built in 482ms

package/packages/forms/dist/index.cjs.js

@@ -1,15 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react");var k={exports:{}},E={};var G;function ve(){if(G)return E;G=1;var r=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function d(i,o,t){var a=null;if(t!==void 0&&(a=""+t),o.key!==void 0&&(a=""+o.key),"key"in o){t={};for(var u in o)u!=="key"&&(t[u]=o[u])}else t=o;return o=t.ref,{$$typeof:r,type:i,key:a,ref:o!==void 0?o:null,props:t}}return E.Fragment=n,E.jsx=d,E.jsxs=d,E}var _={};var U;function ye(){return U||(U=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===me?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case ie:return"Profiler";case ne:return"StrictMode";case fe:return"Suspense";case pe:return"SuspenseList";case xe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ae:return"Portal";case ce:return e.displayName||"Context";case de:return(e._context.displayName||"Context")+".Consumer";case ue:var l=e.render;return e=e.displayName,e||(e=l.displayName||l.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case be:return l=e.displayName||null,l!==null?l:r(e.type)||"Memo";case P:l=e._payload,e=e._init;try{return r(e(l))}catch{}}return null}function n(e){return""+e}function d(e){try{n(e);var l=!1}catch{l=!0}if(l){l=console;var p=l.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return p.call(l,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),n(e)}}function i(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===P)return"<...>";try{var l=r(e);return l?"<"+l+">":"<...>"}catch{return"<...>"}}function o(){var e=S.A;return e===null?null:e.getOwner()}function t(){return Error("react-stack-top-frame")}function a(e){if(Y.call(e,"key")){var l=Object.getOwnPropertyDescriptor(e,"key").get;if(l&&l.isReactWarning)return!1}return e.key!==void 0}function u(e,l){function p(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",l))}p.isReactWarning=!0,Object.defineProperty(e,"key",{get:p,configurable:!0})}function c(){var e=r(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function m(e,l,p,b,I,A){var x=p.ref;return e={$$typeof:F,type:e,key:l,props:p,_owner:b},(x!==void 0?x:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:c}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function f(e,l,p,b,I,A){var x=l.children;if(x!==void 0)if(b)if(ge(x)){for(b=0;b<x.length;b++)g(x[b]);Object.freeze&&Object.freeze(x)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(x);if(Y.call(l,"key")){x=r(e);var j=Object.keys(l).filter(function(he){return he!=="key"});b=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",B[x+b]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react");var k={exports:{}},E={};var U;function ve(){if(U)return E;U=1;var r=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function d(i,a,t){var o=null;if(t!==void 0&&(o=""+t),a.key!==void 0&&(o=""+a.key),"key"in a){t={};for(var u in a)u!=="key"&&(t[u]=a[u])}else t=a;return a=t.ref,{$$typeof:r,type:i,key:o,ref:a!==void 0?a:null,props:t}}return E.Fragment=n,E.jsx=d,E.jsxs=d,E}var _={};var B;function ye(){return B||(B=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===me?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case ie:return"Profiler";case ne:return"StrictMode";case fe:return"Suspense";case pe:return"SuspenseList";case xe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case oe:return"Portal";case ce:return e.displayName||"Context";case de:return(e._context.displayName||"Context")+".Consumer";case ue:var l=e.render;return e=e.displayName,e||(e=l.displayName||l.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case be:return l=e.displayName||null,l!==null?l:r(e.type)||"Memo";case P:l=e._payload,e=e._init;try{return r(e(l))}catch{}}return null}function n(e){return""+e}function d(e){try{n(e);var l=!1}catch{l=!0}if(l){l=console;var p=l.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return p.call(l,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),n(e)}}function i(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===P)return"<...>";try{var l=r(e);return l?"<"+l+">":"<...>"}catch{return"<...>"}}function a(){var e=S.A;return e===null?null:e.getOwner()}function t(){return Error("react-stack-top-frame")}function o(e){if(Y.call(e,"key")){var l=Object.getOwnPropertyDescriptor(e,"key").get;if(l&&l.isReactWarning)return!1}return e.key!==void 0}function u(e,l){function p(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",l))}p.isReactWarning=!0,Object.defineProperty(e,"key",{get:p,configurable:!0})}function c(){var e=r(this.type);return D[e]||(D[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function m(e,l,p,b,I,A){var x=p.ref;return e={$$typeof:F,type:e,key:l,props:p,_owner:b},(x!==void 0?x:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:c}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function f(e,l,p,b,I,A){var x=l.children;if(x!==void 0)if(b)if(ge(x)){for(b=0;b<x.length;b++)g(x[b]);Object.freeze&&Object.freeze(x)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(x);if(Y.call(l,"key")){x=r(e);var j=Object.keys(l).filter(function(he){return he!=="key"});b=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",G[x+b]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,b,x,j,x),B[x+b]=!0)}if(x=null,p!==void 0&&(d(p),x=""+p),a(l)&&(d(l.key),x=""+l.key),"key"in l){p={};for(var $ in l)$!=="key"&&(p[$]=l[$])}else p=l;return x&&u(p,typeof e=="function"?e.displayName||e.name||"Unknown":e),m(e,x,p,o(),I,A)}function g(e){h(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===P&&(e._payload.status==="fulfilled"?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function h(e){return typeof e=="object"&&e!==null&&e.$$typeof===F}var v=R,F=Symbol.for("react.transitional.element"),ae=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),ne=Symbol.for("react.strict_mode"),ie=Symbol.for("react.profiler"),de=Symbol.for("react.consumer"),ce=Symbol.for("react.context"),ue=Symbol.for("react.forward_ref"),fe=Symbol.for("react.suspense"),pe=Symbol.for("react.suspense_list"),be=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),xe=Symbol.for("react.activity"),me=Symbol.for("react.client.reference"),S=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,ge=Array.isArray,O=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var z,L={},D=v.react_stack_bottom_frame.bind(v,t)(),W=O(i(t)),B={};_.Fragment=C,_.jsx=function(e,l,p){var b=1e4>S.recentlyCreatedOwnerStacks++;return f(e,l,p,!1,b?Error("react-stack-top-frame"):D,b?O(i(e)):W)},_.jsxs=function(e,l,p){var b=1e4>S.recentlyCreatedOwnerStacks++;return f(e,l,p,!0,b?Error("react-stack-top-frame"):D,b?O(i(e)):W)}})()),_}var V;function Re(){return V||(V=1,process.env.NODE_ENV==="production"?k.exports=ve():k.exports=ye()),k.exports}var s=Re();const y=(...r)=>r.filter(Boolean).join(" ");var N;(r=>{r.clickable=`
+  <%s key={someKey} {...props} />`,b,x,j,x),G[x+b]=!0)}if(x=null,p!==void 0&&(d(p),x=""+p),o(l)&&(d(l.key),x=""+l.key),"key"in l){p={};for(var $ in l)$!=="key"&&(p[$]=l[$])}else p=l;return x&&u(p,typeof e=="function"?e.displayName||e.name||"Unknown":e),m(e,x,p,a(),I,A)}function g(e){h(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===P&&(e._payload.status==="fulfilled"?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function h(e){return typeof e=="object"&&e!==null&&e.$$typeof===F}var v=R,F=Symbol.for("react.transitional.element"),oe=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),ne=Symbol.for("react.strict_mode"),ie=Symbol.for("react.profiler"),de=Symbol.for("react.consumer"),ce=Symbol.for("react.context"),ue=Symbol.for("react.forward_ref"),fe=Symbol.for("react.suspense"),pe=Symbol.for("react.suspense_list"),be=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),xe=Symbol.for("react.activity"),me=Symbol.for("react.client.reference"),S=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,ge=Array.isArray,O=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var z,D={},L=v.react_stack_bottom_frame.bind(v,t)(),W=O(i(t)),G={};_.Fragment=C,_.jsx=function(e,l,p){var b=1e4>S.recentlyCreatedOwnerStacks++;return f(e,l,p,!1,b?Error("react-stack-top-frame"):L,b?O(i(e)):W)},_.jsxs=function(e,l,p){var b=1e4>S.recentlyCreatedOwnerStacks++;return f(e,l,p,!0,b?Error("react-stack-top-frame"):L,b?O(i(e)):W)}})()),_}var V;function Re(){return V||(V=1,process.env.NODE_ENV==="production"?k.exports=ve():k.exports=ye()),k.exports}var s=Re();const y=(...r)=>r.filter(Boolean).join(" ");var N;(r=>{r.clickable=`
     px-2
     min-h-[calc(44/16*1rem)]
     border
     border-transparent
     rounded-lg
-    hover:bg-solid-grey-50
+    hover:bg-solid-gray-50
   `,r.selected=`
     rounded-full
     bg-yellow-50
@@ -60,16 +60,8 @@ React keys must be passed directly to JSX without using spread:
     shadow-1
     rounded-lg
     border
-    border-solid-grey-420
+    border-solid-gray-420
     has-[>:nth-child(7)]:rounded-r-none
-  `,r.popoverPositionBottomRight=`
-    absolute
-    top-11
-    right-0
-  `,r.popoverPositionBottomLeft=`
-    absolute
-    top-11
-    left-0
   `,(d=>{d.focus=`
       peer-focus-visible:outline-4
       peer-focus-visible:outline-black
@@ -126,7 +118,7 @@ React keys must be passed directly to JSX without using spread:
     py-2
     text-label
     leading-snug
-  `},Q={lg:"w-[22px] h-[22px] mr-2",md:"w-[18px] h-[18px] mr-1.5",sm:"w-[18px] h-[18px] mr-1"},M=r=>{const{id:n,className:d,size:i="lg",children:o,...t}=r,a=R.useId(),u=n||a,c=R.useContext(T);c.isRequired&&(t.required=!0),c.groupName&&(t.name=c.groupName);const m={lg:22/24,md:18/24,sm:18/24},f=`
+  `},Q={lg:"w-[22px] h-[22px] mr-2",md:"w-[18px] h-[18px] mr-1.5",sm:"w-[18px] h-[18px] mr-1"},M=r=>{const{id:n,className:d,size:i="lg",children:a,...t}=r,o=R.useId(),u=n||o,c=R.useContext(T);c.isRequired&&(t.required=!0),c.groupName&&(t.name=c.groupName);const m={lg:22/24,md:18/24,sm:18/24},f=`
     peer
     sr-only
   `,g=`
@@ -141,7 +133,7 @@ React keys must be passed directly to JSX without using spread:
     peer-checked:border-none
     peer-disabled:border-solid-gray-500
     ${N.Peer.focusRect}
-  `;return s.jsx("label",{htmlFor:u,className:y(X,Z[i],d),children:s.jsxs("span",{className:"flex items-center",children:[s.jsx("input",{id:u,className:f,type:"checkbox","aria-describedby":c.helperTextId,"aria-errormessage":c.errorMessageId,"aria-invalid":c.isInvalid??!1,...t}),s.jsx("span",{className:y(g,Q[i]),children:s.jsx("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,width:"24",height:"24",viewBox:"0 0 24 24",children:s.jsx("g",{transform:`scale(${m[i]} ${m[i]})`,children:s.jsx("path",{d:"m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z"})})})}),s.jsx("span",{className:"peer-disabled:text-solid-gray-500",children:o})]})})};M.displayName="Checkbox";const q=r=>{const{id:n,className:d,size:i="lg",children:o,...t}=r,a=R.useId(),u=n||a,c=R.useContext(T);c.isRequired&&(t.required=!0),c.groupName&&(t.name=c.groupName);const m=`
+  `;return s.jsx("label",{htmlFor:u,className:y(X,Z[i],d),children:s.jsxs("span",{className:"flex items-center",children:[s.jsx("input",{id:u,className:f,type:"checkbox","aria-describedby":c.helperTextId,"aria-errormessage":c.errorMessageId,"aria-invalid":c.isInvalid??!1,...t}),s.jsx("span",{className:y(g,Q[i]),children:s.jsx("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,width:"24",height:"24",viewBox:"0 0 24 24",children:s.jsx("g",{transform:`scale(${m[i]} ${m[i]})`,children:s.jsx("path",{d:"m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z"})})})}),s.jsx("span",{className:"peer-disabled:text-solid-gray-500",children:a})]})})};M.displayName="Checkbox";const q=r=>{const{id:n,className:d,size:i="lg",children:a,...t}=r,o=R.useId(),u=n||o,c=R.useContext(T);c.isRequired&&(t.required=!0),c.groupName&&(t.name=c.groupName);const m=`
     peer
     sr-only
   `,f=`
@@ -154,12 +146,12 @@ React keys must be passed directly to JSX without using spread:
     peer-checked:border-blue-600
     peer-disabled:border-solid-gray-500
     ${N.Peer.focusRect}
-  `,g={lg:"p-1",md:"p-[3px]",sm:"p-[3px]"};return s.jsx("label",{htmlFor:u,className:y(X,Z[i],d),children:s.jsxs("span",{className:"flex items-center",children:[s.jsx("input",{id:u,className:m,type:"radio","aria-describedby":c.helperTextId,"aria-errormessage":c.errorMessageId,"aria-invalid":c.isInvalid??!1,...t}),s.jsx("span",{"aria-hidden":!0,className:y(f,g[i],Q[i])}),s.jsx("span",{className:"peer-disabled:text-solid-gray-500",children:o})]})})};q.displayName="Radio";const K=r=>{const{id:n,className:d,size:i="lg",children:o,...t}=r,a=R.useContext(T);return a.isRequired&&(t.required=!0),s.jsxs("div",{className:"inline-block relative",children:[s.jsx("select",{id:n||a.id,className:y(`
+  `,g={lg:"p-1",md:"p-[3px]",sm:"p-[3px]"};return s.jsx("label",{htmlFor:u,className:y(X,Z[i],d),children:s.jsxs("span",{className:"flex items-center",children:[s.jsx("input",{id:u,className:m,type:"radio","aria-describedby":c.helperTextId,"aria-errormessage":c.errorMessageId,"aria-invalid":c.isInvalid??!1,...t}),s.jsx("span",{"aria-hidden":!0,className:y(f,g[i],Q[i])}),s.jsx("span",{className:"peer-disabled:text-solid-gray-500",children:a})]})})};q.displayName="Radio";const K=r=>{const{id:n,className:d,size:i="lg",children:a,...t}=r,o=R.useContext(T);return o.isRequired&&(t.required=!0),s.jsxs("div",{className:"inline-block relative",children:[s.jsx("select",{id:n||o.id,className:y(`
     !pr-8
     peer
     cursor-pointer
     appearance-none
-  `,J,H[i],d),"aria-describedby":a.helperTextId,"aria-errormessage":a.errorMessageId,"aria-invalid":a.isInvalid??!1,...t,children:o}),s.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,className:`
+  `,J,H[i],d),"aria-describedby":o.helperTextId,"aria-errormessage":o.errorMessageId,"aria-invalid":o.isInvalid??!1,...t,children:a}),s.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,className:`
     pointer-events-none
     absolute
     right-4
@@ -167,7 +159,7 @@ React keys must be passed directly to JSX without using spread:
     -translate-y-1/2
     text-solid-gray-900
     peer-disabled:text-solid-gray-500
-  `,fill:"none",width:"16",height:"16",viewBox:"0 0 16 16",children:[s.jsx("title",{children:"arrow down"}),s.jsx("path",{d:"M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z",fill:"currentColor"})]})]})};K.displayName="Select";const ee=r=>{const{id:n,className:d,size:i="lg",...o}=r,t=R.useContext(T);t.isRequired&&(o.required=!0);const a=`
+  `,fill:"none",width:"16",height:"16",viewBox:"0 0 16 16",children:[s.jsx("title",{children:"arrow down"}),s.jsx("path",{d:"M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z",fill:"currentColor"})]})]})};K.displayName="Select";const ee=r=>{const{id:n,className:d,size:i="lg",...a}=r,t=R.useContext(T);t.isRequired&&(a.required=!0);const o=`
     file:mr-2
     file:inline-block
     file:text-button
@@ -217,7 +209,7 @@ React keys must be passed directly to JSX without using spread:
       file:text-button
       file:rounded-md
       file:leading-snug
-    `};return s.jsx("input",{type:"file",id:n||t.id,className:y(a,u,m[i],c,d),"aria-describedby":t.helperTextId,"aria-errormessage":t.errorMessageId,"aria-invalid":t.isInvalid??!1,...o})};ee.displayName="FileInput";const re=r=>{const{id:n,className:d,size:i="lg",...o}=r,t=R.useContext(T);return t.isRequired&&(o.required=!0),s.jsx("input",{type:"text",id:n||t.id,className:y(J,H[i],d),"aria-describedby":t.helperTextId,"aria-errormessage":t.errorMessageId,"aria-invalid":t.isInvalid??!1,...o})};re.displayName="Input";const te=r=>{const{id:n,className:d,children:i,onChange:o,maxLength:t,...a}=r,[u,c]=R.useState(0),m=v=>{o&&o(v),c(v.target.value.length)},f=R.useContext(T);f.isRequired&&(a.required=!0);const g=u>(t||0)?"text-red-800":"text-solid-gray-700",h=`
+    `};return s.jsx("input",{type:"file",id:n||t.id,className:y(o,u,m[i],c,d),"aria-describedby":t.helperTextId,"aria-errormessage":t.errorMessageId,"aria-invalid":t.isInvalid??!1,...a})};ee.displayName="FileInput";const re=r=>{const{id:n,className:d,size:i="lg",...a}=r,t=R.useContext(T);return t.isRequired&&(a.required=!0),s.jsx("input",{type:"text",id:n||t.id,className:y(J,H[i],d),"aria-describedby":t.helperTextId,"aria-errormessage":t.errorMessageId,"aria-invalid":t.isInvalid??!1,...a})};re.displayName="Input";const te=r=>{const{id:n,className:d,children:i,onChange:a,maxLength:t,...o}=r,[u,c]=R.useState(0),m=v=>{a&&a(v),c(v.target.value.length)},f=R.useContext(T);f.isRequired&&(o.required=!0);const g=u>(t||0)?"text-red-800":"text-solid-gray-700",h=`
       p-4
       text-label
       rounded-lg
@@ -229,8 +221,8 @@ React keys must be passed directly to JSX without using spread:
       disabled:border-solid-gray-500
       aria-invalid:border-red-800
       ${N.focusRect}
-    `;return s.jsxs(s.Fragment,{children:[s.jsx("textarea",{id:n||f.id,className:y(h,d),"aria-describedby":f.helperTextId,"aria-errormessage":f.errorMessageId,"aria-invalid":f.isInvalid??!1,onChange:m,...a,children:i}),t?s.jsxs("p",{className:"text-label text-solid-gray-700",children:[s.jsx("span",{className:g,children:u}),"/",s.jsx("span",{children:t})]}):""]})};te.displayName="Textarea";const se=r=>{const n=R.useId(),{labelText:d,className:i,helperText:o,errorMessage:t,isInvalid:a,isRequired:u,children:c,...m}=r,f={id:r.htmlFor??`input-${n}`,helperTextId:`helper-text-${n}`,errorMessageId:`error-message-${n}`,isInvalid:a??!1,isRequired:u??!1};return s.jsx(T.Provider,{value:f,children:s.jsxs("div",{className:y("flex flex-col items-start gap-2",i),children:[s.jsxs("label",{className:y("block text-label",a&&"text-red-800"),htmlFor:f.id,...m,children:[d,u&&s.jsx("span",{className:"text-label text-red-800",children:" *"})]}),o&&s.jsx("p",{id:f.helperTextId,className:`
+    `;return s.jsxs(s.Fragment,{children:[s.jsx("textarea",{id:n||f.id,className:y(h,d),"aria-describedby":f.helperTextId,"aria-errormessage":f.errorMessageId,"aria-invalid":f.isInvalid??!1,onChange:m,...o,children:i}),t?s.jsxs("p",{className:"text-label text-solid-gray-700",children:[s.jsx("span",{className:g,children:u}),"/",s.jsx("span",{children:t})]}):""]})};te.displayName="Textarea";const se=r=>{const n=R.useId(),{labelText:d,className:i,helperText:a,errorMessage:t,isInvalid:o,isRequired:u,children:c,...m}=r,f={id:r.htmlFor??`input-${n}`,helperTextId:`helper-text-${n}`,errorMessageId:`error-message-${n}`,isInvalid:o??!1,isRequired:u??!1};return s.jsx(T.Provider,{value:f,children:s.jsxs("div",{className:y("flex flex-col items-start gap-2",i),children:[s.jsxs("label",{className:y("block text-label",o&&"text-red-800"),htmlFor:f.id,...m,children:[d,u&&s.jsx("span",{className:"text-label text-red-800",children:" *"})]}),a&&s.jsx("p",{id:f.helperTextId,className:`
     text-label text-solid-gray-700
-  `,children:o}),c,a&&s.jsx("p",{id:f.errorMessageId,className:`
+  `,children:a}),c,o&&s.jsx("p",{id:f.errorMessageId,className:`
     text-label text-red-800
-  `,children:t})]})})};se.displayName="LabelControl";const w=r=>{const n=R.useId(),{labelText:d,className:i,helperText:o,errorMessage:t,isInvalid:a,isRequired:u,direction:c,children:m,...f}=r,h={groupName:f.name??`group-${n}`,helperTextId:`helper-text-${n}`,errorMessageId:`error-message-${n}`,isInvalid:a??!1,isRequired:u??!1},v=c??"flex-col";return s.jsx(T.Provider,{value:h,children:s.jsxs("fieldset",{className:y("flex flex-col items-start gap-2",i),...f,children:[s.jsx("legend",{children:s.jsxs("p",{className:y("block text-label",a&&"text-red-800"),children:[d,u&&s.jsx("span",{className:"text-red-800",children:" *"})]})}),s.jsx("div",{className:y("inline-flex",v),children:m}),o&&s.jsx("p",{id:h.helperTextId,className:"text-sup text-solid-gray-700",children:o}),a&&s.jsx("p",{id:h.errorMessageId,className:"text-label text-red-800",children:t})]})})};w.displayName="FieldsetControl";const le=r=>{const{items:n,onChange:d,className:i,labelText:o,helperText:t,errorMessage:a,isInvalid:u,isRequired:c,size:m,...f}=r;return s.jsx(w,{className:i,labelText:o,helperText:t,errorMessage:a,isInvalid:u,isRequired:c,...f,children:n.map(({label:g,value:h})=>s.jsx(M,{size:m,value:h,onChange:d,children:g},`${g}-${h}`))})};le.displayName="CheckboxGroup";const oe=r=>{const{items:n,onChange:d,className:i,labelText:o,helperText:t,errorMessage:a,isInvalid:u,isRequired:c,defaultValue:m,size:f,...g}=r;return s.jsx(w,{className:i,labelText:o,helperText:t,errorMessage:a,isInvalid:u,isRequired:c,...g,children:n.map(({label:h,value:v})=>s.jsx(q,{size:f,value:v,onChange:d,defaultChecked:m===v,children:h},`${h}-${v}`))})};oe.displayName="RadioGroup";exports.Checkbox=M;exports.CheckboxGroup=le;exports.FieldsetControl=w;exports.FileInput=ee;exports.Input=re;exports.LabelControl=se;exports.Radio=q;exports.RadioGroup=oe;exports.Select=K;exports.Textarea=te;
+  `,children:t})]})})};se.displayName="LabelControl";const w=r=>{const n=R.useId(),{labelText:d,className:i,helperText:a,errorMessage:t,isInvalid:o,isRequired:u,direction:c,children:m,...f}=r,h={groupName:f.name??`group-${n}`,helperTextId:`helper-text-${n}`,errorMessageId:`error-message-${n}`,isInvalid:o??!1,isRequired:u??!1},v=c??"flex-col";return s.jsx(T.Provider,{value:h,children:s.jsxs("fieldset",{className:y("flex flex-col items-start gap-2",i),...f,children:[s.jsx("legend",{children:s.jsxs("p",{className:y("block text-label",o&&"text-red-800"),children:[d,u&&s.jsx("span",{className:"text-red-800",children:" *"})]})}),s.jsx("div",{className:y("inline-flex",v),children:m}),a&&s.jsx("p",{id:h.helperTextId,className:"text-sup text-solid-gray-700",children:a}),o&&s.jsx("p",{id:h.errorMessageId,className:"text-label text-red-800",children:t})]})})};w.displayName="FieldsetControl";const le=r=>{const{items:n,onChange:d,className:i,labelText:a,helperText:t,errorMessage:o,isInvalid:u,isRequired:c,size:m,...f}=r;return s.jsx(w,{className:i,labelText:a,helperText:t,errorMessage:o,isInvalid:u,isRequired:c,...f,children:n.map(({label:g,value:h})=>s.jsx(M,{size:m,value:h,onChange:d,children:g},`${g}-${h}`))})};le.displayName="CheckboxGroup";const ae=r=>{const{items:n,onChange:d,className:i,labelText:a,helperText:t,errorMessage:o,isInvalid:u,isRequired:c,defaultValue:m,size:f,...g}=r;return s.jsx(w,{className:i,labelText:a,helperText:t,errorMessage:o,isInvalid:u,isRequired:c,...g,children:n.map(({label:h,value:v})=>s.jsx(q,{size:f,value:v,onChange:d,defaultChecked:m===v,children:h},`${h}-${v}`))})};ae.displayName="RadioGroup";exports.Checkbox=M;exports.CheckboxGroup=le;exports.FieldsetControl=w;exports.FileInput=ee;exports.Input=re;exports.LabelControl=se;exports.Radio=q;exports.RadioGroup=ae;exports.Select=K;exports.Textarea=te;