ods-ant 0.2.0 → 0.4.1

package/dist-lib/forms/Form.cjs

@@ -0,0 +1,244 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`);let t=require(`antd`),n=require(`react`),r=require(`react/jsx-runtime`);var i=`ds-form-styles`,a={standard:{layout:`vertical`,size:`middle`,requiredMark:!0,colon:!1},compact:{layout:`vertical`,size:`small`,requiredMark:!0,colon:!1},clinical:{layout:`vertical`,size:`middle`,requiredMark:!0,colon:!1},review:{layout:`horizontal`,size:`middle`,requiredMark:!1,colon:!1},wizardSection:{layout:`vertical`,size:`middle`,requiredMark:`optional`,colon:!1}},o={asterisk:!0,optional:`optional`,none:!1};function s(){if(typeof document>`u`)return;let{form:t}=e.dsSemanticTokens,n=document.getElementById(i);n||(n=document.createElement(`style`),n.id=i,document.head.appendChild(n)),n.textContent=`
+    .ds-form-shell {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-form-section-gap);
+      padding: var(--ds-form-shell-padding);
+      border-radius: ${t.border.radius};
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-form-shell[data-ds-form-variant='clinical'] {
+      background: ${t.surface.clinical};
+      border: ${t.border.width} solid ${t.border.color};
+    }
+
+    .ds-form-shell[data-ds-form-variant='review'] {
+      background: ${t.surface.review};
+      border: ${t.border.width} solid ${t.border.color};
+    }
+
+    .ds-form-shell[data-ds-form-variant='wizardSection'] {
+      background: ${t.surface.background};
+      border: ${t.border.width} solid ${t.border.color};
+    }
+
+    .ds-form-heading {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+
+    .ds-form-heading-copy {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .ds-form-section-title {
+      color: ${t.text.sectionTitle};
+      font-size: ${t.typography.sectionTitle.fontSize};
+      font-weight: ${t.typography.sectionTitle.fontWeight};
+      line-height: ${t.typography.sectionTitle.lineHeight};
+      letter-spacing: 0;
+      margin: 0;
+    }
+
+    .ds-form-section-description {
+      color: ${t.text.description};
+      font-size: ${t.typography.sectionDescription.fontSize};
+      font-weight: ${t.typography.sectionDescription.fontWeight};
+      line-height: ${t.typography.sectionDescription.lineHeight};
+      letter-spacing: 0;
+      margin: 0;
+    }
+
+    .ds-form-summary {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 12px 14px;
+      background: ${t.surface.error};
+      border: ${t.border.width} solid ${t.text.error};
+      border-radius: ${t.border.radius};
+      color: ${t.text.error};
+      font-size: ${t.typography.help.fontSize};
+      font-weight: ${t.typography.help.fontWeight};
+      line-height: ${t.typography.help.lineHeight};
+    }
+
+    .ds-form.ant-form {
+      margin: 0;
+      color: ${t.text.label};
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-form.ant-form input.ds-input.ant-input,
+    .ds-form.ant-form .ds-input.ant-input-affix-wrapper,
+    .ds-form.ant-form .ds-input.ant-input-search,
+    .ds-form.ant-form .ds-input.ant-space-compact.ant-input-search,
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple),
+    .ds-form.ant-form .ds-input-number.ant-input-number,
+    .ds-form.ant-form .ds-input-number.ant-input-number-affix-wrapper,
+    .ds-form.ant-form .ds-date-picker.ant-picker,
+    .ds-form.ant-form .ds-time-picker.ant-picker {
+      height: var(--ds-form-control-height) !important;
+      min-height: var(--ds-form-control-height) !important;
+      border-radius: ${e.dsSemanticTokens.input.border.radius} !important;
+      box-sizing: border-box !important;
+    }
+
+    .ds-form.ant-form input.ds-input.ant-input,
+    .ds-form.ant-form .ds-input.ant-input-affix-wrapper {
+      padding: var(--ds-form-control-padding-y) var(--ds-form-control-padding-x) !important;
+    }
+
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple),
+    .ds-form.ant-form .ds-date-picker.ant-picker,
+    .ds-form.ant-form .ds-time-picker.ant-picker {
+      padding: 0 var(--ds-form-control-padding-x) !important;
+    }
+
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-content,
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-selection-item,
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-selection-placeholder {
+      height: 100% !important;
+      min-height: 0 !important;
+    }
+
+    .ds-form.ant-form .ant-form-item {
+      margin-bottom: var(--ds-form-item-gap);
+    }
+
+    .ds-form.ant-form .ant-form-item:last-child {
+      margin-bottom: 0;
+    }
+
+    .ds-form.ant-form .ant-form-item-label {
+      padding-bottom: 6px;
+    }
+
+    .ds-form.ant-form .ant-form-item-label > label {
+      color: ${t.text.label};
+      font-size: ${t.typography.label.fontSize};
+      font-weight: ${t.typography.label.fontWeight};
+      line-height: ${t.typography.label.lineHeight};
+      letter-spacing: 0;
+      height: auto;
+    }
+
+    .ds-form.ant-form .ant-form-item-label > label::after {
+      display: none;
+    }
+
+    .ds-form.ant-form .ant-form-item-required::before,
+    .ds-form.ant-form .ant-form-item-required-mark-optional::before {
+      color: ${t.text.required} !important;
+      font-family: 'Nunito', sans-serif;
+      font-weight: 700;
+    }
+
+    .ds-form.ant-form .ant-form-item-optional {
+      color: ${t.text.optional};
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 16px;
+      margin-inline-start: 6px;
+    }
+
+    .ds-form.ant-form .ant-form-item-explain,
+    .ds-form.ant-form .ant-form-item-extra {
+      font-size: ${t.typography.help.fontSize};
+      font-weight: ${t.typography.help.fontWeight};
+      line-height: ${t.typography.help.lineHeight};
+      letter-spacing: 0;
+      margin-top: 4px;
+    }
+
+    .ds-form.ant-form .ant-form-item-explain-error {
+      color: ${t.text.error};
+    }
+
+    .ds-form.ant-form .ant-form-item-explain-warning {
+      color: ${t.text.warning};
+    }
+
+    .ds-form.ant-form .ant-form-item-has-success .ant-form-item-explain,
+    .ds-form.ant-form .ant-form-item-has-success .ant-form-item-extra {
+      color: ${t.text.success};
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='compact'] .ant-form-item-label {
+      padding-bottom: 4px;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item {
+      padding: 10px 0;
+      border-bottom: ${t.border.width} solid ${t.border.color};
+      margin-bottom: 0 !important;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
+      margin-bottom: 0 !important;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item:first-child {
+      padding-top: 0;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-row {
+      display: grid !important;
+      grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
+      column-gap: 16px;
+      align-items: start;
+      min-height: 22px;
+      width: 100%;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-label {
+      flex: none !important;
+      max-width: none !important;
+      min-height: 22px;
+      padding: 0 !important;
+      text-align: left !important;
+      white-space: normal;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control {
+      flex: none !important;
+      min-width: 0;
+      min-height: 22px;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control-input {
+      min-height: 22px;
+      align-items: flex-start;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control-input-content {
+      min-height: 22px;
+      line-height: 22px;
+      color: ${t.text.label};
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-label > label {
+      display: inline-flex;
+      min-height: 22px;
+      align-items: flex-start;
+      color: ${t.text.description};
+      line-height: 22px;
+      white-space: normal;
+    }
+
+    @media (max-width: 640px) {
+      .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-row {
+        grid-template-columns: 1fr;
+        row-gap: 2px;
+      }
+    }
+  `}function c(t){let{form:n}=e.dsSemanticTokens,{input:r}=e.dsSemanticTokens,i=n.spacing[t],o=a[t].size===`small`?`small`:`middle`,s=r.padding[o];return{"--ds-form-item-gap":i.itemGap,"--ds-form-section-gap":i.sectionGap,"--ds-form-shell-padding":i.shellPadding,"--ds-form-control-height":r.height[o],"--ds-form-control-padding-x":s.x,"--ds-form-control-padding-y":s.y}}var l=({dsVariant:e=`standard`,dsRequiredMark:i,dsValidationSummary:l,dsSectionTitle:u,dsSectionDescription:d,dsSectionActions:f,className:p=``,rootClassName:m=``,style:h={},children:g,..._})=>{(0,n.useEffect)(()=>{s()},[]);let v=a[e],y=i?o[i]:v.requiredMark,b=`ds-form${p?` ${p}`:``}`,x=`ds-form-root${m?` ${m}`:``}`,S=c(e),C=!!(u||d||f),w=(0,r.jsxs)(t.Form,{..._,className:b,rootClassName:x,style:{...S,...h},layout:v.layout,size:v.size,requiredMark:y,colon:v.colon,variant:`outlined`,"data-ds-form-variant":e,children:[l?(0,r.jsx)(`div`,{className:`ds-form-summary`,role:`alert`,"aria-live":`polite`,children:l}):null,g]});return!C&&(e===`standard`||e===`compact`)?w:(0,r.jsxs)(`section`,{className:`ds-form-shell`,style:S,"data-ds-form-variant":e,children:[C?(0,r.jsxs)(`div`,{className:`ds-form-heading`,children:[(0,r.jsxs)(`div`,{className:`ds-form-heading-copy`,children:[u?(0,r.jsx)(`h3`,{className:`ds-form-section-title`,children:u}):null,d?(0,r.jsx)(`p`,{className:`ds-form-section-description`,children:d}):null]}),f?(0,r.jsx)(`div`,{children:f}):null]}):null,w]})};l.displayName=`Form`;var u=Object.assign(l,{Item:t.Form.Item,List:t.Form.List,ErrorList:t.Form.ErrorList,Provider:t.Form.Provider,useForm:t.Form.useForm,useFormInstance:t.Form.useFormInstance,useWatch:t.Form.useWatch});exports.Form=u,exports.FormBase=l;
+//# sourceMappingURL=Form.cjs.map

package/dist-lib/forms/Form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.cjs","names":[],"sources":["../../src/ds/forms/Form.tsx"],"sourcesContent":["import { Form as AntForm } from 'antd';\nimport type { FormProps as AntFormProps } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSFormVariant = 'standard' | 'compact' | 'clinical' | 'review' | 'wizardSection';\nexport type DSFormRequiredMark = 'asterisk' | 'optional' | 'none';\n\nexport type FormProps<Values = any> = Omit<\n  AntFormProps<Values>,\n  'layout' | 'requiredMark' | 'colon' | 'size' | 'variant'\n> & {\n  /** DS form workflow variant. */\n  dsVariant?: DSFormVariant;\n  /** DS required marker treatment. */\n  dsRequiredMark?: DSFormRequiredMark;\n  /** Optional form-level validation summary shown before fields. */\n  dsValidationSummary?: ReactNode;\n  /** Optional section title for clinical, review, or wizard form sections. */\n  dsSectionTitle?: ReactNode;\n  /** Optional section description displayed below the section title. */\n  dsSectionDescription?: ReactNode;\n  /** Optional action slot aligned with the section title. */\n  dsSectionActions?: ReactNode;\n};\n\ntype VariantDefaults = {\n  layout: NonNullable<AntFormProps['layout']>;\n  size: NonNullable<AntFormProps['size']>;\n  requiredMark: AntFormProps['requiredMark'];\n  colon: boolean;\n};\n\ntype DSFormComponent = (<Values = any>(props: FormProps<Values>) => ReactNode) & {\n  Item: typeof AntForm.Item;\n  List: typeof AntForm.List;\n  ErrorList: typeof AntForm.ErrorList;\n  Provider: typeof AntForm.Provider;\n  useForm: typeof AntForm.useForm;\n  useFormInstance: typeof AntForm.useFormInstance;\n  useWatch: typeof AntForm.useWatch;\n};\n\nconst STYLE_ID = 'ds-form-styles';\n\nconst VARIANT_DEFAULTS: Record<DSFormVariant, VariantDefaults> = {\n  standard: {\n    layout: 'vertical',\n    size: 'middle',\n    requiredMark: true,\n    colon: false,\n  },\n  compact: {\n    layout: 'vertical',\n    size: 'small',\n    requiredMark: true,\n    colon: false,\n  },\n  clinical: {\n    layout: 'vertical',\n    size: 'middle',\n    requiredMark: true,\n    colon: false,\n  },\n  review: {\n    layout: 'horizontal',\n    size: 'middle',\n    requiredMark: false,\n    colon: false,\n  },\n  wizardSection: {\n    layout: 'vertical',\n    size: 'middle',\n    requiredMark: 'optional',\n    colon: false,\n  },\n};\n\nconst REQUIRED_MARK_MAP: Record<DSFormRequiredMark, AntFormProps['requiredMark']> = {\n  asterisk: true,\n  optional: 'optional',\n  none: false,\n};\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { form } = dsSemanticTokens;\n\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-form-shell {\n      display: flex;\n      flex-direction: column;\n      gap: var(--ds-form-section-gap);\n      padding: var(--ds-form-shell-padding);\n      border-radius: ${form.border.radius};\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-form-shell[data-ds-form-variant='clinical'] {\n      background: ${form.surface.clinical};\n      border: ${form.border.width} solid ${form.border.color};\n    }\n\n    .ds-form-shell[data-ds-form-variant='review'] {\n      background: ${form.surface.review};\n      border: ${form.border.width} solid ${form.border.color};\n    }\n\n    .ds-form-shell[data-ds-form-variant='wizardSection'] {\n      background: ${form.surface.background};\n      border: ${form.border.width} solid ${form.border.color};\n    }\n\n    .ds-form-heading {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .ds-form-heading-copy {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n\n    .ds-form-section-title {\n      color: ${form.text.sectionTitle};\n      font-size: ${form.typography.sectionTitle.fontSize};\n      font-weight: ${form.typography.sectionTitle.fontWeight};\n      line-height: ${form.typography.sectionTitle.lineHeight};\n      letter-spacing: 0;\n      margin: 0;\n    }\n\n    .ds-form-section-description {\n      color: ${form.text.description};\n      font-size: ${form.typography.sectionDescription.fontSize};\n      font-weight: ${form.typography.sectionDescription.fontWeight};\n      line-height: ${form.typography.sectionDescription.lineHeight};\n      letter-spacing: 0;\n      margin: 0;\n    }\n\n    .ds-form-summary {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      padding: 12px 14px;\n      background: ${form.surface.error};\n      border: ${form.border.width} solid ${form.text.error};\n      border-radius: ${form.border.radius};\n      color: ${form.text.error};\n      font-size: ${form.typography.help.fontSize};\n      font-weight: ${form.typography.help.fontWeight};\n      line-height: ${form.typography.help.lineHeight};\n    }\n\n    .ds-form.ant-form {\n      margin: 0;\n      color: ${form.text.label};\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-form.ant-form input.ds-input.ant-input,\n    .ds-form.ant-form .ds-input.ant-input-affix-wrapper,\n    .ds-form.ant-form .ds-input.ant-input-search,\n    .ds-form.ant-form .ds-input.ant-space-compact.ant-input-search,\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple),\n    .ds-form.ant-form .ds-input-number.ant-input-number,\n    .ds-form.ant-form .ds-input-number.ant-input-number-affix-wrapper,\n    .ds-form.ant-form .ds-date-picker.ant-picker,\n    .ds-form.ant-form .ds-time-picker.ant-picker {\n      height: var(--ds-form-control-height) !important;\n      min-height: var(--ds-form-control-height) !important;\n      border-radius: ${dsSemanticTokens.input.border.radius} !important;\n      box-sizing: border-box !important;\n    }\n\n    .ds-form.ant-form input.ds-input.ant-input,\n    .ds-form.ant-form .ds-input.ant-input-affix-wrapper {\n      padding: var(--ds-form-control-padding-y) var(--ds-form-control-padding-x) !important;\n    }\n\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple),\n    .ds-form.ant-form .ds-date-picker.ant-picker,\n    .ds-form.ant-form .ds-time-picker.ant-picker {\n      padding: 0 var(--ds-form-control-padding-x) !important;\n    }\n\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-content,\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-selection-item,\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-selection-placeholder {\n      height: 100% !important;\n      min-height: 0 !important;\n    }\n\n    .ds-form.ant-form .ant-form-item {\n      margin-bottom: var(--ds-form-item-gap);\n    }\n\n    .ds-form.ant-form .ant-form-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .ds-form.ant-form .ant-form-item-label {\n      padding-bottom: 6px;\n    }\n\n    .ds-form.ant-form .ant-form-item-label > label {\n      color: ${form.text.label};\n      font-size: ${form.typography.label.fontSize};\n      font-weight: ${form.typography.label.fontWeight};\n      line-height: ${form.typography.label.lineHeight};\n      letter-spacing: 0;\n      height: auto;\n    }\n\n    .ds-form.ant-form .ant-form-item-label > label::after {\n      display: none;\n    }\n\n    .ds-form.ant-form .ant-form-item-required::before,\n    .ds-form.ant-form .ant-form-item-required-mark-optional::before {\n      color: ${form.text.required} !important;\n      font-family: 'Nunito', sans-serif;\n      font-weight: 700;\n    }\n\n    .ds-form.ant-form .ant-form-item-optional {\n      color: ${form.text.optional};\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 16px;\n      margin-inline-start: 6px;\n    }\n\n    .ds-form.ant-form .ant-form-item-explain,\n    .ds-form.ant-form .ant-form-item-extra {\n      font-size: ${form.typography.help.fontSize};\n      font-weight: ${form.typography.help.fontWeight};\n      line-height: ${form.typography.help.lineHeight};\n      letter-spacing: 0;\n      margin-top: 4px;\n    }\n\n    .ds-form.ant-form .ant-form-item-explain-error {\n      color: ${form.text.error};\n    }\n\n    .ds-form.ant-form .ant-form-item-explain-warning {\n      color: ${form.text.warning};\n    }\n\n    .ds-form.ant-form .ant-form-item-has-success .ant-form-item-explain,\n    .ds-form.ant-form .ant-form-item-has-success .ant-form-item-extra {\n      color: ${form.text.success};\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='compact'] .ant-form-item-label {\n      padding-bottom: 4px;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item {\n      padding: 10px 0;\n      border-bottom: ${form.border.width} solid ${form.border.color};\n      margin-bottom: 0 !important;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item:last-child {\n      padding-bottom: 0;\n      border-bottom: 0;\n      margin-bottom: 0 !important;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item:first-child {\n      padding-top: 0;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-row {\n      display: grid !important;\n      grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);\n      column-gap: 16px;\n      align-items: start;\n      min-height: 22px;\n      width: 100%;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-label {\n      flex: none !important;\n      max-width: none !important;\n      min-height: 22px;\n      padding: 0 !important;\n      text-align: left !important;\n      white-space: normal;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control {\n      flex: none !important;\n      min-width: 0;\n      min-height: 22px;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control-input {\n      min-height: 22px;\n      align-items: flex-start;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control-input-content {\n      min-height: 22px;\n      line-height: 22px;\n      color: ${form.text.label};\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-label > label {\n      display: inline-flex;\n      min-height: 22px;\n      align-items: flex-start;\n      color: ${form.text.description};\n      line-height: 22px;\n      white-space: normal;\n    }\n\n    @media (max-width: 640px) {\n      .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-row {\n        grid-template-columns: 1fr;\n        row-gap: 2px;\n      }\n    }\n  `;\n}\n\nfunction getVariantStyle(variant: DSFormVariant) {\n  const { form } = dsSemanticTokens;\n  const { input } = dsSemanticTokens;\n  const spacing = form.spacing[variant];\n  const controlSize = VARIANT_DEFAULTS[variant].size === 'small' ? 'small' : 'middle';\n  const controlTokens = input.padding[controlSize];\n\n  return {\n    '--ds-form-item-gap': spacing.itemGap,\n    '--ds-form-section-gap': spacing.sectionGap,\n    '--ds-form-shell-padding': spacing.shellPadding,\n    '--ds-form-control-height': input.height[controlSize],\n    '--ds-form-control-padding-x': controlTokens.x,\n    '--ds-form-control-padding-y': controlTokens.y,\n  } as CSSProperties;\n}\n\nexport const FormBase = <Values = any,>({\n  dsVariant = 'standard',\n  dsRequiredMark,\n  dsValidationSummary,\n  dsSectionTitle,\n  dsSectionDescription,\n  dsSectionActions,\n  className: userClassName = '',\n  rootClassName: userRootClassName = '',\n  style: userStyle = {},\n  children,\n  ...restProps\n}: FormProps<Values>) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = VARIANT_DEFAULTS[dsVariant];\n  const requiredMark = dsRequiredMark ? REQUIRED_MARK_MAP[dsRequiredMark] : defaults.requiredMark;\n  const className = `ds-form${userClassName ? ` ${userClassName}` : ''}`;\n  const rootClassName = `ds-form-root${userRootClassName ? ` ${userRootClassName}` : ''}`;\n  const variantStyle = getVariantStyle(dsVariant);\n  const hasSectionHeader = Boolean(dsSectionTitle || dsSectionDescription || dsSectionActions);\n\n  const form = (\n    <AntForm<Values>\n      {...restProps}\n      className={className}\n      rootClassName={rootClassName}\n      style={{ ...variantStyle, ...userStyle }}\n      layout={defaults.layout}\n      size={defaults.size}\n      requiredMark={requiredMark}\n      colon={defaults.colon}\n      variant=\"outlined\"\n      data-ds-form-variant={dsVariant}\n    >\n      {dsValidationSummary ? (\n        <div className=\"ds-form-summary\" role=\"alert\" aria-live=\"polite\">\n          {dsValidationSummary}\n        </div>\n      ) : null}\n      {children}\n    </AntForm>\n  );\n\n  if (!hasSectionHeader && (dsVariant === 'standard' || dsVariant === 'compact')) {\n    return form;\n  }\n\n  return (\n    <section\n      className=\"ds-form-shell\"\n      style={variantStyle}\n      data-ds-form-variant={dsVariant}\n    >\n      {hasSectionHeader ? (\n        <div className=\"ds-form-heading\">\n          <div className=\"ds-form-heading-copy\">\n            {dsSectionTitle ? <h3 className=\"ds-form-section-title\">{dsSectionTitle}</h3> : null}\n            {dsSectionDescription ? (\n              <p className=\"ds-form-section-description\">{dsSectionDescription}</p>\n            ) : null}\n          </div>\n          {dsSectionActions ? <div>{dsSectionActions}</div> : null}\n        </div>\n      ) : null}\n      {form}\n    </section>\n  );\n};\n\nFormBase.displayName = 'Form';\n\nexport const Form = Object.assign(FormBase, {\n  Item: AntForm.Item,\n  List: AntForm.List,\n  ErrorList: AntForm.ErrorList,\n  Provider: AntForm.Provider,\n  useForm: AntForm.useForm,\n  useFormInstance: AntForm.useFormInstance,\n  useWatch: AntForm.useWatch,\n}) as DSFormComponent;\n"],"mappings":"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"}

package/dist-lib/forms/Form.js

@@ -0,0 +1,357 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Form as t } from "antd";
+import { useEffect as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/ds/forms/Form.tsx
+var a = "ds-form-styles", o = {
+	standard: {
+		layout: "vertical",
+		size: "middle",
+		requiredMark: !0,
+		colon: !1
+	},
+	compact: {
+		layout: "vertical",
+		size: "small",
+		requiredMark: !0,
+		colon: !1
+	},
+	clinical: {
+		layout: "vertical",
+		size: "middle",
+		requiredMark: !0,
+		colon: !1
+	},
+	review: {
+		layout: "horizontal",
+		size: "middle",
+		requiredMark: !1,
+		colon: !1
+	},
+	wizardSection: {
+		layout: "vertical",
+		size: "middle",
+		requiredMark: "optional",
+		colon: !1
+	}
+}, s = {
+	asterisk: !0,
+	optional: "optional",
+	none: !1
+};
+function c() {
+	if (typeof document > "u") return;
+	let { form: t } = e, n = document.getElementById(a);
+	n || (n = document.createElement("style"), n.id = a, document.head.appendChild(n)), n.textContent = `
+    .ds-form-shell {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-form-section-gap);
+      padding: var(--ds-form-shell-padding);
+      border-radius: ${t.border.radius};
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-form-shell[data-ds-form-variant='clinical'] {
+      background: ${t.surface.clinical};
+      border: ${t.border.width} solid ${t.border.color};
+    }
+
+    .ds-form-shell[data-ds-form-variant='review'] {
+      background: ${t.surface.review};
+      border: ${t.border.width} solid ${t.border.color};
+    }
+
+    .ds-form-shell[data-ds-form-variant='wizardSection'] {
+      background: ${t.surface.background};
+      border: ${t.border.width} solid ${t.border.color};
+    }
+
+    .ds-form-heading {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+
+    .ds-form-heading-copy {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .ds-form-section-title {
+      color: ${t.text.sectionTitle};
+      font-size: ${t.typography.sectionTitle.fontSize};
+      font-weight: ${t.typography.sectionTitle.fontWeight};
+      line-height: ${t.typography.sectionTitle.lineHeight};
+      letter-spacing: 0;
+      margin: 0;
+    }
+
+    .ds-form-section-description {
+      color: ${t.text.description};
+      font-size: ${t.typography.sectionDescription.fontSize};
+      font-weight: ${t.typography.sectionDescription.fontWeight};
+      line-height: ${t.typography.sectionDescription.lineHeight};
+      letter-spacing: 0;
+      margin: 0;
+    }
+
+    .ds-form-summary {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 12px 14px;
+      background: ${t.surface.error};
+      border: ${t.border.width} solid ${t.text.error};
+      border-radius: ${t.border.radius};
+      color: ${t.text.error};
+      font-size: ${t.typography.help.fontSize};
+      font-weight: ${t.typography.help.fontWeight};
+      line-height: ${t.typography.help.lineHeight};
+    }
+
+    .ds-form.ant-form {
+      margin: 0;
+      color: ${t.text.label};
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-form.ant-form input.ds-input.ant-input,
+    .ds-form.ant-form .ds-input.ant-input-affix-wrapper,
+    .ds-form.ant-form .ds-input.ant-input-search,
+    .ds-form.ant-form .ds-input.ant-space-compact.ant-input-search,
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple),
+    .ds-form.ant-form .ds-input-number.ant-input-number,
+    .ds-form.ant-form .ds-input-number.ant-input-number-affix-wrapper,
+    .ds-form.ant-form .ds-date-picker.ant-picker,
+    .ds-form.ant-form .ds-time-picker.ant-picker {
+      height: var(--ds-form-control-height) !important;
+      min-height: var(--ds-form-control-height) !important;
+      border-radius: ${e.input.border.radius} !important;
+      box-sizing: border-box !important;
+    }
+
+    .ds-form.ant-form input.ds-input.ant-input,
+    .ds-form.ant-form .ds-input.ant-input-affix-wrapper {
+      padding: var(--ds-form-control-padding-y) var(--ds-form-control-padding-x) !important;
+    }
+
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple),
+    .ds-form.ant-form .ds-date-picker.ant-picker,
+    .ds-form.ant-form .ds-time-picker.ant-picker {
+      padding: 0 var(--ds-form-control-padding-x) !important;
+    }
+
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-content,
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-selection-item,
+    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-selection-placeholder {
+      height: 100% !important;
+      min-height: 0 !important;
+    }
+
+    .ds-form.ant-form .ant-form-item {
+      margin-bottom: var(--ds-form-item-gap);
+    }
+
+    .ds-form.ant-form .ant-form-item:last-child {
+      margin-bottom: 0;
+    }
+
+    .ds-form.ant-form .ant-form-item-label {
+      padding-bottom: 6px;
+    }
+
+    .ds-form.ant-form .ant-form-item-label > label {
+      color: ${t.text.label};
+      font-size: ${t.typography.label.fontSize};
+      font-weight: ${t.typography.label.fontWeight};
+      line-height: ${t.typography.label.lineHeight};
+      letter-spacing: 0;
+      height: auto;
+    }
+
+    .ds-form.ant-form .ant-form-item-label > label::after {
+      display: none;
+    }
+
+    .ds-form.ant-form .ant-form-item-required::before,
+    .ds-form.ant-form .ant-form-item-required-mark-optional::before {
+      color: ${t.text.required} !important;
+      font-family: 'Nunito', sans-serif;
+      font-weight: 700;
+    }
+
+    .ds-form.ant-form .ant-form-item-optional {
+      color: ${t.text.optional};
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 16px;
+      margin-inline-start: 6px;
+    }
+
+    .ds-form.ant-form .ant-form-item-explain,
+    .ds-form.ant-form .ant-form-item-extra {
+      font-size: ${t.typography.help.fontSize};
+      font-weight: ${t.typography.help.fontWeight};
+      line-height: ${t.typography.help.lineHeight};
+      letter-spacing: 0;
+      margin-top: 4px;
+    }
+
+    .ds-form.ant-form .ant-form-item-explain-error {
+      color: ${t.text.error};
+    }
+
+    .ds-form.ant-form .ant-form-item-explain-warning {
+      color: ${t.text.warning};
+    }
+
+    .ds-form.ant-form .ant-form-item-has-success .ant-form-item-explain,
+    .ds-form.ant-form .ant-form-item-has-success .ant-form-item-extra {
+      color: ${t.text.success};
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='compact'] .ant-form-item-label {
+      padding-bottom: 4px;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item {
+      padding: 10px 0;
+      border-bottom: ${t.border.width} solid ${t.border.color};
+      margin-bottom: 0 !important;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
+      margin-bottom: 0 !important;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item:first-child {
+      padding-top: 0;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-row {
+      display: grid !important;
+      grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
+      column-gap: 16px;
+      align-items: start;
+      min-height: 22px;
+      width: 100%;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-label {
+      flex: none !important;
+      max-width: none !important;
+      min-height: 22px;
+      padding: 0 !important;
+      text-align: left !important;
+      white-space: normal;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control {
+      flex: none !important;
+      min-width: 0;
+      min-height: 22px;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control-input {
+      min-height: 22px;
+      align-items: flex-start;
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control-input-content {
+      min-height: 22px;
+      line-height: 22px;
+      color: ${t.text.label};
+    }
+
+    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-label > label {
+      display: inline-flex;
+      min-height: 22px;
+      align-items: flex-start;
+      color: ${t.text.description};
+      line-height: 22px;
+      white-space: normal;
+    }
+
+    @media (max-width: 640px) {
+      .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-row {
+        grid-template-columns: 1fr;
+        row-gap: 2px;
+      }
+    }
+  `;
+}
+function l(t) {
+	let { form: n } = e, { input: r } = e, i = n.spacing[t], a = o[t].size === "small" ? "small" : "middle", s = r.padding[a];
+	return {
+		"--ds-form-item-gap": i.itemGap,
+		"--ds-form-section-gap": i.sectionGap,
+		"--ds-form-shell-padding": i.shellPadding,
+		"--ds-form-control-height": r.height[a],
+		"--ds-form-control-padding-x": s.x,
+		"--ds-form-control-padding-y": s.y
+	};
+}
+var u = ({ dsVariant: e = "standard", dsRequiredMark: a, dsValidationSummary: u, dsSectionTitle: d, dsSectionDescription: f, dsSectionActions: p, className: m = "", rootClassName: h = "", style: g = {}, children: _, ...v }) => {
+	n(() => {
+		c();
+	}, []);
+	let y = o[e], b = a ? s[a] : y.requiredMark, x = `ds-form${m ? ` ${m}` : ""}`, S = `ds-form-root${h ? ` ${h}` : ""}`, C = l(e), w = !!(d || f || p), T = /* @__PURE__ */ i(t, {
+		...v,
+		className: x,
+		rootClassName: S,
+		style: {
+			...C,
+			...g
+		},
+		layout: y.layout,
+		size: y.size,
+		requiredMark: b,
+		colon: y.colon,
+		variant: "outlined",
+		"data-ds-form-variant": e,
+		children: [u ? /* @__PURE__ */ r("div", {
+			className: "ds-form-summary",
+			role: "alert",
+			"aria-live": "polite",
+			children: u
+		}) : null, _]
+	});
+	return !w && (e === "standard" || e === "compact") ? T : /* @__PURE__ */ i("section", {
+		className: "ds-form-shell",
+		style: C,
+		"data-ds-form-variant": e,
+		children: [w ? /* @__PURE__ */ i("div", {
+			className: "ds-form-heading",
+			children: [/* @__PURE__ */ i("div", {
+				className: "ds-form-heading-copy",
+				children: [d ? /* @__PURE__ */ r("h3", {
+					className: "ds-form-section-title",
+					children: d
+				}) : null, f ? /* @__PURE__ */ r("p", {
+					className: "ds-form-section-description",
+					children: f
+				}) : null]
+			}), p ? /* @__PURE__ */ r("div", { children: p }) : null]
+		}) : null, T]
+	});
+};
+u.displayName = "Form";
+var d = Object.assign(u, {
+	Item: t.Item,
+	List: t.List,
+	ErrorList: t.ErrorList,
+	Provider: t.Provider,
+	useForm: t.useForm,
+	useFormInstance: t.useFormInstance,
+	useWatch: t.useWatch
+});
+//#endregion
+export { d as Form, u as FormBase };
+
+//# sourceMappingURL=Form.js.map

package/dist-lib/forms/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","names":[],"sources":["../../src/ds/forms/Form.tsx"],"sourcesContent":["import { Form as AntForm } from 'antd';\nimport type { FormProps as AntFormProps } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSFormVariant = 'standard' | 'compact' | 'clinical' | 'review' | 'wizardSection';\nexport type DSFormRequiredMark = 'asterisk' | 'optional' | 'none';\n\nexport type FormProps<Values = any> = Omit<\n  AntFormProps<Values>,\n  'layout' | 'requiredMark' | 'colon' | 'size' | 'variant'\n> & {\n  /** DS form workflow variant. */\n  dsVariant?: DSFormVariant;\n  /** DS required marker treatment. */\n  dsRequiredMark?: DSFormRequiredMark;\n  /** Optional form-level validation summary shown before fields. */\n  dsValidationSummary?: ReactNode;\n  /** Optional section title for clinical, review, or wizard form sections. */\n  dsSectionTitle?: ReactNode;\n  /** Optional section description displayed below the section title. */\n  dsSectionDescription?: ReactNode;\n  /** Optional action slot aligned with the section title. */\n  dsSectionActions?: ReactNode;\n};\n\ntype VariantDefaults = {\n  layout: NonNullable<AntFormProps['layout']>;\n  size: NonNullable<AntFormProps['size']>;\n  requiredMark: AntFormProps['requiredMark'];\n  colon: boolean;\n};\n\ntype DSFormComponent = (<Values = any>(props: FormProps<Values>) => ReactNode) & {\n  Item: typeof AntForm.Item;\n  List: typeof AntForm.List;\n  ErrorList: typeof AntForm.ErrorList;\n  Provider: typeof AntForm.Provider;\n  useForm: typeof AntForm.useForm;\n  useFormInstance: typeof AntForm.useFormInstance;\n  useWatch: typeof AntForm.useWatch;\n};\n\nconst STYLE_ID = 'ds-form-styles';\n\nconst VARIANT_DEFAULTS: Record<DSFormVariant, VariantDefaults> = {\n  standard: {\n    layout: 'vertical',\n    size: 'middle',\n    requiredMark: true,\n    colon: false,\n  },\n  compact: {\n    layout: 'vertical',\n    size: 'small',\n    requiredMark: true,\n    colon: false,\n  },\n  clinical: {\n    layout: 'vertical',\n    size: 'middle',\n    requiredMark: true,\n    colon: false,\n  },\n  review: {\n    layout: 'horizontal',\n    size: 'middle',\n    requiredMark: false,\n    colon: false,\n  },\n  wizardSection: {\n    layout: 'vertical',\n    size: 'middle',\n    requiredMark: 'optional',\n    colon: false,\n  },\n};\n\nconst REQUIRED_MARK_MAP: Record<DSFormRequiredMark, AntFormProps['requiredMark']> = {\n  asterisk: true,\n  optional: 'optional',\n  none: false,\n};\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { form } = dsSemanticTokens;\n\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-form-shell {\n      display: flex;\n      flex-direction: column;\n      gap: var(--ds-form-section-gap);\n      padding: var(--ds-form-shell-padding);\n      border-radius: ${form.border.radius};\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-form-shell[data-ds-form-variant='clinical'] {\n      background: ${form.surface.clinical};\n      border: ${form.border.width} solid ${form.border.color};\n    }\n\n    .ds-form-shell[data-ds-form-variant='review'] {\n      background: ${form.surface.review};\n      border: ${form.border.width} solid ${form.border.color};\n    }\n\n    .ds-form-shell[data-ds-form-variant='wizardSection'] {\n      background: ${form.surface.background};\n      border: ${form.border.width} solid ${form.border.color};\n    }\n\n    .ds-form-heading {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .ds-form-heading-copy {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n\n    .ds-form-section-title {\n      color: ${form.text.sectionTitle};\n      font-size: ${form.typography.sectionTitle.fontSize};\n      font-weight: ${form.typography.sectionTitle.fontWeight};\n      line-height: ${form.typography.sectionTitle.lineHeight};\n      letter-spacing: 0;\n      margin: 0;\n    }\n\n    .ds-form-section-description {\n      color: ${form.text.description};\n      font-size: ${form.typography.sectionDescription.fontSize};\n      font-weight: ${form.typography.sectionDescription.fontWeight};\n      line-height: ${form.typography.sectionDescription.lineHeight};\n      letter-spacing: 0;\n      margin: 0;\n    }\n\n    .ds-form-summary {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      padding: 12px 14px;\n      background: ${form.surface.error};\n      border: ${form.border.width} solid ${form.text.error};\n      border-radius: ${form.border.radius};\n      color: ${form.text.error};\n      font-size: ${form.typography.help.fontSize};\n      font-weight: ${form.typography.help.fontWeight};\n      line-height: ${form.typography.help.lineHeight};\n    }\n\n    .ds-form.ant-form {\n      margin: 0;\n      color: ${form.text.label};\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-form.ant-form input.ds-input.ant-input,\n    .ds-form.ant-form .ds-input.ant-input-affix-wrapper,\n    .ds-form.ant-form .ds-input.ant-input-search,\n    .ds-form.ant-form .ds-input.ant-space-compact.ant-input-search,\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple),\n    .ds-form.ant-form .ds-input-number.ant-input-number,\n    .ds-form.ant-form .ds-input-number.ant-input-number-affix-wrapper,\n    .ds-form.ant-form .ds-date-picker.ant-picker,\n    .ds-form.ant-form .ds-time-picker.ant-picker {\n      height: var(--ds-form-control-height) !important;\n      min-height: var(--ds-form-control-height) !important;\n      border-radius: ${dsSemanticTokens.input.border.radius} !important;\n      box-sizing: border-box !important;\n    }\n\n    .ds-form.ant-form input.ds-input.ant-input,\n    .ds-form.ant-form .ds-input.ant-input-affix-wrapper {\n      padding: var(--ds-form-control-padding-y) var(--ds-form-control-padding-x) !important;\n    }\n\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple),\n    .ds-form.ant-form .ds-date-picker.ant-picker,\n    .ds-form.ant-form .ds-time-picker.ant-picker {\n      padding: 0 var(--ds-form-control-padding-x) !important;\n    }\n\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-content,\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-selection-item,\n    .ds-form.ant-form .ds-select.ant-select:not(.ant-select-multiple) .ant-select-selection-placeholder {\n      height: 100% !important;\n      min-height: 0 !important;\n    }\n\n    .ds-form.ant-form .ant-form-item {\n      margin-bottom: var(--ds-form-item-gap);\n    }\n\n    .ds-form.ant-form .ant-form-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .ds-form.ant-form .ant-form-item-label {\n      padding-bottom: 6px;\n    }\n\n    .ds-form.ant-form .ant-form-item-label > label {\n      color: ${form.text.label};\n      font-size: ${form.typography.label.fontSize};\n      font-weight: ${form.typography.label.fontWeight};\n      line-height: ${form.typography.label.lineHeight};\n      letter-spacing: 0;\n      height: auto;\n    }\n\n    .ds-form.ant-form .ant-form-item-label > label::after {\n      display: none;\n    }\n\n    .ds-form.ant-form .ant-form-item-required::before,\n    .ds-form.ant-form .ant-form-item-required-mark-optional::before {\n      color: ${form.text.required} !important;\n      font-family: 'Nunito', sans-serif;\n      font-weight: 700;\n    }\n\n    .ds-form.ant-form .ant-form-item-optional {\n      color: ${form.text.optional};\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 16px;\n      margin-inline-start: 6px;\n    }\n\n    .ds-form.ant-form .ant-form-item-explain,\n    .ds-form.ant-form .ant-form-item-extra {\n      font-size: ${form.typography.help.fontSize};\n      font-weight: ${form.typography.help.fontWeight};\n      line-height: ${form.typography.help.lineHeight};\n      letter-spacing: 0;\n      margin-top: 4px;\n    }\n\n    .ds-form.ant-form .ant-form-item-explain-error {\n      color: ${form.text.error};\n    }\n\n    .ds-form.ant-form .ant-form-item-explain-warning {\n      color: ${form.text.warning};\n    }\n\n    .ds-form.ant-form .ant-form-item-has-success .ant-form-item-explain,\n    .ds-form.ant-form .ant-form-item-has-success .ant-form-item-extra {\n      color: ${form.text.success};\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='compact'] .ant-form-item-label {\n      padding-bottom: 4px;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item {\n      padding: 10px 0;\n      border-bottom: ${form.border.width} solid ${form.border.color};\n      margin-bottom: 0 !important;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item:last-child {\n      padding-bottom: 0;\n      border-bottom: 0;\n      margin-bottom: 0 !important;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item:first-child {\n      padding-top: 0;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-row {\n      display: grid !important;\n      grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);\n      column-gap: 16px;\n      align-items: start;\n      min-height: 22px;\n      width: 100%;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-label {\n      flex: none !important;\n      max-width: none !important;\n      min-height: 22px;\n      padding: 0 !important;\n      text-align: left !important;\n      white-space: normal;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control {\n      flex: none !important;\n      min-width: 0;\n      min-height: 22px;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control-input {\n      min-height: 22px;\n      align-items: flex-start;\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-control-input-content {\n      min-height: 22px;\n      line-height: 22px;\n      color: ${form.text.label};\n    }\n\n    .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-label > label {\n      display: inline-flex;\n      min-height: 22px;\n      align-items: flex-start;\n      color: ${form.text.description};\n      line-height: 22px;\n      white-space: normal;\n    }\n\n    @media (max-width: 640px) {\n      .ds-form.ant-form[data-ds-form-variant='review'] .ant-form-item-row {\n        grid-template-columns: 1fr;\n        row-gap: 2px;\n      }\n    }\n  `;\n}\n\nfunction getVariantStyle(variant: DSFormVariant) {\n  const { form } = dsSemanticTokens;\n  const { input } = dsSemanticTokens;\n  const spacing = form.spacing[variant];\n  const controlSize = VARIANT_DEFAULTS[variant].size === 'small' ? 'small' : 'middle';\n  const controlTokens = input.padding[controlSize];\n\n  return {\n    '--ds-form-item-gap': spacing.itemGap,\n    '--ds-form-section-gap': spacing.sectionGap,\n    '--ds-form-shell-padding': spacing.shellPadding,\n    '--ds-form-control-height': input.height[controlSize],\n    '--ds-form-control-padding-x': controlTokens.x,\n    '--ds-form-control-padding-y': controlTokens.y,\n  } as CSSProperties;\n}\n\nexport const FormBase = <Values = any,>({\n  dsVariant = 'standard',\n  dsRequiredMark,\n  dsValidationSummary,\n  dsSectionTitle,\n  dsSectionDescription,\n  dsSectionActions,\n  className: userClassName = '',\n  rootClassName: userRootClassName = '',\n  style: userStyle = {},\n  children,\n  ...restProps\n}: FormProps<Values>) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = VARIANT_DEFAULTS[dsVariant];\n  const requiredMark = dsRequiredMark ? REQUIRED_MARK_MAP[dsRequiredMark] : defaults.requiredMark;\n  const className = `ds-form${userClassName ? ` ${userClassName}` : ''}`;\n  const rootClassName = `ds-form-root${userRootClassName ? ` ${userRootClassName}` : ''}`;\n  const variantStyle = getVariantStyle(dsVariant);\n  const hasSectionHeader = Boolean(dsSectionTitle || dsSectionDescription || dsSectionActions);\n\n  const form = (\n    <AntForm<Values>\n      {...restProps}\n      className={className}\n      rootClassName={rootClassName}\n      style={{ ...variantStyle, ...userStyle }}\n      layout={defaults.layout}\n      size={defaults.size}\n      requiredMark={requiredMark}\n      colon={defaults.colon}\n      variant=\"outlined\"\n      data-ds-form-variant={dsVariant}\n    >\n      {dsValidationSummary ? (\n        <div className=\"ds-form-summary\" role=\"alert\" aria-live=\"polite\">\n          {dsValidationSummary}\n        </div>\n      ) : null}\n      {children}\n    </AntForm>\n  );\n\n  if (!hasSectionHeader && (dsVariant === 'standard' || dsVariant === 'compact')) {\n    return form;\n  }\n\n  return (\n    <section\n      className=\"ds-form-shell\"\n      style={variantStyle}\n      data-ds-form-variant={dsVariant}\n    >\n      {hasSectionHeader ? (\n        <div className=\"ds-form-heading\">\n          <div className=\"ds-form-heading-copy\">\n            {dsSectionTitle ? <h3 className=\"ds-form-section-title\">{dsSectionTitle}</h3> : null}\n            {dsSectionDescription ? (\n              <p className=\"ds-form-section-description\">{dsSectionDescription}</p>\n            ) : null}\n          </div>\n          {dsSectionActions ? <div>{dsSectionActions}</div> : null}\n        </div>\n      ) : null}\n      {form}\n    </section>\n  );\n};\n\nFormBase.displayName = 'Form';\n\nexport const Form = Object.assign(FormBase, {\n  Item: AntForm.Item,\n  List: AntForm.List,\n  ErrorList: AntForm.ErrorList,\n  Provider: AntForm.Provider,\n  useForm: AntForm.useForm,\n  useFormInstance: AntForm.useFormInstance,\n  useWatch: AntForm.useWatch,\n}) as DSFormComponent;\n"],"mappings":"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"}