@woodsportal/hubspot-kit 1.0.4 → 1.0.26

package/src/dev-module-config/ui/editors/MenuOptionsEditor.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { getNestedValue } from '../../runtime/module-config-runtime'
+import { isFieldVisible } from '../../schema/visibility'
+import { HsOccurrenceGroupEditor } from '../hubspot/HsOccurrenceGroupEditor'
+import { HsToggleRow } from '../hubspot/HsToggleRow'
+import { hsTypography } from '../hubspot/module-config-typography'
+import { ModuleConfigAnimatedPresence } from '../ModuleConfigAnimatedPresence'
+import { ModuleConfigCollapsible } from '../ModuleConfigCollapsible'
+import type { HubSpotFieldDefinition, ModuleFieldValues } from '../../schema/types'
+
+type MenuOptionsEditorProps = {
+  field: HubSpotFieldDefinition
+  moduleValues: ModuleFieldValues
+  onChange: (path: string, value: unknown) => void
+}
+
+export function MenuOptionsEditor({ field, moduleValues, onChange }: MenuOptionsEditorProps) {
+  const [open, setOpen] = useState(false)
+  const menuPath = field.name
+  const menuValues = (getNestedValue(moduleValues, menuPath) as ModuleFieldValues) ?? {}
+  const children = field.children ?? []
+
+  const standardToggle = children.find((c) => c.name === 'hubspot_defined_object')
+  const objectsField = children.find((c) => c.name === 'objects')
+  const customToggle = children.find((c) => c.name === 'hubspot_custom_object')
+  const customObjectsField = children.find((c) => c.name === 'hubspot_custom_objects')
+
+  const standardEnabled = Boolean(menuValues.hubspot_defined_object)
+  const customEnabled = Boolean(menuValues.hubspot_custom_object)
+  const objects = Array.isArray(menuValues.objects) ? (menuValues.objects as Array<ModuleFieldValues>) : []
+  const customObjects = Array.isArray(menuValues.hubspot_custom_objects)
+    ? (menuValues.hubspot_custom_objects as Array<ModuleFieldValues>)
+    : []
+
+  const setMenuValue = (key: string, value: unknown) => {
+    onChange(`${menuPath}.${key}`, value)
+  }
+
+  return (
+    <ModuleConfigCollapsible
+      open={open}
+      onToggle={() => setOpen((value) => !value)}
+      label={field.label}
+      headerClassName={hsTypography.groupHeader}
+    >
+      {standardToggle ? (
+        <HsToggleRow
+          label={standardToggle.label}
+          helpText={standardToggle.help_text}
+          required={standardToggle.required}
+          checked={standardEnabled}
+          onChange={(checked) => setMenuValue('hubspot_defined_object', checked)}
+        />
+      ) : null}
+
+      <ModuleConfigAnimatedPresence
+        show={Boolean(standardEnabled && objectsField && isFieldVisible(objectsField, moduleValues))}
+        enterFrom="bottom"
+      >
+        {objectsField ? (
+          <HsOccurrenceGroupEditor
+            field={objectsField}
+            items={objects}
+            moduleValues={moduleValues}
+            path={`${menuPath}.objects`}
+            onChange={onChange}
+            labelField="list_object_name"
+            sectionLabel="Menu Options"
+            visibilityContext={{ moduleValues }}
+          />
+        ) : null}
+      </ModuleConfigAnimatedPresence>
+
+      {customToggle ? (
+        <HsToggleRow
+          label={customToggle.label}
+          helpText={customToggle.help_text}
+          required={customToggle.required}
+          checked={customEnabled}
+          onChange={(checked) => setMenuValue('hubspot_custom_object', checked)}
+        />
+      ) : null}
+
+      <ModuleConfigAnimatedPresence
+        show={Boolean(customEnabled && customObjectsField && isFieldVisible(customObjectsField, moduleValues))}
+        enterFrom="bottom"
+      >
+        {customObjectsField ? (
+          <HsOccurrenceGroupEditor
+            field={customObjectsField}
+            items={customObjects}
+            moduleValues={moduleValues}
+            path={`${menuPath}.hubspot_custom_objects`}
+            onChange={onChange}
+            labelField="list_object_name"
+            sectionLabel="Custom Object Menu"
+            visibilityContext={{ moduleValues }}
+          />
+        ) : null}
+      </ModuleConfigAnimatedPresence>
+    </ModuleConfigCollapsible>
+  )
+}

package/src/dev-module-config/ui/hubspot/HsColorField.tsx

@@ -0,0 +1,106 @@
+import { useMemo, useRef, useState } from 'react'
+import { HsFieldLabel } from './HsFieldLabel'
+import { hsTypography } from './module-config-typography'
+import { HsColorPickerPopover } from './HsColorPickerPopover'
+import { useModuleConfigUi } from '../ModuleConfigUiContext'
+
+export type HsColorValue = {
+  color?: string
+  opacity?: number | string
+}
+
+type HsColorFieldProps = {
+  label: string
+  required?: boolean
+  helpText?: string
+  value: HsColorValue
+  onChange: (value: HsColorValue) => void
+}
+
+function normalizeHex(color: string | undefined): string {
+  const raw = (color ?? '').replace('#', '').trim()
+  if (/^[0-9a-fA-F]{6}$/.test(raw)) return `#${raw.toUpperCase()}`
+  if (/^[0-9a-fA-F]{3}$/.test(raw)) {
+    return `#${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}`.toUpperCase()
+  }
+  return '#000000'
+}
+
+function previewRgba(color: string | undefined, opacity: number | string | undefined): string {
+  const hex = normalizeHex(color)
+  const r = Number.parseInt(hex.slice(1, 3), 16)
+  const g = Number.parseInt(hex.slice(3, 5), 16)
+  const b = Number.parseInt(hex.slice(5, 7), 16)
+  const alpha = Math.min(100, Math.max(0, Number(opacity ?? 100))) / 100
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+export function HsColorField({ label, required, helpText, value, onChange }: HsColorFieldProps) {
+  const swatchRef = useRef<HTMLButtonElement>(null)
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const { colorPickerPlacement, theme } = useModuleConfigUi()
+  const color = value?.color ?? ''
+  const opacity = value?.opacity ?? 100
+  const swatchColor = useMemo(() => previewRgba(color, opacity), [color, opacity])
+
+  const setHex = (nextRaw: string) => {
+    const cleaned = nextRaw.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)
+    onChange({ ...value, color: cleaned ? `#${cleaned.toUpperCase()}` : '' })
+  }
+
+  const setOpacity = (next: number) => {
+    const clamped = Math.min(100, Math.max(0, Number.isFinite(next) ? next : 0))
+    onChange({ ...value, opacity: clamped })
+  }
+
+  const setColor = (nextHex: string) => {
+    onChange({ ...value, color: normalizeHex(nextHex) })
+  }
+
+  return (
+    <div className="mb-4">
+      <HsFieldLabel label={label} required={required} helpText={helpText} />
+      <div className="flex items-center gap-2">
+        <span className={hsTypography.helper}>#</span>
+        <input
+          className={`w-24 rounded px-2 py-2 uppercase mc-input ${hsTypography.input}`}
+          value={color.replace('#', '')}
+          onChange={(event) => setHex(event.target.value)}
+          spellCheck={false}
+          aria-label={`${label} hex value`}
+        />
+        <input
+          type="number"
+          min={0}
+          max={100}
+          className={`w-16 rounded px-2 py-2 mc-input ${hsTypography.input}`}
+          value={opacity}
+          onChange={(event) => setOpacity(Number(event.target.value))}
+          aria-label={`${label} opacity`}
+        />
+        <span className={hsTypography.helper}>%</span>
+        <div className="relative shrink-0">
+          <button
+            ref={swatchRef}
+            type="button"
+            className="relative h-8 w-8 rounded-full p-0 focus:outline-none"
+            style={{ backgroundColor: swatchColor }}
+            aria-label={`${label} color picker`}
+            aria-expanded={pickerOpen}
+            onClick={() => setPickerOpen((open) => !open)}
+          />
+          {pickerOpen ? (
+            <HsColorPickerPopover
+              value={color}
+              onChange={setColor}
+              onClose={() => setPickerOpen(false)}
+              anchorRef={swatchRef}
+              preferredPlacement={colorPickerPlacement}
+              theme={theme}
+            />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/dev-module-config/ui/hubspot/HsColorPickerPopover.tsx

@@ -0,0 +1,210 @@
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type RefObject } from 'react'
+import { createPortal } from 'react-dom'
+import { hsTypography } from './module-config-typography'
+import { HUBSPOT_SIMPLE_COLOR_ROWS } from './hs-color-palette'
+import { mcSurface } from '../module-config-surfaces'
+import type { ColorPickerPlacement, ModuleConfigToolbarTheme } from '../ModuleConfigUiContext'
+
+type HsColorPickerPopoverProps = {
+  value: string
+  onChange: (hex: string) => void
+  onClose: () => void
+  anchorRef: RefObject<HTMLButtonElement | null>
+  preferredPlacement?: ColorPickerPlacement
+  theme: ModuleConfigToolbarTheme
+}
+
+type PickerTab = 'simple' | 'advanced'
+
+type PopoverPosition = {
+  top: number
+  left: number
+  placement: 'left' | 'right'
+}
+
+const POPOVER_WIDTH = 252
+const GAP = 10
+const VIEWPORT_PADDING = 8
+
+function normalizeHex(color: string): string {
+  const raw = color.replace('#', '').trim()
+  if (/^[0-9a-fA-F]{6}$/.test(raw)) return `#${raw.toUpperCase()}`
+  if (/^[0-9a-fA-F]{3}$/.test(raw)) {
+    return `#${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}`.toUpperCase()
+  }
+  return '#000000'
+}
+
+function computePopoverPosition(
+  anchor: DOMRect,
+  popoverWidth: number,
+  popoverHeight: number,
+  preferredPlacement: ColorPickerPlacement,
+): PopoverPosition {
+  const spaceRight = window.innerWidth - anchor.right - GAP - VIEWPORT_PADDING
+  const spaceLeft = anchor.left - GAP - VIEWPORT_PADDING
+  const canLeft = spaceLeft >= popoverWidth
+  const canRight = spaceRight >= popoverWidth
+
+  let openRight: boolean
+  if (preferredPlacement === 'left') {
+    openRight = !canLeft && canRight
+  } else {
+    openRight = canRight || !canLeft
+  }
+
+  let left = openRight ? anchor.right + GAP : anchor.left - GAP - popoverWidth
+  left = Math.max(
+    VIEWPORT_PADDING,
+    Math.min(left, window.innerWidth - popoverWidth - VIEWPORT_PADDING),
+  )
+
+  let top = anchor.top + anchor.height / 2
+  const halfHeight = popoverHeight / 2
+  top = Math.max(
+    VIEWPORT_PADDING + halfHeight,
+    Math.min(top, window.innerHeight - VIEWPORT_PADDING - halfHeight),
+  )
+
+  return {
+    top,
+    left,
+    placement: openRight ? 'right' : 'left',
+  }
+}
+
+export function HsColorPickerPopover({
+  value,
+  onChange,
+  onClose,
+  anchorRef,
+  preferredPlacement = 'right',
+  theme,
+}: HsColorPickerPopoverProps) {
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const [tab, setTab] = useState<PickerTab>('simple')
+  const [position, setPosition] = useState<PopoverPosition | null>(null)
+  const selected = normalizeHex(value)
+  const panelId = useId()
+
+  const updatePosition = useCallback(() => {
+    const anchor = anchorRef.current
+    if (!anchor) return
+
+    const popover = popoverRef.current
+    const width = popover?.offsetWidth ?? POPOVER_WIDTH
+    const height = popover?.offsetHeight ?? (tab === 'simple' ? 280 : 180)
+    setPosition(
+      computePopoverPosition(anchor.getBoundingClientRect(), width, height, preferredPlacement),
+    )
+  }, [anchorRef, preferredPlacement, tab])
+
+  useLayoutEffect(() => {
+    updatePosition()
+    window.addEventListener('resize', updatePosition)
+    window.addEventListener('scroll', updatePosition, true)
+    return () => {
+      window.removeEventListener('resize', updatePosition)
+      window.removeEventListener('scroll', updatePosition, true)
+    }
+  }, [updatePosition])
+
+  useEffect(() => {
+    updatePosition()
+  }, [tab, updatePosition])
+
+  useEffect(() => {
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (popoverRef.current?.contains(target)) return
+      if (anchorRef.current?.contains(target)) return
+      onClose()
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [anchorRef, onClose])
+
+  if (!position) return null
+
+  return createPortal(
+    <div
+      ref={popoverRef}
+      id={panelId}
+      role="dialog"
+      aria-label="Color picker"
+      data-mc-theme={theme}
+      className="mc-modal-panel fixed z-[9999] w-[252px] -translate-y-1/2"
+      style={{ top: position.top, left: position.left }}
+    >
+      <div className={`${mcSurface.tabBar} !flex-shrink`}>
+        {(['simple', 'advanced'] as Array<PickerTab>).map((item) => (
+          <button
+            key={item}
+            type="button"
+            className={tab === item ? mcSurface.tabButtonActive : mcSurface.tabButton}
+            onClick={() => setTab(item)}
+          >
+            {item}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'simple' ? (
+        <div className="p-2">
+          <div className="grid grid-cols-9 gap-1">
+            {HUBSPOT_SIMPLE_COLOR_ROWS.flat().map((swatch) => {
+              const isSelected = normalizeHex(swatch) === selected
+              return (
+                <button
+                  key={swatch}
+                  type="button"
+                  title={swatch}
+                  aria-label={swatch}
+                  aria-pressed={isSelected}
+                  className={`h-6 w-6 rounded-sm ${isSelected ? 'mc-color-swatch-selected' : ''}`}
+                  style={{ backgroundColor: swatch }}
+                  onClick={() => {
+                    onChange(swatch)
+                    onClose()
+                  }}
+                />
+              )
+            })}
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-3 p-3">
+          <input
+            type="color"
+            className="h-10 w-full cursor-pointer rounded mc-input"
+            value={selected}
+            onChange={(event) => onChange(event.target.value.toUpperCase())}
+            aria-label="Advanced color picker"
+          />
+          <div className="flex items-center gap-2">
+            <span className={hsTypography.helper}>#</span>
+            <input
+              className={`flex-1 rounded px-2 py-1.5 uppercase mc-input ${hsTypography.input}`}
+              value={selected.replace('#', '')}
+              onChange={(event) => {
+                const cleaned = event.target.value.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)
+                if (cleaned.length === 6) onChange(`#${cleaned.toUpperCase()}`)
+              }}
+              spellCheck={false}
+            />
+          </div>
+        </div>
+      )}
+    </div>,
+    document.body,
+  )
+}

package/src/dev-module-config/ui/hubspot/HsFieldLabel.tsx

@@ -0,0 +1,24 @@
+import { hsTypography, stripHtml } from './module-config-typography'
+
+type HsFieldLabelProps = {
+  label: string
+  required?: boolean
+  helpText?: string
+  htmlFor?: string
+}
+
+export function HsFieldLabel({ label, required, helpText, htmlFor }: HsFieldLabelProps) {
+  return (
+    <div className="mb-1 flex items-center gap-1">
+      <label htmlFor={htmlFor} className={hsTypography.fieldLabel}>
+        {label}
+        {required ? <span className="text-[var(--mc-error-text)]"> *</span> : null}
+      </label>
+      {helpText ? (
+        <span title={stripHtml(helpText)} className={hsTypography.infoIcon}>
+          i
+        </span>
+      ) : null}
+    </div>
+  )
+}

package/src/dev-module-config/ui/hubspot/HsFieldWidgets.tsx

@@ -0,0 +1,248 @@
+import { useMemo, useState } from 'react'
+import { HsFieldLabel } from './HsFieldLabel'
+import { hsTypography } from './module-config-typography'
+import { mcMotion } from '../module-config-motion'
+import { mcSurface } from '../module-config-surfaces'
+import { useModuleConfigUi } from '../ModuleConfigUiContext'
+
+type HsLinkFieldProps = {
+  label: string
+  required?: boolean
+  helpText?: string
+  value: {
+    url?: { href?: string; type?: string }
+    open_in_new_tab?: boolean
+    no_follow?: boolean
+  }
+  onChange: (value: HsLinkFieldProps['value']) => void
+}
+
+export function HsLinkField({ label, required, helpText, value, onChange }: HsLinkFieldProps) {
+  const href = value.url?.href ?? ''
+
+  return (
+    <div className="mb-4">
+      <HsFieldLabel label={label} required={required} helpText={helpText} />
+      <input
+        className={`w-full rounded px-3 py-2 focus:outline-none ${hsTypography.input} mc-input ${mcMotion.fieldControl}`}
+        placeholder="https://…"
+        value={href}
+        onChange={(event) =>
+          onChange({
+            ...value,
+            url: { href: event.target.value, type: value.url?.type ?? 'EXTERNAL' },
+          })
+        }
+      />
+      <div className="mt-2 flex flex-col gap-2">
+        <label className={`flex items-center gap-2 ${hsTypography.body}`}>
+          <input
+            type="checkbox"
+            checked={Boolean(value.open_in_new_tab)}
+            onChange={(event) => onChange({ ...value, open_in_new_tab: event.target.checked })}
+            className="h-4 w-4 mc-checkbox"
+          />
+          Open in new tab
+        </label>
+        <label className={`flex items-center gap-2 ${hsTypography.body}`}>
+          <input
+            type="checkbox"
+            checked={Boolean(value.no_follow)}
+            onChange={(event) => onChange({ ...value, no_follow: event.target.checked })}
+            className="h-4 w-4 mc-checkbox"
+          />
+          No follow
+        </label>
+      </div>
+    </div>
+  )
+}
+
+type HsRichTextFieldProps = {
+  label: string
+  required?: boolean
+  helpText?: string
+  value: string
+  onChange: (value: string) => void
+}
+
+function wrapSelection(value: string, before: string, after: string): string {
+  return `${before}${value}${after}`
+}
+
+export function HsRichTextField({ label, required, helpText, value, onChange }: HsRichTextFieldProps) {
+  const [expanded, setExpanded] = useState(false)
+  const [draft, setDraft] = useState(value)
+  const { theme } = useModuleConfigUi()
+
+  const toolbar = useMemo(
+    () => [
+      { label: 'B', action: () => onChange(wrapSelection(value, '<strong>', '</strong>')) },
+      { label: 'I', action: () => onChange(wrapSelection(value, '<em>', '</em>')) },
+      { label: 'U', action: () => onChange(wrapSelection(value, '<u>', '</u>')) },
+      {
+        label: 'Link',
+        action: () => {
+          const url = window.prompt('Link URL')
+          if (!url) return
+          onChange(wrapSelection(value, `<a href="${url}">`, '</a>'))
+        },
+      },
+    ],
+    [onChange, value],
+  )
+
+  return (
+    <div className="mb-4">
+      <HsFieldLabel label={label} required={required} helpText={helpText} />
+      <div className={`overflow-hidden ${mcSurface.panel}`}>
+        <div className="mc-richtext-toolbar flex flex-wrap items-center gap-1 px-2 py-1.5">
+          {toolbar.map((item) => (
+            <button
+              key={item.label}
+              type="button"
+              className={`rounded px-2 py-1 text-xs font-semibold ${mcSurface.text} ${mcSurface.hover}`}
+              onClick={item.action}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+        <textarea
+          className={`min-h-[120px] w-full resize-y px-3 py-2 text-sm leading-relaxed ${mcSurface.text} bg-transparent focus:outline-none`}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      </div>
+      <button
+        type="button"
+        className={`mt-2 text-sm ${mcSurface.textMuted} hover:text-[var(--mc-text)]`}
+        onClick={() => {
+          setDraft(value)
+          setExpanded(true)
+        }}
+      >
+        Edit in expanded view
+      </button>
+
+      {expanded ? (
+        <div
+          data-mc-theme={theme}
+          className="fixed inset-0 z-[10000] flex items-center justify-center bg-[var(--mc-modal-backdrop)] p-4"
+        >
+          <div className="mc-modal-panel flex h-[min(80vh,640px)] w-[min(960px,100%)] flex-col">
+            <div className="mc-modal-section px-4 py-3">
+              <h3 className={`text-lg ${mcSurface.text}`}>{label}</h3>
+            </div>
+            <textarea
+              className="flex-1 resize-none px-4 py-3 font-mono text-sm leading-relaxed mc-input bg-transparent focus:outline-none"
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+            />
+            <div className="mc-modal-section flex justify-end gap-2 px-4 py-3">
+              <button type="button" className={`${mcSurface.footerButton} px-4 py-2`} onClick={() => setExpanded(false)}>
+                Cancel
+              </button>
+              <button
+                type="button"
+                className={`mc-btn-primary px-4 py-2 text-sm`}
+                onClick={() => {
+                  onChange(draft)
+                  setExpanded(false)
+                }}
+              >
+                Apply
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+type HsTextFieldProps = {
+  label: string
+  required?: boolean
+  helpText?: string
+  value: string
+  onChange: (value: string) => void
+  multiline?: boolean
+  monospace?: boolean
+  darkEditor?: boolean
+}
+
+export function HsTextField({
+  label,
+  required,
+  helpText,
+  value,
+  onChange,
+  multiline = false,
+  monospace = false,
+  darkEditor = false,
+}: HsTextFieldProps) {
+  const [dark, setDark] = useState(false)
+  const inputClass = `w-full rounded px-3 py-2 text-sm focus:outline-none mc-input ${mcMotion.fieldControl} ${
+    monospace ? 'font-mono text-xs leading-relaxed' : ''
+  } ${dark ? 'bg-[var(--mc-bg-hard)] text-[var(--mc-text-muted)]' : mcSurface.text}`
+
+  return (
+    <div className="mb-4">
+      <HsFieldLabel label={label} required={required} helpText={helpText} />
+      {multiline ? (
+        <textarea
+          className={`${inputClass} min-h-[120px]`}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      ) : (
+        <input className={inputClass} value={value} onChange={(event) => onChange(event.target.value)} />
+      )}
+      {darkEditor ? (
+        <button
+          type="button"
+          className={`mt-2 text-sm ${mcSurface.textMuted} hover:text-[var(--mc-text)]`}
+          onClick={() => setDark((current) => !current)}
+        >
+          {dark ? 'Turn off dark editor' : 'Turn on dark editor'}
+        </button>
+      ) : null}
+      {label.toLowerCase().includes('svg') ? (
+        <p className={`mt-1 text-xs ${mcSurface.textMuted}`}>
+          You can search SVG{' '}
+          <a href="https://icons.hubspot.com/" target="_blank" rel="noreferrer" className={`${mcSurface.textMuted} hover:text-[var(--mc-text)]`}>
+            Here
+          </a>{' '}
+          and copy only the SVG start to end and paste it here.
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+export function HsNumberField({
+  label,
+  required,
+  helpText,
+  value,
+  onChange,
+}: {
+  label: string
+  required?: boolean
+  helpText?: string
+  value: number | string
+  onChange: (value: number) => void
+}) {
+  return (
+    <div className="mb-4">
+      <HsFieldLabel label={label} required={required} helpText={helpText} />
+      <input
+        type="number"
+        className={`w-full rounded px-3 py-2 focus:outline-none ${hsTypography.input} mc-input ${mcMotion.fieldControl}`}
+        value={value}
+        onChange={(event) => onChange(Number(event.target.value))}
+      />
+    </div>
+  )
+}