@sakura-ui/sakura-ui 0.1.13 → 0.1.16

package/packages/core/src/components/Code.tsx

@@ -3,7 +3,7 @@ import { cx } from '../utils/class'
 
 export interface CodeProps extends React.ComponentPropsWithoutRef<'code'> {}
 
-export const Code: React.ElementType<CodeProps> = (props: CodeProps) => {
+export const Code = (props: CodeProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

package/packages/core/src/components/Faq.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { cx } from '../utils/class'
+
+export interface FaqProps extends React.ComponentPropsWithoutRef<'dl'> {}
+
+const headingStyle = `
+  text-h-med-m
+  sm:text-h-med
+  !leading-none
+`
+
+export const Faq = (props: FaqProps) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    flex
+    flex-col
+    gap-8
+  `
+  return (
+    <article itemScope itemType="https://schema.org/FAQPage">
+      <dl
+        className={cx(style, className)}
+        itemScope
+        itemProp="mainEntity"
+        itemType="https://schema.org/Question"
+        {...restProps}
+      >
+        {children}
+      </dl>
+    </article>
+  )
+}
+
+export interface QuestionProps extends React.ComponentPropsWithoutRef<'dt'> {}
+
+export const Question = (props: QuestionProps) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    flex
+    flex-row
+    gap-8
+    mt-10
+    first:mt-0
+  `
+  return (
+    <dt
+      className={cx(style, headingStyle, className)}
+      itemProp="name"
+      {...restProps}
+    >
+      <span aria-hidden="true">Q</span>
+      <span>{children}</span>
+    </dt>
+  )
+}
+
+export interface AnswerProps extends React.ComponentPropsWithoutRef<'dd'> {}
+
+export const Answer = (props: AnswerProps) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    flex
+    flex-row
+    items-start
+    gap-8
+  `
+  return (
+    <dd
+      className={cx(style, className)}
+      itemScope
+      itemProp="acceptedAnswer"
+      itemType="https://schema.org/Answer"
+      {...restProps}
+    >
+      <span className={headingStyle} aria-hidden="true">
+        A
+      </span>
+      <span itemProp="text">{children}</span>
+    </dd>
+  )
+}

package/packages/core/src/components/Heading.tsx

@@ -3,14 +3,16 @@ import { cx } from '../utils/class'
 
 export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {}
 
-export const H1: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H1 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-4xlm
-    sm:text-4xl
-    mt-16
-    mb-6
+    text-h-lg-m
+    sm:text-h-lg
+    mt-8
+    mb-3
+    sm:mt-16
+    sm:mb-6
   `
 
   return (
@@ -20,14 +22,16 @@ export const H1: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H2: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H2 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-3xlm
-    sm:text-3xl
-    mt-16
-    mb-6
+    text-h-med-m
+    sm:text-h-med
+    mt-8
+    mb-3
+    sm:mt-16
+    sm:mb-6
   `
 
   return (
@@ -37,14 +41,16 @@ export const H2: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H3: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H3 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-2xlm
-    sm:text-2xl
-    mt-10
-    mb-6
+    text-h-sm-m
+    sm:text-h-sm
+    mt-5
+    mb-3
+    sm:mt-10
+    sm:mb-6
   `
 
   return (
@@ -54,14 +60,16 @@ export const H3: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H4: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H4 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-xlm
-    sm:text-xl
-    mt-10
-    mb-4
+    text-h-xs-m
+    sm:text-h-xs
+    mt-5
+    mb-2
+    sm:mt-10
+    sm:mb-4
   `
 
   return (
@@ -71,14 +79,16 @@ export const H4: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H5: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H5 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-lgm
-    sm:text-lg
-    mt-10
-    mb-4
+    text-h-xxs-m
+    sm:text-h-xxs
+    mt-5
+    mb-2
+    sm:mt-10
+    sm:mb-4
   `
 
   return (
@@ -88,14 +98,16 @@ export const H5: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H6: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H6 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-lgm
-    sm:text-lg
-    mt-6
-    mb-4
+    text-h-xxs-m
+    sm:text-h-xxs
+    mt-3
+    mb-2
+    sm:mt-6
+    sm:mb-4
   `
 
   return (

package/packages/core/src/components/Icon.tsx

@@ -5,10 +5,7 @@ export interface IconProps extends React.ComponentPropsWithRef<'span'> {
   icon: string
 }
 
-export const Icon: React.ElementType<IconProps> = React.forwardRef<
-  HTMLElement,
-  IconProps
->((props, ref) => {
+export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
   const { className, icon, ...restProps } = props
 
   const style = `

package/packages/core/src/components/IconButton.tsx

@@ -8,90 +8,100 @@ export interface IconButtonProps extends React.ComponentPropsWithRef<'button'> {
   icon: string
 }
 
-export const IconButton: React.ElementType<IconButtonProps> = React.forwardRef<
-  HTMLButtonElement,
-  IconButtonProps
->((props, ref) => {
-  const {
-    className,
-    children,
-    variant,
-    icon,
-    iconLayout,
-    rounded,
-    ...restProps
-  } = props
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => {
+    const {
+      className,
+      children,
+      variant,
+      icon,
+      iconLayout,
+      rounded,
+      ...restProps
+    } = props
 
-  const layout = iconLayout ?? 'left'
+    const layout = iconLayout ?? 'left'
 
-  const align = 'center'
+    const align = 'center'
 
-  const style = `
-      ${rounded === 'full' ? 'aspect-square' : ''}
-      inline-block
-      p-4
-      text-button
-      text-${align}
-      rounded-${rounded ? rounded : 'lg'}
-      cursor-pointer
-      whitespace-nowrap
-      border
-      border-solid
-      border-sea-800
-      active:enabled:border-sea-800-darken
-      hover:enabled:border-sea-800-darken
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-600
-      disabled:border-sumi-500
-      disabled:cursor-not-allowed
-    `
+    const style = `
+    ${rounded === 'full' ? 'aspect-square' : ''}
+    inline-block
+    p-4
+    text-button
+    text-${align}
+    rounded-${rounded ? rounded : 'lg'}
+    cursor-pointer
+    whitespace-nowrap
+    border
+    border-solid
+    border-sea-800
+    active:enabled:border-sea-800/[.8]
+    hover:enabled:border-sea-800/[.85]
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-600
+    disabled:border-sumi-500
+    disabled:cursor-not-allowed
+  `
 
-  const primary = `
+    const primary = `
     text-white-1000
     bg-sea-800
-    active:enabled:bg-sea-800-darken
-    hover:enabled:bg-sea-800-darken
+    active:enabled:bg-sea-800/[.8]
+    hover:enabled:bg-sea-800/[.85]
     disabled:bg-sumi-500
     disabled:text-white-1000
   `
-  const secondary = `
+    const secondary = `
     text-sea-800
     bg-transparent
-    active:enabled:bg-sea-50
+    active:enabled:bg-sea-50/[.60]
     hover:enabled:bg-sea-50
-    active:enabled:text-sea-800-darken
-    hover:enabled:text-sea-800-darken
+    active:enabled:text-sea-800/[.85]
+    hover:enabled:text-sea-800/[.85]
     disabled:text-sumi-500
   `
 
-  const styles = {
-    primary: primary,
-    secondary: secondary
-  }
+    const styles = {
+      primary: primary,
+      secondary: secondary
+    }
 
-  const iconStyle = `
-      inline-block
-      align-middle
-      font-icon
-      text-2xl
-      font-light
-      leading-4
-      antialiased
-      mb-1
-    `
+    const iconStyle = `
+    inline-block
+    align-middle
+    font-icon
+    text-2xl
+    font-light
+    leading-4
+    antialiased
+    mb-1
+  `
 
-  return (
-    <button
-      className={cx(style, styles[variant ?? 'primary'], className)}
-      {...restProps}
-      ref={ref}
-    >
-      {layout == 'left' && <span className={cx(iconStyle)}>{icon}</span>}
-      {children && <span className="mx-1 inline-block">{children}</span>}
-      {layout == 'right' && <span className={cx(iconStyle)}>{icon}</span>}
-    </button>
-  )
-})
+    // When text is specified on a button, set the 'aria-hidden' attribute of the icon to true.
+    const ariaHidden = children ? true : false
+
+    return (
+      <button
+        className={cx(style, styles[variant ?? 'primary'], className)}
+        {...restProps}
+        ref={ref}
+      >
+        {layout == 'left' && (
+          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+            {icon}
+          </span>
+        )}
+        {children && <span className="mx-1 inline-block">{children}</span>}
+        {layout == 'right' && (
+          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+            {icon}
+          </span>
+        )}
+      </button>
+    )
+  }
+)
 
 IconButton.displayName = 'IconButton'

package/packages/core/src/components/InfoCard.tsx

@@ -6,9 +6,7 @@ export interface InfoCardProps
   title?: string
 }
 
-export const InfoCard: React.ElementType<InfoCardProps> = (
-  props: InfoCardProps
-) => {
+export const InfoCard = (props: InfoCardProps) => {
   const { className, children, title, ...restProps } = props
 
   const style = `
@@ -16,14 +14,15 @@ export const InfoCard: React.ElementType<InfoCardProps> = (
     border-solid
     border-sumi-300
     rounded-2xl
-    md:rounded-3xl
+    sm:rounded-3xl
     text-sumi-900
   `
 
   const topStyle = `
     pt-6
     px-6
-    text-lgm
+    text-h-xxs-m
+    sm:text-h-xxs
     leading-none
     mb-2
   `

package/packages/core/src/components/Link.tsx

@@ -30,15 +30,13 @@ const getFileType = (url: string) => {
 
 export interface LinkProps extends React.ComponentPropsWithRef<'a'> {}
 
-export const Link: React.ElementType<LinkProps> = React.forwardRef<
-  HTMLAnchorElement,
-  LinkProps
->((props, ref) => {
-  const { className, children, ...restProps } = props
-  const href = props.href ?? ''
-  const fileType = getFileType(href)
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref) => {
+    const { className, children, ...restProps } = props
+    const href = props.href ?? ''
+    const fileType = getFileType(href)
 
-  const style = `
+    const style = `
       rounded-sm
       cursor-pointer
       text-sea-600
@@ -53,27 +51,28 @@ export const Link: React.ElementType<LinkProps> = React.forwardRef<
       disabled:border-sumi-500
     `
 
-  if (href.startsWith('http')) {
+    if (href.startsWith('http')) {
+      return (
+        <a
+          className={cx(style, className)}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          {...restProps}
+          ref={ref}
+        >
+          {children}
+          {fileType ? `（${fileType}）` : null}
+        </a>
+      )
+    }
     return (
-      <a
-        className={cx(style, className)}
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        {...restProps}
-        ref={ref}
-      >
+      <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
         {children}
         {fileType ? `（${fileType}）` : null}
       </a>
     )
   }
-  return (
-    <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
-      {children}
-      {fileType ? `（${fileType}）` : null}
-    </a>
-  )
-})
+)
 
 Link.displayName = 'Link'

package/packages/core/src/components/List.tsx

@@ -3,7 +3,7 @@ import { cx } from '../utils/class'
 
 export interface UlProps extends React.ComponentPropsWithoutRef<'ul'> {}
 
-export const Ul: React.ElementType<UlProps> = (props: UlProps) => {
+export const Ul = (props: UlProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -11,7 +11,7 @@ export const Ul: React.ElementType<UlProps> = (props: UlProps) => {
     list-inside
     -indent-4
     pl-4
-    marker:text-xs
+    marker:text-base-sm
   `
   return (
     <ul className={cx(style, className)} {...restProps}>
@@ -22,7 +22,7 @@ export const Ul: React.ElementType<UlProps> = (props: UlProps) => {
 
 export interface OlProps extends React.ComponentPropsWithoutRef<'ol'> {}
 
-export const Ol: React.ElementType<OlProps> = (props: OlProps) => {
+export const Ol = (props: OlProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

package/packages/core/src/components/Pre.tsx

@@ -3,7 +3,7 @@ import { cx } from '../utils/class'
 
 export interface PreProps extends React.ComponentPropsWithoutRef<'pre'> {}
 
-export const Pre: React.ElementType<PreProps> = (props: PreProps) => {
+export const Pre = (props: PreProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

package/packages/core/src/components/Table.tsx

@@ -9,7 +9,7 @@ const styleBorder = `
   border-sumi-900
 `
 
-export const Table: React.ElementType<TableProps> = (props: TableProps) => {
+export const Table = (props: TableProps) => {
   const { className, children, ...restProps } = props
 
   // If there is no break-all setting, the table will protrude when using a smartphone
@@ -29,9 +29,7 @@ export const Table: React.ElementType<TableProps> = (props: TableProps) => {
 export interface CaptionProps
   extends React.ComponentPropsWithoutRef<'caption'> {}
 
-export const Caption: React.ElementType<CaptionProps> = (
-  props: CaptionProps
-) => {
+export const Caption = (props: CaptionProps) => {
   const { className, children, ...restProps } = props
 
   const style = `text-left`
@@ -44,7 +42,7 @@ export const Caption: React.ElementType<CaptionProps> = (
 
 export interface TheadProps extends React.ComponentPropsWithoutRef<'thead'> {}
 
-export const Thead: React.ElementType<TheadProps> = (props: TheadProps) => {
+export const Thead = (props: TheadProps) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -56,7 +54,7 @@ export const Thead: React.ElementType<TheadProps> = (props: TheadProps) => {
 
 export interface TbodyProps extends React.ComponentPropsWithoutRef<'tbody'> {}
 
-export const Tbody: React.ElementType<TbodyProps> = (props: TbodyProps) => {
+export const Tbody = (props: TbodyProps) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -68,7 +66,7 @@ export const Tbody: React.ElementType<TbodyProps> = (props: TbodyProps) => {
 
 export interface ThProps extends React.ComponentPropsWithoutRef<'th'> {}
 
-export const Th: React.ElementType<ThProps> = (props: ThProps) => {
+export const Th = (props: ThProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -85,7 +83,7 @@ export const Th: React.ElementType<ThProps> = (props: ThProps) => {
 
 export interface TrProps extends React.ComponentPropsWithoutRef<'tr'> {}
 
-export const Tr: React.ElementType<TrProps> = (props: TrProps) => {
+export const Tr = (props: TrProps) => {
   const { className, children, ...restProps } = props
 
   const style = ``
@@ -99,7 +97,7 @@ export const Tr: React.ElementType<TrProps> = (props: TrProps) => {
 
 export interface TdProps extends React.ComponentPropsWithoutRef<'td'> {}
 
-export const Td: React.ElementType<TdProps> = (props: TdProps) => {
+export const Td = (props: TdProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

package/packages/core/src/components/index.ts

@@ -1,6 +1,7 @@
 export { Button } from './Button'
 export { Card, CardHeader, CardBody, CardFooter } from './Card'
 export { Code } from './Code'
+export { Faq, Question, Answer } from './Faq'
 export { H1, H2, H3, H4, H5, H6 } from './Heading'
 export { Icon } from './Icon'
 export { IconButton } from './IconButton'

package/packages/core/src/index.ts

@@ -5,6 +5,9 @@ export {
   CardBody,
   CardFooter,
   Code,
+  Faq,
+  Question,
+  Answer,
   H1,
   H2,
   H3,

package/packages/forms/dist/components/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
 }
-export declare const Checkbox: React.ElementType<CheckboxProps>;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Checkbox.d.ts.map

package/packages/forms/dist/components/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC;CAAG;AAE9E,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,aAAa,CA+DpD,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC;CAAG;AAE9E,eAAO,MAAM,QAAQ,qGA8DpB,CAAA"}

package/packages/forms/dist/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,MAAM,CAAC,MAAM,QAAQ,GAAqC,KAAK,CAAC,UAAU,CAGxE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,EAAE;QAClB,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAA;KAC1B;IACD,IAAI,GAAG,CAAC,SAAS,EAAE;QACjB,SAAS,CAAC,IAAI,GAAG,GAAG,CAAC,SAAS,CAAA;KAC/B;IAED,MAAM,KAAK,GAAG;;;;;;GAMb,CAAA;IAED,MAAM,UAAU,GAAG;;;GAGlB,CAAA;IAED,MAAM,UAAU,GAAG;;;;;;;;;;;;;;GAclB,CAAA;IAED,OAAO,CACL,gBAAO,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAC3D,gBAAM,SAAS,EAAC,mBAAmB,aACjC,gBACE,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,UAAU,sBACG,GAAG,CAAC,YAAY,uBACf,GAAG,CAAC,cAAc,kBACvB,GAAG,CAAC,SAAS,IAAI,KAAK,KAChC,SAAS,EACb,GAAG,EAAE,GAAG,GACR,EACF,eAAM,SAAS,EAAE,UAAU,YACzB,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YAC5D,eAAM,CAAC,EAAC,wEAAwE,GAAG,GAC/E,GACD,EACP,eAAM,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAQ,IAC1D,GACD,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,EAAE;QAClB,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAA;KAC1B;IACD,IAAI,GAAG,CAAC,SAAS,EAAE;QACjB,SAAS,CAAC,IAAI,GAAG,GAAG,CAAC,SAAS,CAAA;KAC/B;IAED,MAAM,KAAK,GAAG;;;;;;GAMf,CAAA;IAEC,MAAM,UAAU,GAAG;;;GAGpB,CAAA;IAEC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;GAcpB,CAAA;IAEC,OAAO,CACL,gBAAO,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAC3D,gBAAM,SAAS,EAAC,mBAAmB,aACjC,gBACE,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,UAAU,sBACG,GAAG,CAAC,YAAY,uBACf,GAAG,CAAC,cAAc,kBACvB,GAAG,CAAC,SAAS,IAAI,KAAK,KAChC,SAAS,EACb,GAAG,EAAE,GAAG,GACR,EACF,eAAM,SAAS,EAAE,UAAU,YACzB,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YAC5D,eAAM,CAAC,EAAC,wEAAwE,GAAG,GAC/E,GACD,EACP,eAAM,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAQ,IAC1D,GACD,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}

package/packages/forms/dist/components/FieldsetControl.d.ts

@@ -7,5 +7,5 @@ export interface FieldsetControlProps extends React.ComponentPropsWithRef<'field
     isRequired?: boolean;
     direction?: 'flex-col' | 'flex-row';
 }
-export declare const FieldsetControl: React.ElementType<FieldsetControlProps>;
+export declare const FieldsetControl: React.ForwardRefExoticComponent<Omit<FieldsetControlProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
 //# sourceMappingURL=FieldsetControl.d.ts.map

package/packages/forms/dist/components/FieldsetControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldsetControl.d.ts","sourceRoot":"","sources":["../../src/components/FieldsetControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CACpC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,WAAW,CAAC,oBAAoB,CA6DhE,CAAA"}
+{"version":3,"file":"FieldsetControl.d.ts","sourceRoot":"","sources":["../../src/components/FieldsetControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CACpC;AAED,eAAO,MAAM,eAAe,+GA4D1B,CAAA"}

package/packages/forms/dist/components/FieldsetControl.js

@@ -14,7 +14,7 @@ export const FieldsetControl = React.forwardRef((props, ref) => {
         isRequired: isRequired ?? false
     };
     const styleDirection = direction ?? 'flex-col';
-    return (_jsx(ControllerContext.Provider, { value: context, children: _jsxs("fieldset", { className: cx('mb-4', className), ref: ref, ...restProps, children: [_jsx("legend", { children: _jsxs("p", { className: cx('block mb-2 text-label', isInvalid && 'text-sun-800'), children: [labelText, isRequired && _jsx("span", { className: "text-sun-800", children: "\u00A0*" })] }) }), _jsx("div", { className: cx('inline-flex', styleDirection), children: children }), helperText && (_jsx("p", { id: context.helperTextId, className: "text-xs text-sumi-700 mt-2", children: helperText })), isInvalid && (_jsx("p", { id: context.errorMessageId, className: cx('text-xs text-sun-800', helperText ? 'mt-1' : 'mt-2'), children: errorMessage }))] }) }));
+    return (_jsx(ControllerContext.Provider, { value: context, children: _jsxs("fieldset", { className: cx('mb-4', className), ref: ref, ...restProps, children: [_jsx("legend", { children: _jsxs("p", { className: cx('block mb-2 text-label', isInvalid && 'text-sun-800'), children: [labelText, isRequired && _jsx("span", { className: "text-sun-800", children: "\u00A0*" })] }) }), _jsx("div", { className: cx('inline-flex', styleDirection), children: children }), helperText && (_jsx("p", { id: context.helperTextId, className: "text-sup text-sumi-700 mt-2", children: helperText })), isInvalid && (_jsx("p", { id: context.errorMessageId, className: cx('text-sup text-sun-800', helperText ? 'mt-1' : 'mt-2'), children: errorMessage }))] }) }));
 });
 FieldsetControl.displayName = 'FieldsetControl';
 //# sourceMappingURL=FieldsetControl.js.map