@spscommerce/ds-react 6.18.0 → 6.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/index.cjs.js +685 -629
  2. package/lib/index.es.js +368 -280
  3. package/package.json +9 -9
package/lib/index.es.js CHANGED
@@ -21761,9 +21761,9 @@ Object.assign(SpsDt, {
21761
21761
  const SpsDescriptionListExamples = {
21762
21762
  general: {
21763
21763
  label: "General Usage",
21764
- description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, "Description Lists should be used to group a series of related terms (and their accompanying descriptions) together in a tabular-like format."), /* @__PURE__ */ React__default.createElement("p", null, "Note: Description Lists are not the required pattern for listing terms and descriptions, but should be used when it benefits the legibility of the content over other typographic formats such as unordered lists or tables."), /* @__PURE__ */ React__default.createElement("h4", null, "Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
21764
+ description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, "Description Lists should be used to group a series of related terms (and their accompanying descriptions) together in a tabular-like format."), /* @__PURE__ */ React__default.createElement("p", null, "Note: Description Lists are not the required pattern for listing terms and descriptions, but should be used when it benefits the legibility of the content over other typographic formats such as unordered lists or tables."), /* @__PURE__ */ React__default.createElement("h5", null, "Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
21765
21765
  className: "mb-2"
21766
- }, "To display two or more terms that have accompanying descriptions or values.")), /* @__PURE__ */ React__default.createElement("h4", null, "Do Not Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
21766
+ }, "To display two or more terms that have accompanying descriptions or values.")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
21767
21767
  className: "mb-2"
21768
21768
  }, "To display a single term"), /* @__PURE__ */ React__default.createElement("li", {
21769
21769
  className: "mb-2"
@@ -21773,88 +21773,104 @@ const SpsDescriptionListExamples = {
21773
21773
  label: "Basic Description Lists",
21774
21774
  description: () => /* @__PURE__ */ React__default.createElement("p", null, "Description Lists are available in two sizes. Additionally, the left column can be set to one of three different width options to best accomodate the content in each specific use case."),
21775
21775
  examples: {
21776
- standard: {
21777
- description: "Standard Size Description Lists",
21776
+ oneToThree: {
21777
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-3"),
21778
+ react: code`
21779
+ function DemoComponent() {
21780
+ return (
21781
+ <SpsDl>
21782
+ <SpsDt>Term 1</SpsDt>
21783
+ <SpsDd>Description 1</SpsDd>
21784
+ <SpsDt>Term 2</SpsDt>
21785
+ <SpsDd>Description 2</SpsDd>
21786
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21787
+ <SpsDd>Description 3</SpsDd>
21788
+ </SpsDl>
21789
+ )
21790
+ }
21791
+ `
21792
+ },
21793
+ oneToTwo: {
21794
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-2"),
21795
+ react: code`
21796
+ function DemoComponent() {
21797
+ return (
21798
+ <SpsDl wideTerms>
21799
+ <SpsDt>Term 1</SpsDt>
21800
+ <SpsDd>Description 1</SpsDd>
21801
+ <SpsDt>Term 2</SpsDt>
21802
+ <SpsDd>Description 2</SpsDd>
21803
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21804
+ <SpsDd>Description 3</SpsDd>
21805
+ </SpsDl>
21806
+ )
21807
+ }
21808
+ `
21809
+ },
21810
+ oneToOne: {
21811
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-1"),
21812
+ react: code`
21813
+ function DemoComponent() {
21814
+ return (
21815
+ <SpsDl widerTerms>
21816
+ <SpsDt>Term 1</SpsDt>
21817
+ <SpsDd>Description 1</SpsDd>
21818
+ <SpsDt>Term 2</SpsDt>
21819
+ <SpsDd>Description 2</SpsDd>
21820
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21821
+ <SpsDd>Description 3</SpsDd>
21822
+ </SpsDl>
21823
+ )
21824
+ }
21825
+ `
21826
+ },
21827
+ compactOneToThree: {
21828
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-3"),
21829
+ react: code`
21830
+ function DemoComponent() {
21831
+ return (
21832
+ <SpsDl compact>
21833
+ <SpsDt>Term 1</SpsDt>
21834
+ <SpsDd>Description 1</SpsDd>
21835
+ <SpsDt>Term 2</SpsDt>
21836
+ <SpsDd>Description 2</SpsDd>
21837
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21838
+ <SpsDd>Description 3</SpsDd>
21839
+ </SpsDl>
21840
+ )
21841
+ }
21842
+ `
21843
+ },
21844
+ compactOneToTwo: {
21845
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-2"),
21778
21846
  react: code`
21779
21847
  function DemoComponent() {
21780
21848
  return (
21781
- <SpsCardV2>
21782
- <SpsTabsV2>
21783
- <Item key="1-to-3" title="1-to-3">
21784
- <SpsDl>
21785
- <SpsDt>Term 1</SpsDt>
21786
- <SpsDd>Description 1</SpsDd>
21787
- <SpsDt>Term 2</SpsDt>
21788
- <SpsDd>Description 2</SpsDd>
21789
- <SpsDt help="This is the third term">Term 3</SpsDt>
21790
- <SpsDd>Description 3</SpsDd>
21791
- </SpsDl>
21792
- </Item>
21793
- <Item key="1-to-2" title="1-to-2">
21794
- <SpsDl wideTerms>
21795
- <SpsDt>Term 1</SpsDt>
21796
- <SpsDd>Description 1</SpsDd>
21797
- <SpsDt>Term 2</SpsDt>
21798
- <SpsDd>Description 2</SpsDd>
21799
- <SpsDt help="This is the third term">Term 3</SpsDt>
21800
- <SpsDd>Description 3</SpsDd>
21801
- </SpsDl>
21802
- </Item>
21803
- <Item key="1-to-1" title="1-to-1">
21804
- <SpsDl widerTerms>
21805
- <SpsDt>Term 1</SpsDt>
21806
- <SpsDd>Description 1</SpsDd>
21807
- <SpsDt>Term 2</SpsDt>
21808
- <SpsDd>Description 2</SpsDd>
21809
- <SpsDt help="This is the third term">Term 3</SpsDt>
21810
- <SpsDd>Description 3</SpsDd>
21811
- </SpsDl>
21812
- </Item>
21813
- </SpsTabsV2>
21814
- </SpsCardV2>
21849
+ <SpsDl compact wideTerms>
21850
+ <SpsDt>Term 1</SpsDt>
21851
+ <SpsDd>Description 1</SpsDd>
21852
+ <SpsDt>Term 2</SpsDt>
21853
+ <SpsDd>Description 2</SpsDd>
21854
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21855
+ <SpsDd>Description 3</SpsDd>
21856
+ </SpsDl>
21815
21857
  )
21816
21858
  }
21817
21859
  `
21818
21860
  },
21819
- compact: {
21820
- description: "Compact Description Lists",
21861
+ compactOneToOne: {
21862
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-1"),
21821
21863
  react: code`
21822
21864
  function DemoComponent() {
21823
21865
  return (
21824
- <SpsCardV2>
21825
- <SpsTabsV2>
21826
- <Item key="1-to-3" title="1-to-3">
21827
- <SpsDl compact>
21828
- <SpsDt>Term 1</SpsDt>
21829
- <SpsDd>Description 1</SpsDd>
21830
- <SpsDt>Term 2</SpsDt>
21831
- <SpsDd>Description 2</SpsDd>
21832
- <SpsDt help="This is the third term">Term 3</SpsDt>
21833
- <SpsDd>Description 3</SpsDd>
21834
- </SpsDl>
21835
- </Item>
21836
- <Item key="1-to-2" title="1-to-2">
21837
- <SpsDl compact wideTerms>
21838
- <SpsDt>Term 1</SpsDt>
21839
- <SpsDd>Description 1</SpsDd>
21840
- <SpsDt>Term 2</SpsDt>
21841
- <SpsDd>Description 2</SpsDd>
21842
- <SpsDt help="This is the third term">Term 3</SpsDt>
21843
- <SpsDd>Description 3</SpsDd>
21844
- </SpsDl>
21845
- </Item>
21846
- <Item key="1-to-1" title="1-to-1">
21847
- <SpsDl compact widerTerms>
21848
- <SpsDt>Term 1</SpsDt>
21849
- <SpsDd>Description 1</SpsDd>
21850
- <SpsDt>Term 2</SpsDt>
21851
- <SpsDd>Description 2</SpsDd>
21852
- <SpsDt help="This is the third term">Term 3</SpsDt>
21853
- <SpsDd>Description 3</SpsDd>
21854
- </SpsDl>
21855
- </Item>
21856
- </SpsTabsV2>
21857
- </SpsCardV2>
21866
+ <SpsDl compact widerTerms>
21867
+ <SpsDt>Term 1</SpsDt>
21868
+ <SpsDd>Description 1</SpsDd>
21869
+ <SpsDt>Term 2</SpsDt>
21870
+ <SpsDd>Description 2</SpsDd>
21871
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21872
+ <SpsDd>Description 3</SpsDd>
21873
+ </SpsDl>
21858
21874
  )
21859
21875
  }
21860
21876
  `
@@ -21867,8 +21883,8 @@ const SpsDescriptionListExamples = {
21867
21883
  to: "form"
21868
21884
  }, "Forms"), " page for more information regarding Form rules."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("i", null, "Note: Description Lists with Input Fields should only be utilized when it benefits the usability of a form, and should not be used adjacent to forms that are not in Description Lists."))),
21869
21885
  examples: {
21870
- standard: {
21871
- description: "Standard Size Description Lists with Input Fields",
21886
+ oneToThree: {
21887
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-3"),
21872
21888
  react: code`
21873
21889
  function DemoComponent() {
21874
21890
  const { formValue, formMeta, updateForm } = useSpsForm({
@@ -21886,113 +21902,46 @@ const SpsDescriptionListExamples = {
21886
21902
  }, []);
21887
21903
 
21888
21904
  return (
21889
- <SpsCardV2>
21890
- <SpsTabsV2>
21891
- <Item key="1-to-3" title="1-to-3">
21892
- <SpsForm formMeta={formMeta}>
21893
- <SpsDl>
21894
- <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
21895
- <SpsDd>
21896
- <SpsTextInput
21897
- value={formValue.term1}
21898
- formMeta={formMeta.fields.term1}
21899
- placeholder="Description"
21900
- />
21901
- </SpsDd>
21902
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21903
- <SpsDd>
21904
- <SpsTextInput
21905
- value={formValue.term2}
21906
- formMeta={formMeta.fields.term2}
21907
- placeholder="Description"
21908
- />
21909
- </SpsDd>
21910
- <SpsDt
21911
- id="accomplishmentsLabel"
21912
- labelFor={formMeta.fields.term3}
21913
- help="Enter a description"
21914
- >
21915
- Term3
21916
- </SpsDt>
21917
- <SpsDd>
21918
- <SpsTextInput
21919
- value={formValue.term3}
21920
- formMeta={formMeta.fields.term3}
21921
- placeholder="Description"
21922
- />
21923
- </SpsDd>
21924
- </SpsDl>
21925
- </SpsForm>
21926
- </Item>
21927
- <Item key="1-to-2" title="1-to-2">
21928
- <SpsForm formMeta={formMeta}>
21929
- <SpsDl wideTerms>
21930
- <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
21931
- <SpsDd>
21932
- <SpsTextInput
21933
- value={formValue.term1}
21934
- formMeta={formMeta.fields.term1}
21935
- placeholder="Description"
21936
- />
21937
- </SpsDd>
21938
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21939
- <SpsDd>
21940
- <SpsTextInput
21941
- value={formValue.term2}
21942
- formMeta={formMeta.fields.term2}
21943
- placeholder="Description"
21944
- />
21945
- </SpsDd>
21946
- <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
21947
- >Term 3</SpsDt>
21948
- <SpsDd>
21949
- <SpsTextInput
21950
- value={formValue.term3}
21951
- formMeta={formMeta.fields.term3}
21952
- placeholder="Description"
21953
- />
21954
- </SpsDd>
21955
- </SpsDl>
21956
- </SpsForm>
21957
- </Item>
21958
- <Item key="1-to-1" title="1-to-1">
21959
- <SpsForm formMeta={formMeta}>
21960
- <SpsDl widerTerms>
21961
- <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
21962
- <SpsDd>
21963
- <SpsTextInput
21964
- value={formValue.term1}
21965
- formMeta={formMeta.fields.term1}
21966
- placeholder="Description"
21967
- />
21968
- </SpsDd>
21969
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21970
- <SpsDd>
21971
- <SpsTextInput
21972
- value={formValue.term2}
21973
- formMeta={formMeta.fields.term2}
21974
- placeholder="Description"
21975
- />
21976
- </SpsDd>
21977
- <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
21978
- <SpsDd>
21979
- <SpsTextInput
21980
- value={formValue.term3}
21981
- formMeta={formMeta.fields.term3}
21982
- placeholder="Description"
21983
- />
21984
- </SpsDd>
21985
- </SpsDl>
21986
- </SpsForm>
21987
- </Item>
21988
- </SpsTabsV2>
21989
- </SpsCardV2>
21905
+ <SpsForm formMeta={formMeta}>
21906
+ <SpsDl>
21907
+ <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
21908
+ <SpsDd>
21909
+ <SpsTextInput
21910
+ value={formValue.term1}
21911
+ formMeta={formMeta.fields.term1}
21912
+ placeholder="Description"
21913
+ />
21914
+ </SpsDd>
21915
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21916
+ <SpsDd>
21917
+ <SpsTextInput
21918
+ value={formValue.term2}
21919
+ formMeta={formMeta.fields.term2}
21920
+ placeholder="Description"
21921
+ />
21922
+ </SpsDd>
21923
+ <SpsDt
21924
+ id="accomplishmentsLabel"
21925
+ labelFor={formMeta.fields.term3}
21926
+ help="Enter a description"
21927
+ >
21928
+ Term3
21929
+ </SpsDt>
21930
+ <SpsDd>
21931
+ <SpsTextInput
21932
+ value={formValue.term3}
21933
+ formMeta={formMeta.fields.term3}
21934
+ placeholder="Description"
21935
+ />
21936
+ </SpsDd>
21937
+ </SpsDl>
21938
+ </SpsForm>
21990
21939
  )
21991
21940
  }
21992
21941
  `
21993
21942
  },
21994
- compact: {
21995
- description: "Compact Description Lists with Input Fields",
21943
+ oneToTwo: {
21944
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-2"),
21996
21945
  react: code`
21997
21946
  function DemoComponent() {
21998
21947
  const { formValue, formMeta, updateForm } = useSpsForm({
@@ -22010,107 +21959,246 @@ const SpsDescriptionListExamples = {
22010
21959
  }, []);
22011
21960
 
22012
21961
  return (
22013
- <SpsCardV2>
22014
- <SpsTabsV2>
22015
- <Item key="1-to-3" title="1-to-3">
22016
- <SpsForm formMeta={formMeta}>
22017
- <SpsDl compact>
22018
- <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
22019
- <SpsDd>
22020
- <SpsTextInput
22021
- value={formValue.term1}
22022
- formMeta={formMeta.fields.term1}
22023
- placeholder="Description"
22024
- />
22025
- </SpsDd>
22026
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22027
- <SpsDd>
22028
- <SpsTextInput
22029
- value={formValue.term2}
22030
- formMeta={formMeta.fields.term2}
22031
- placeholder="Description"
22032
- />
22033
- </SpsDd>
22034
- <SpsDt
22035
- id="accomplishmentsLabel"
22036
- labelFor={formMeta.fields.term3}
22037
- help="Enter a description"
22038
- >
22039
- Term3
22040
- </SpsDt>
22041
- <SpsDd>
22042
- <SpsTextInput
22043
- value={formValue.term3}
22044
- formMeta={formMeta.fields.term3}
22045
- placeholder="Description"
22046
- />
22047
- </SpsDd>
22048
- </SpsDl>
22049
- </SpsForm>
22050
- </Item>
22051
- <Item key="1-to-2" title="1-to-2">
22052
- <SpsForm formMeta={formMeta}>
22053
- <SpsDl wideTerms compact>
22054
- <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22055
- <SpsDd>
22056
- <SpsTextInput
22057
- value={formValue.term1}
22058
- formMeta={formMeta.fields.term1}
22059
- placeholder="Description"
22060
- />
22061
- </SpsDd>
22062
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22063
- <SpsDd>
22064
- <SpsTextInput
22065
- value={formValue.term2}
22066
- formMeta={formMeta.fields.term2}
22067
- placeholder="Description"
22068
- />
22069
- </SpsDd>
22070
- <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
22071
- >Term 3</SpsDt>
22072
- <SpsDd>
22073
- <SpsTextInput
22074
- value={formValue.term3}
22075
- formMeta={formMeta.fields.term3}
22076
- placeholder="Description"
22077
- />
22078
- </SpsDd>
22079
- </SpsDl>
22080
- </SpsForm>
22081
- </Item>
22082
- <Item key="1-to-1" title="1-to-1">
22083
- <SpsForm formMeta={formMeta}>
22084
- <SpsDl widerTerms compact>
22085
- <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22086
- <SpsDd>
22087
- <SpsTextInput
22088
- value={formValue.term1}
22089
- formMeta={formMeta.fields.term1}
22090
- placeholder="Description"
22091
- />
22092
- </SpsDd>
22093
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22094
- <SpsDd>
22095
- <SpsTextInput
22096
- value={formValue.term2}
22097
- formMeta={formMeta.fields.term2}
22098
- placeholder="Description"
22099
- />
22100
- </SpsDd>
22101
- <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
22102
- <SpsDd>
22103
- <SpsTextInput
22104
- value={formValue.term3}
22105
- formMeta={formMeta.fields.term3}
22106
- placeholder="Description"
22107
- />
22108
- </SpsDd>
22109
- </SpsDl>
22110
- </SpsForm>
22111
- </Item>
22112
- </SpsTabsV2>
22113
- </SpsCardV2>
21962
+ <SpsForm formMeta={formMeta}>
21963
+ <SpsDl wideTerms>
21964
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
21965
+ <SpsDd>
21966
+ <SpsTextInput
21967
+ value={formValue.term1}
21968
+ formMeta={formMeta.fields.term1}
21969
+ placeholder="Description"
21970
+ />
21971
+ </SpsDd>
21972
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21973
+ <SpsDd>
21974
+ <SpsTextInput
21975
+ value={formValue.term2}
21976
+ formMeta={formMeta.fields.term2}
21977
+ placeholder="Description"
21978
+ />
21979
+ </SpsDd>
21980
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
21981
+ >Term 3</SpsDt>
21982
+ <SpsDd>
21983
+ <SpsTextInput
21984
+ value={formValue.term3}
21985
+ formMeta={formMeta.fields.term3}
21986
+ placeholder="Description"
21987
+ />
21988
+ </SpsDd>
21989
+ </SpsDl>
21990
+ </SpsForm>
21991
+ )
21992
+ }
21993
+ `
21994
+ },
21995
+ oneToOne: {
21996
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-1"),
21997
+ react: code`
21998
+ function DemoComponent() {
21999
+ const { formValue, formMeta, updateForm } = useSpsForm({
22000
+ term1: "",
22001
+ term2: "",
22002
+ term3: "",
22003
+ }, {
22004
+ "term1": [SpsValidators.required],
22005
+ "term2": [SpsValidators.minLength(1)],
22006
+ })
22007
+
22008
+ React.useEffect(() => {
22009
+ // Make the error state visible for this demo
22010
+ formMeta.fields.term2.markAsDirty();
22011
+ }, []);
22012
+
22013
+ return (
22014
+ <SpsForm formMeta={formMeta}>
22015
+ <SpsDl widerTerms>
22016
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22017
+ <SpsDd>
22018
+ <SpsTextInput
22019
+ value={formValue.term1}
22020
+ formMeta={formMeta.fields.term1}
22021
+ placeholder="Description"
22022
+ />
22023
+ </SpsDd>
22024
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22025
+ <SpsDd>
22026
+ <SpsTextInput
22027
+ value={formValue.term2}
22028
+ formMeta={formMeta.fields.term2}
22029
+ placeholder="Description"
22030
+ />
22031
+ </SpsDd>
22032
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
22033
+ <SpsDd>
22034
+ <SpsTextInput
22035
+ value={formValue.term3}
22036
+ formMeta={formMeta.fields.term3}
22037
+ placeholder="Description"
22038
+ />
22039
+ </SpsDd>
22040
+ </SpsDl>
22041
+ </SpsForm>
22042
+ )
22043
+ }
22044
+ `
22045
+ },
22046
+ compactOneToThree: {
22047
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-3"),
22048
+ react: code`
22049
+ function DemoComponent() {
22050
+ const { formValue, formMeta, updateForm } = useSpsForm({
22051
+ term1: "",
22052
+ term2: "",
22053
+ term3: "",
22054
+ }, {
22055
+ "term1": [SpsValidators.required],
22056
+ "term2": [SpsValidators.minLength(1)],
22057
+ })
22058
+
22059
+ React.useEffect(() => {
22060
+ // Make the error state visible for this demo
22061
+ formMeta.fields.term2.markAsDirty();
22062
+ }, []);
22063
+
22064
+ return (
22065
+ <SpsForm formMeta={formMeta}>
22066
+ <SpsDl compact>
22067
+ <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
22068
+ <SpsDd>
22069
+ <SpsTextInput
22070
+ value={formValue.term1}
22071
+ formMeta={formMeta.fields.term1}
22072
+ placeholder="Description"
22073
+ />
22074
+ </SpsDd>
22075
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22076
+ <SpsDd>
22077
+ <SpsTextInput
22078
+ value={formValue.term2}
22079
+ formMeta={formMeta.fields.term2}
22080
+ placeholder="Description"
22081
+ />
22082
+ </SpsDd>
22083
+ <SpsDt
22084
+ id="accomplishmentsLabel"
22085
+ labelFor={formMeta.fields.term3}
22086
+ help="Enter a description"
22087
+ >
22088
+ Term3
22089
+ </SpsDt>
22090
+ <SpsDd>
22091
+ <SpsTextInput
22092
+ value={formValue.term3}
22093
+ formMeta={formMeta.fields.term3}
22094
+ placeholder="Description"
22095
+ />
22096
+ </SpsDd>
22097
+ </SpsDl>
22098
+ </SpsForm>
22099
+ )
22100
+ }
22101
+ `
22102
+ },
22103
+ compactOneToTwo: {
22104
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-2"),
22105
+ react: code`
22106
+ function DemoComponent() {
22107
+ const { formValue, formMeta, updateForm } = useSpsForm({
22108
+ term1: "",
22109
+ term2: "",
22110
+ term3: "",
22111
+ }, {
22112
+ "term1": [SpsValidators.required],
22113
+ "term2": [SpsValidators.minLength(1)],
22114
+ })
22115
+
22116
+ React.useEffect(() => {
22117
+ // Make the error state visible for this demo
22118
+ formMeta.fields.term2.markAsDirty();
22119
+ }, []);
22120
+
22121
+ return (
22122
+ <SpsForm formMeta={formMeta}>
22123
+ <SpsDl wideTerms compact>
22124
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22125
+ <SpsDd>
22126
+ <SpsTextInput
22127
+ value={formValue.term1}
22128
+ formMeta={formMeta.fields.term1}
22129
+ placeholder="Description"
22130
+ />
22131
+ </SpsDd>
22132
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22133
+ <SpsDd>
22134
+ <SpsTextInput
22135
+ value={formValue.term2}
22136
+ formMeta={formMeta.fields.term2}
22137
+ placeholder="Description"
22138
+ />
22139
+ </SpsDd>
22140
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
22141
+ >Term 3</SpsDt>
22142
+ <SpsDd>
22143
+ <SpsTextInput
22144
+ value={formValue.term3}
22145
+ formMeta={formMeta.fields.term3}
22146
+ placeholder="Description"
22147
+ />
22148
+ </SpsDd>
22149
+ </SpsDl>
22150
+ </SpsForm>
22151
+ )
22152
+ }
22153
+ `
22154
+ },
22155
+ compactOneToOne: {
22156
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-1"),
22157
+ react: code`
22158
+ function DemoComponent() {
22159
+ const { formValue, formMeta, updateForm } = useSpsForm({
22160
+ term1: "",
22161
+ term2: "",
22162
+ term3: "",
22163
+ }, {
22164
+ "term1": [SpsValidators.required],
22165
+ "term2": [SpsValidators.minLength(1)],
22166
+ })
22167
+
22168
+ React.useEffect(() => {
22169
+ // Make the error state visible for this demo
22170
+ formMeta.fields.term2.markAsDirty();
22171
+ }, []);
22172
+
22173
+ return (
22174
+ <SpsForm formMeta={formMeta}>
22175
+ <SpsDl widerTerms compact>
22176
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22177
+ <SpsDd>
22178
+ <SpsTextInput
22179
+ value={formValue.term1}
22180
+ formMeta={formMeta.fields.term1}
22181
+ placeholder="Description"
22182
+ />
22183
+ </SpsDd>
22184
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22185
+ <SpsDd>
22186
+ <SpsTextInput
22187
+ value={formValue.term2}
22188
+ formMeta={formMeta.fields.term2}
22189
+ placeholder="Description"
22190
+ />
22191
+ </SpsDd>
22192
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
22193
+ <SpsDd>
22194
+ <SpsTextInput
22195
+ value={formValue.term3}
22196
+ formMeta={formMeta.fields.term3}
22197
+ placeholder="Description"
22198
+ />
22199
+ </SpsDd>
22200
+ </SpsDl>
22201
+ </SpsForm>
22114
22202
  )
22115
22203
  }
22116
22204
  `