@spscommerce/ds-react 6.10.2 → 6.11.0

package/lib/index.cjs.js

@@ -6414,7 +6414,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             </SpsCard>
                         )
                     }
-                `}}}},nM={checked:"boolean",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",inline:"boolean",centered:"boolean",label:"string",name:{type:"string",required:!0},onChange:"ChangeEventHandler",value:"any"},aM=$(I({},U),{checked:T.exports.bool,disabled:T.exports.bool,formControl:ie(),formMeta:ie(),inline:T.exports.bool,centered:T.exports.bool,label:T.exports.string,name:T.exports.string.isRequired,onChange:se(),ref:Kt(),value:T.exports.any});function rl(w){var y=w,{checked:e,className:t,"data-testid":n,disabled:a,formControl:o,formMeta:i,id:l,inline:c,centered:p,label:u,name:f,onChange:m,ref:g,unsafelyReplaceClassName:S,value:C}=y,N=z(y,["checked","className","data-testid","disabled","formControl","formMeta","id","inline","centered","label","name","onChange","ref","unsafelyReplaceClassName","value"]);const D=i||o,v=s.useRef(),{wrapperId:k,controlId:M}=Nt(l),L=F(S||"sps-radio-button","sps-checkable",c&&"sps-checkable--inline",p&&"sps-checkable--centered",!u&&"sps-checkable--no-label",t);function _(B){D&&(D.setValue(C),D.markAsDirty()),m&&m(B),v.current.focus()}return s.createElement(ut,{id:k,className:L,formControl:o,formMeta:i,inputRef:v,ref:g,"data-testid":`${n}`,onClick:()=>v.current.click()},s.createElement("input",I({type:"radio",ref:v,className:"sps-checkable__input","data-testid":`${n}__radio-input`,id:M,name:f,checked:e,disabled:a,onChange:_},N)),s.createElement("label",{className:"sps-checkable__label",htmlFor:M},u||""))}Object.assign(rl,{props:nM,propTypes:aM,displayName:"SpsRadioButton"});const Nf={general:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use Radio Buttons:"),s.createElement("ul",null,s.createElement("li",null,"When only one option can be selected from the available options.")),s.createElement("h5",null,"Do Not Use Radio Buttons:"),s.createElement("ul",null,s.createElement("li",null,"When a selection causes an immediate change in the system. Use a"," ",s.createElement(e,{to:"toggle"},"Toggle")," instead."),s.createElement("li",null,"When multiple options can be selected from the available options. Use"," ",s.createElement(e,{to:"checkbox"},"Checkboxes")," instead."),s.createElement("li",null,"When the list of available options requires too much space to list efficiently. Use"," ",s.createElement(e,{to:"dropdown"},"Dropdown")," instead.")))},basic:{label:"Basic Radio Buttons",description:()=>s.createElement("p",null,"Radio Buttons that represent related options are grouped together with a label. The groups can be arranged horizontally or vertically to best utilize available space."),examples:{horizontal:{description:()=>s.createElement("h4",null,"Horizontal Group"),react:E.code`
+                `}}}},nM={checked:"boolean",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",inline:"boolean",centered:"boolean",label:"string",name:{type:"string",required:!0},onChange:"ChangeEventHandler",value:"any"},aM=$(I({},U),{checked:T.exports.bool,disabled:T.exports.bool,formControl:ie(),formMeta:ie(),inline:T.exports.bool,centered:T.exports.bool,label:T.exports.string,name:T.exports.string.isRequired,onChange:se(),ref:Kt(),value:T.exports.any});function rl(w){var y=w,{checked:e,className:t,"data-testid":n,disabled:a,formControl:o,formMeta:i,id:l,inline:c,centered:p,label:u,name:f,onChange:m,ref:g,unsafelyReplaceClassName:S,value:C}=y,N=z(y,["checked","className","data-testid","disabled","formControl","formMeta","id","inline","centered","label","name","onChange","ref","unsafelyReplaceClassName","value"]);const D=i||o,v=s.useRef(),{wrapperId:k,controlId:M}=Nt(l),L=F(S||"sps-radio-button","sps-checkable",c&&"sps-checkable--inline",p&&"sps-checkable--centered",!u&&"sps-checkable--no-label",t);function _(B){D&&(D.setValue(C),D.markAsDirty()),m&&m(B),v.current.focus()}return s.createElement(ut,{id:k,className:L,formControl:o,formMeta:i,inputRef:v,ref:g,"data-testid":`${n}`,onClick:()=>v.current.click()},s.createElement("input",I({type:"radio",ref:v,className:"sps-checkable__input","data-testid":`${n}__radio-input`,id:M,name:f,checked:e,disabled:a,onChange:_},N)),s.createElement("label",{className:"sps-checkable__label",htmlFor:M},u||""))}Object.assign(rl,{props:nM,propTypes:aM,displayName:"SpsRadioButton"});const Nf={general:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use Radio Buttons:"),s.createElement("ul",null,s.createElement("li",null,"When only one option can be selected from the available options.")),s.createElement("h5",null,"Do Not Use Radio Buttons:"),s.createElement("ul",null,s.createElement("li",null,"When a selection causes an immediate change in the system. Use a"," ",s.createElement(e,{to:"toggle"},"Toggle")," instead."),s.createElement("li",null,"When multiple options can be selected from the available options. Use"," ",s.createElement(e,{to:"checkbox"},"Checkboxes")," instead."),s.createElement("li",null,"When the list of available options requires too much space to list efficiently. Use"," ",s.createElement(e,{to:"dropdown"},"Dropdown")," instead.")),s.createElement("h5",null,"Using Radio Buttons in a Form"),s.createElement("p",null,"Reference the ",s.createElement(e,{to:"form"},"Forms")," page for guidelines for placing Radio Buttons in Form Layouts."))},basic:{label:"Basic Radio Buttons",description:()=>s.createElement("p",null,"Radio Buttons that represent related options are grouped together with a label. The groups can be arranged horizontally or vertically to best utilize available space."),examples:{horizontal:{description:()=>s.createElement("h4",null,"Horizontal Group"),react:E.code`
                     function DemoComponent() {
                       const { formValue, formMeta, updateForm } = useSpsForm({
                         option: "option1",
@@ -8104,7 +8104,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             </div>
                         );
                     }
-                `}}}},wM={disabled:"boolean",formMeta:"SpsFormFieldMeta<string>",icon:"SpsIcon",name:"string",onChange:"ChangeEventHandler<HTMLInputElement>",placeholder:"string",value:"string",additionalText:"string"},EM=$(I({},U),{disabled:T.exports.bool,formControl:ie(),formMeta:ie(),icon:he(O.SpsIcon),name:T.exports.string,onChange:se(),placeholder:T.exports.string,value:T.exports.string,additionalText:T.exports.string}),kr=s.forwardRef((w,N)=>{var y=w,{className:e,disabled:t=!1,formControl:n,formMeta:a,icon:o,id:i,name:l,onChange:c,placeholder:p,"data-testid":u,title:f,unsafelyReplaceClassName:m,value:g="",additionalText:S}=y,C=z(y,["className","disabled","formControl","formMeta","icon","id","name","onChange","placeholder","data-testid","title","unsafelyReplaceClassName","value","additionalText"]);const D=a||n,{wrapperId:v,controlId:k}=Nt(i,D),M=s.useRef();function L(P,j){D&&(D.setValue(P),D.markAsDirty()),c&&c(j||new Tn(M.current))}function _(){M.current.value="",L("")}function B(P){L(P.target.value,P)}const A=F(m||"sps-text-input",e);return s.createElement(ut,{id:v,className:A,formControl:n,formMeta:a,inputRef:M,ref:N,focusInputOnClick:!0,"data-testid":`${u}`},s.createElement("div",{className:F("sps-form-control",t&&"disabled")},o&&s.createElement("i",{className:F("sps-text-input__icon","sps-icon",`sps-icon-${o}`)}),s.createElement("input",I({type:"text",ref:M,"data-testid":`${u}__input`,className:"sps-text-input__input",id:k,name:l,placeholder:p,onChange:B,title:f,value:g,disabled:t},C)),g&&!t&&s.createElement("i",{"data-testid":`${u}__input_clear`,className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:_})),S&&s.createElement("p",{className:"sps-input__additional-text"},S))});Object.assign(kr,{props:wM,propTypes:EM,displayName:"SpsTextInput"});const Ff={general:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use a Text Input:"),s.createElement("ul",null,s.createElement("li",null,"When the value required is short (a single word or short phrase)."),s.createElement("li",null,"When only one value is required or accepted.")),s.createElement("h5",null,"Do Not Use a Text Input:"),s.createElement("ul",null,s.createElement("li",null,"When a value of considerable length (such as a sentence or paragraph) is required or accepted. Use a ",s.createElement(e,{to:"text-areas"},"Text Area")," instead."),s.createElement("li",null,"When more than one value is required or accepted in the field. Use"," ",s.createElement(e,{to:"multi-select"},"Multi-Select")," instead."),s.createElement("li",null,"When a boolean selection is required (such as on/off, yes/no, etc). Use"," ",s.createElement(e,{to:"checkbox"},"Checkboxes"),","," ",s.createElement(e,{to:"radio-buttons"},"Radio Buttons")," or"," ",s.createElement(e,{to:"toggle"},"Toggles")," instead.")))},basic:{label:"Basic Text Inputs",description:()=>s.createElement("p",null,"Basic Text Inputs include a label and an input field."),examples:{standard:{react:E.code`
+                `}}}},wM={disabled:"boolean",formMeta:"SpsFormFieldMeta<string>",icon:"SpsIcon",name:"string",onChange:"ChangeEventHandler<HTMLInputElement>",placeholder:"string",value:"string",additionalText:"string"},EM=$(I({},U),{disabled:T.exports.bool,formControl:ie(),formMeta:ie(),icon:he(O.SpsIcon),name:T.exports.string,onChange:se(),placeholder:T.exports.string,value:T.exports.string,additionalText:T.exports.string}),kr=s.forwardRef((w,N)=>{var y=w,{className:e,disabled:t=!1,formControl:n,formMeta:a,icon:o,id:i,name:l,onChange:c,placeholder:p,"data-testid":u,title:f,unsafelyReplaceClassName:m,value:g="",additionalText:S}=y,C=z(y,["className","disabled","formControl","formMeta","icon","id","name","onChange","placeholder","data-testid","title","unsafelyReplaceClassName","value","additionalText"]);const D=a||n,{wrapperId:v,controlId:k}=Nt(i,D),M=s.useRef();function L(P,j){D&&(D.setValue(P),D.markAsDirty()),c&&c(j||new Tn(M.current))}function _(){M.current.value="",L("")}function B(P){L(P.target.value,P)}const A=F(m||"sps-text-input",e);return s.createElement(ut,{id:v,className:A,formControl:n,formMeta:a,inputRef:M,ref:N,focusInputOnClick:!0,"data-testid":`${u}`},s.createElement("div",{className:F("sps-form-control",t&&"disabled")},o&&s.createElement("i",{className:F("sps-text-input__icon","sps-icon",`sps-icon-${o}`)}),s.createElement("input",I({type:"text",ref:M,"data-testid":`${u}__input`,className:"sps-text-input__input",id:k,name:l,placeholder:p,onChange:B,title:f,value:g,disabled:t},C)),g&&!t&&s.createElement("i",{"data-testid":`${u}__input_clear`,className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:_})),S&&s.createElement("p",{className:"sps-input__additional-text"},S))});Object.assign(kr,{props:wM,propTypes:EM,displayName:"SpsTextInput"});const Ff={general:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use a Text Input:"),s.createElement("ul",null,s.createElement("li",null,"When the value required is short (a single word or short phrase)."),s.createElement("li",null,"When only one value is required or accepted.")),s.createElement("h5",null,"Do Not Use a Text Input:"),s.createElement("ul",null,s.createElement("li",null,"When a value of considerable length (such as a sentence or paragraph) is required or accepted. Use a ",s.createElement(e,{to:"text-areas"},"Text Area")," instead."),s.createElement("li",null,"When more than one value is required or accepted in the field. Use"," ",s.createElement(e,{to:"multi-select"},"Multi-Select")," instead."),s.createElement("li",null,"When a boolean selection is required (such as on/off, yes/no, etc). Use"," ",s.createElement(e,{to:"checkbox"},"Checkboxes"),","," ",s.createElement(e,{to:"radio-buttons"},"Radio Buttons")," or"," ",s.createElement(e,{to:"toggle"},"Toggles")," instead.")),s.createElement("h5",null,"Using Text Inputs in a Form"),s.createElement("p",null,"Reference the ",s.createElement(e,{to:"form"},"Forms")," page for guidelines for placing Inputs in Form Layouts."))},basic:{label:"Basic Text Inputs",description:()=>s.createElement("p",null,"Basic Text Inputs include a label and an input field."),examples:{standard:{react:E.code`
                     function DemoComponent() {
                         const { formValue, formMeta, updateForm } = useSpsForm({ companyName: "" });
 
@@ -8120,7 +8120,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             </div>
                         );
                     }
-                `}}},placeholder:{label:"Placeholder Text",description:({NavigateTo:e})=>s.createElement("p",null,"Certain inputs may benefit from placeholder text to aid the user in providing a valid value."),examples:{placeholder:{react:E.code`
+                `}}},placeholder:{label:"Placeholder Text",description:({NavigateTo:e})=>s.createElement("p",null,"Certain inputs may benefit from placeholder text to aid the user in providing a valid value. For guidelines regarding writing placeholder text reference the Placeholder Text section on the ",s.createElement(e,{to:"form"},"Forms")," page."),examples:{placeholder:{react:E.code`
                     function DemoComponent() {
                       const { formValue, formMeta, updateForm } = useSpsForm({ phoneNumber: "" });
 
@@ -8137,7 +8137,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                           </div>
                       );
                     }
-                `}}},additional_text:{label:"Additional Descriptive Text",description:({NavigateTo:e})=>s.createElement("p",null,"For occasions when additional context beyond a placeholder is required, text in the form of a short phrase can appear below the input."),examples:{placeholder:{react:E.code`
+                `}}},additional_text:{label:"Additional Descriptive Text",description:({NavigateTo:e})=>s.createElement("p",null,"For occasions when additional context beyond a placeholder is required, text in the form of a short phrase can appear below the input. For guidelines regarding writing descriptive text, reference the Additional Descriptive Text section on the"," ",s.createElement(e,{to:"form"},"Forms")," page."),examples:{placeholder:{react:E.code`
                     function DemoComponent() {
                       const { formValue, formMeta, updateForm } = useSpsForm({ password: "" });
 
@@ -8171,7 +8171,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             </div>
                         );
                     }
-                `}}}},CM={disabled:"boolean",formMeta:"SpsFormFieldMeta<string>",name:"string",onChange:"ChangeEventHandler",placeholder:"string",rows:"number",value:"string",additionalText:"string"},xM=$(I({},U),{disabled:T.exports.bool,formControl:ie(),formMeta:ie(),name:T.exports.string,onChange:se(),placeholder:T.exports.string,ref:Kt(),rows:T.exports.number,value:T.exports.string,additionalText:T.exports.string});function ul(N){var w=N,{className:e,disabled:t=!1,formControl:n,formMeta:a,id:o,name:i,onChange:l,placeholder:c="",ref:p,rows:u=2,"data-testid":f,unsafelyReplaceClassName:m,value:g="",additionalText:S}=w,C=z(w,["className","disabled","formControl","formMeta","id","name","onChange","placeholder","ref","rows","data-testid","unsafelyReplaceClassName","value","additionalText"]);const y=a||n,{wrapperId:D,controlId:v}=Nt(o,y),k=s.useRef();function M(A,P){y&&(y.setValue(A),y.markAsDirty()),l&&l(P||new Tn(k.current))}function L(){k.current.value="",M("")}function _(A){M(A.target.value,A)}const B=F(m||"sps-textarea",e);return s.createElement(ut,{id:D,className:B,formControl:n,formMeta:a,inputRef:k,ref:p,"data-testid":f},s.createElement("div",{className:"position-relative"},s.createElement("textarea",I({ref:k,rows:u,"data-testid":`${f}__input`,className:"sps-form-control input--clearable",id:v,name:i,placeholder:c,onChange:_,"aria-label":c,value:g||"",disabled:t},C)),g&&!t&&s.createElement("i",{"data-testid":`${f}__input_clear`,className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:L})),S&&s.createElement("p",{className:"sps-input__additional-text"},S))}Object.assign(ul,{props:CM,propTypes:xM,displayName:"SpsTextarea"});const Kf={general:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use a Text Area:"),s.createElement("ul",null,s.createElement("li",null,"When a value of considerable length (such as a sentence or paragraph) is required or accepted.")),s.createElement("h5",null,"Do Not Use a Text Area:"),s.createElement("ul",null,s.createElement("li",null,"When the value required is short (a single word or short phrase). Use a"," ",s.createElement(e,{to:"text-inputs"},"Text Input")," instead."),s.createElement("li",null,"When more than one value is required or accepted in the field. Use"," ",s.createElement(e,{to:"multi-select"},"Multi-Select")," instead."),s.createElement("li",null,"When a boolean selection is required (such as on/off, yes/no, etc). Use"," ",s.createElement(e,{to:"checkbox"},"Checkboxes"),","," ",s.createElement(e,{to:"radio-buttons"},"Radio Buttons")," or"," ",s.createElement(e,{to:"toggle"},"Toggles")," instead.")))},basic:{label:"Basic Text Areas",description:()=>s.createElement("p",null,"Basic Text Areas include a label and a large input field. By default a Text Area is three lines tall, but the height can be adjusted."),examples:{standard:{react:E.code`
+                `}}}},CM={disabled:"boolean",formMeta:"SpsFormFieldMeta<string>",name:"string",onChange:"ChangeEventHandler",placeholder:"string",rows:"number",value:"string",additionalText:"string"},xM=$(I({},U),{disabled:T.exports.bool,formControl:ie(),formMeta:ie(),name:T.exports.string,onChange:se(),placeholder:T.exports.string,ref:Kt(),rows:T.exports.number,value:T.exports.string,additionalText:T.exports.string});function ul(N){var w=N,{className:e,disabled:t=!1,formControl:n,formMeta:a,id:o,name:i,onChange:l,placeholder:c="",ref:p,rows:u=2,"data-testid":f,unsafelyReplaceClassName:m,value:g="",additionalText:S}=w,C=z(w,["className","disabled","formControl","formMeta","id","name","onChange","placeholder","ref","rows","data-testid","unsafelyReplaceClassName","value","additionalText"]);const y=a||n,{wrapperId:D,controlId:v}=Nt(o,y),k=s.useRef();function M(A,P){y&&(y.setValue(A),y.markAsDirty()),l&&l(P||new Tn(k.current))}function L(){k.current.value="",M("")}function _(A){M(A.target.value,A)}const B=F(m||"sps-textarea",e);return s.createElement(ut,{id:D,className:B,formControl:n,formMeta:a,inputRef:k,ref:p,"data-testid":f},s.createElement("div",{className:"position-relative"},s.createElement("textarea",I({ref:k,rows:u,"data-testid":`${f}__input`,className:"sps-form-control input--clearable",id:v,name:i,placeholder:c,onChange:_,"aria-label":c,value:g||"",disabled:t},C)),g&&!t&&s.createElement("i",{"data-testid":`${f}__input_clear`,className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:L})),S&&s.createElement("p",{className:"sps-input__additional-text"},S))}Object.assign(ul,{props:CM,propTypes:xM,displayName:"SpsTextarea"});const Kf={general:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use a Text Area:"),s.createElement("ul",null,s.createElement("li",null,"When a value of considerable length (such as a sentence or paragraph) is required or accepted.")),s.createElement("h5",null,"Do Not Use a Text Area:"),s.createElement("ul",null,s.createElement("li",null,"When the value required is short (a single word or short phrase). Use a"," ",s.createElement(e,{to:"text-inputs"},"Text Input")," instead."),s.createElement("li",null,"When more than one value is required or accepted in the field. Use"," ",s.createElement(e,{to:"multi-select"},"Multi-Select")," instead."),s.createElement("li",null,"When a boolean selection is required (such as on/off, yes/no, etc). Use"," ",s.createElement(e,{to:"checkbox"},"Checkboxes"),","," ",s.createElement(e,{to:"radio-buttons"},"Radio Buttons")," or"," ",s.createElement(e,{to:"toggle"},"Toggles")," instead.")),s.createElement("h5",null,"Using Text Areas in a Form"),s.createElement("p",null,"Reference the ",s.createElement(e,{to:"form"},"Forms")," page for guidelines for placing Inputs in Form Layouts."))},basic:{label:"Basic Text Areas",description:()=>s.createElement("p",null,"Basic Text Areas include a label and a large input field. By default a Text Area is three lines tall, but the height can be adjusted."),examples:{standard:{react:E.code`
                     function DemoComponent() {
                         const { formValue, formMeta, updateForm } = useSpsForm({ notes: "" });
 
@@ -8188,7 +8188,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             </div>
                         );
                     }
-                `}}},placeholder:{label:"Placeholder Text",description:({NavigateTo:e})=>s.createElement("p",null,"Certain inputs may benefit from placeholder text to aid the user in providing a valid value."),examples:{placeholder:{react:E.code`
+                `}}},placeholder:{label:"Placeholder Text",description:({NavigateTo:e})=>s.createElement("p",null,"Certain inputs may benefit from placeholder text to aid the user in providing a valid value. For guidelines regarding writing placeholder text reference the Placeholder Text section on the ",s.createElement(e,{to:"form"},"Forms")," page."),examples:{placeholder:{react:E.code`
                     function DemoComponent() {
                       const { formValue, formMeta, updateForm } = useSpsForm({ companyDescription: "" });
 
@@ -8205,7 +8205,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                           </div>
                       );
                     }
-                `}}},additional_text:{label:"Additional Descriptive Text",description:({NavigateTo:e})=>s.createElement("p",null,"For occasions when additional context beyond a placeholder is required, text in the form of a short phrase can appear below the input."),examples:{placeholder:{react:E.code`
+                `}}},additional_text:{label:"Additional Descriptive Text",description:({NavigateTo:e})=>s.createElement("p",null,"For occasions when additional context beyond a placeholder is required, text in the form of a short phrase can appear below the input. For guidelines regarding writing descriptive text, reference the Additional Descriptive Text section on the"," ",s.createElement(e,{to:"form"},"Forms")," page."),examples:{placeholder:{react:E.code`
                     function DemoComponent() {
                       const { formValue, formMeta, updateForm } = useSpsForm({ campaignNotes: "" });
 

package/lib/index.es.js

@@ -32148,7 +32148,9 @@ const SpsRadioButtonExamples = {
       to: "checkbox"
     }, "Checkboxes"), " instead."), /* @__PURE__ */ React.createElement("li", null, "When the list of available options requires too much space to list efficiently. Use", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
       to: "dropdown"
-    }, "Dropdown"), " instead.")))
+    }, "Dropdown"), " instead.")), /* @__PURE__ */ React.createElement("h5", null, "Using Radio Buttons in a Form"), /* @__PURE__ */ React.createElement("p", null, "Reference the ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "form"
+    }, "Forms"), " page for guidelines for placing Radio Buttons in Form Layouts."))
   },
   basic: {
     label: "Basic Radio Buttons",
@@ -35115,7 +35117,9 @@ const SpsTextInputExamples = {
       to: "radio-buttons"
     }, "Radio Buttons"), " or", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
       to: "toggle"
-    }, "Toggles"), " instead.")))
+    }, "Toggles"), " instead.")), /* @__PURE__ */ React.createElement("h5", null, "Using Text Inputs in a Form"), /* @__PURE__ */ React.createElement("p", null, "Reference the ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "form"
+    }, "Forms"), " page for guidelines for placing Inputs in Form Layouts."))
   },
   basic: {
     label: "Basic Text Inputs",
@@ -35144,7 +35148,9 @@ const SpsTextInputExamples = {
   },
   placeholder: {
     label: "Placeholder Text",
-    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "Certain inputs may benefit from placeholder text to aid the user in providing a valid value."),
+    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "Certain inputs may benefit from placeholder text to aid the user in providing a valid value. For guidelines regarding writing placeholder text reference the Placeholder Text section on the ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "form"
+    }, "Forms"), " page."),
     examples: {
       placeholder: {
         react: code`
@@ -35170,7 +35176,9 @@ const SpsTextInputExamples = {
   },
   additional_text: {
     label: "Additional Descriptive Text",
-    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "For occasions when additional context beyond a placeholder is required, text in the form of a short phrase can appear below the input."),
+    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "For occasions when additional context beyond a placeholder is required, text in the form of a short phrase can appear below the input. For guidelines regarding writing descriptive text, reference the Additional Descriptive Text section on the", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "form"
+    }, "Forms"), " page."),
     examples: {
       placeholder: {
         react: code`
@@ -35343,7 +35351,9 @@ const SpsTextareaExamples = {
       to: "radio-buttons"
     }, "Radio Buttons"), " or", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
       to: "toggle"
-    }, "Toggles"), " instead.")))
+    }, "Toggles"), " instead.")), /* @__PURE__ */ React.createElement("h5", null, "Using Text Areas in a Form"), /* @__PURE__ */ React.createElement("p", null, "Reference the ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "form"
+    }, "Forms"), " page for guidelines for placing Inputs in Form Layouts."))
   },
   basic: {
     label: "Basic Text Areas",
@@ -35373,7 +35383,9 @@ const SpsTextareaExamples = {
   },
   placeholder: {
     label: "Placeholder Text",
-    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "Certain inputs may benefit from placeholder text to aid the user in providing a valid value."),
+    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "Certain inputs may benefit from placeholder text to aid the user in providing a valid value. For guidelines regarding writing placeholder text reference the Placeholder Text section on the ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "form"
+    }, "Forms"), " page."),
     examples: {
       placeholder: {
         react: code`
@@ -35399,7 +35411,9 @@ const SpsTextareaExamples = {
   },
   additional_text: {
     label: "Additional Descriptive Text",
-    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "For occasions when additional context beyond a placeholder is required, text in the form of a short phrase can appear below the input."),
+    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "For occasions when additional context beyond a placeholder is required, text in the form of a short phrase can appear below the input. For guidelines regarding writing descriptive text, reference the Additional Descriptive Text section on the", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "form"
+    }, "Forms"), " page."),
     examples: {
       placeholder: {
         react: code`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.10.2",
+  "version": "6.11.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,11 +28,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.10.2",
-    "@spscommerce/ds-illustrations": "6.10.2",
-    "@spscommerce/ds-shared": "6.10.2",
-    "@spscommerce/positioning": "6.10.2",
-    "@spscommerce/utils": "6.10.2",
+    "@spscommerce/ds-colors": "6.11.0",
+    "@spscommerce/ds-illustrations": "6.11.0",
+    "@spscommerce/ds-shared": "6.11.0",
+    "@spscommerce/positioning": "6.11.0",
+    "@spscommerce/utils": "6.11.0",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -40,11 +40,11 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.10.2",
-    "@spscommerce/ds-illustrations": "6.10.2",
-    "@spscommerce/ds-shared": "6.10.2",
-    "@spscommerce/positioning": "6.10.2",
-    "@spscommerce/utils": "6.10.2",
+    "@spscommerce/ds-colors": "6.11.0",
+    "@spscommerce/ds-illustrations": "6.11.0",
+    "@spscommerce/ds-shared": "6.11.0",
+    "@spscommerce/positioning": "6.11.0",
+    "@spscommerce/utils": "6.11.0",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",