@spscommerce/ds-react 6.18.2 → 6.18.3

package/lib/index.cjs.js

@@ -3289,7 +3289,7 @@ var s=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             <span className="gray600 font-weight-bold">Detail:</span> 792 units
                         </SpsInsightTile>
                     </SpsInsights>
-                `}}}},OD={inline:"boolean"},BD=H(N({},Y),{inline:T.exports.bool});function Ci(e){const p=e,{children:t,className:n,inline:s,"data-testid":o,unsafelyReplaceClassName:i}=p,c=z(p,["children","className","inline","data-testid","unsafelyReplaceClassName"]),l=K(i||"sps-key-value-list",s&&"sps-key-value-list--inline",n);return a.createElement("div",N({className:l,"data-testid":`${o}`},c),t)}Object.assign(Ci,{props:OD,propTypes:BD,displayName:"SpsKeyValueList"});const AD={itemKey:{type:"string | nodeOrRenderFn",required:!0},titleColor:"KeyValueListTitleColor"},PD=H(N({},Y),{itemKey:T.exports.string.isRequired||dt.isRequired,titleColor:be(M.KeyValueListTitleColor)});function xi(e){const u=e,{children:t,className:n,itemKey:s,titleColor:o=M.KeyValueListTitleColor.LIGHT,"data-testid":i,unsafelyReplaceClassName:c}=u,l=z(u,["children","className","itemKey","titleColor","data-testid","unsafelyReplaceClassName"]),p=K(c||"sps-key-value-list__item",`sps-key-value-list__item--${o}`,n);return a.createElement("div",N({className:p,"data-testid":`${i}`},l),a.createElement("span",{className:"sps-key-value-list__key","data-testid":`${i}__key`},s),a.createElement("span",{className:"sps-key-value-list__value","data-testid":`${i}__value`},t))}Object.assign(xi,{props:AD,propTypes:PD,displayName:"SpsKeyValueListItem"});const zu={vertical:{label:"Vertical Key Value Sets",description:()=>A.default.createElement(A.default.Fragment,null,A.default.createElement("h5",null,"Use:"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Vertical containers such as a side bar or general card")),A.default.createElement("h5",null,"Do Not Use:"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"In Table cells or Description Lists")),A.default.createElement("h5",null,"Usage Rules"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Titles must be written in Title Case"),A.default.createElement("li",{className:"mb-2"},"Values can be written in Sentence Case or Title Case as best suits the content"),A.default.createElement("li",{className:"mb-2"},"Titles or Values can include hyperlinks and/or icons",A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Icons should always appear on the left before any text content"))),A.default.createElement("li",{className:"mb-2"},"Values can include tags"),A.default.createElement("li",{className:"mb-2"},"Can include multiple values on additional lines"))),examples:{standard:{description:()=>A.default.createElement("h4",null,"Standard"),react:y.code`
+                `}}}},OD={inline:"boolean"},BD=H(N({},Y),{inline:T.exports.bool});function Ci(e){const p=e,{children:t,className:n,inline:s,"data-testid":o,unsafelyReplaceClassName:i}=p,c=z(p,["children","className","inline","data-testid","unsafelyReplaceClassName"]),l=K(i||"sps-key-value-list",s&&"sps-key-value-list--inline",n);return a.createElement("div",N({className:l,"data-testid":`${o}`},c),t)}Object.assign(Ci,{props:OD,propTypes:BD,displayName:"SpsKeyValueList"});const AD={itemKey:{type:"string | nodeOrRenderFn",required:!0},titleColor:"KeyValueListTitleColor"},PD=H(N({},Y),{itemKey:T.exports.string.isRequired||dt.isRequired,titleColor:be(M.KeyValueListTitleColor)});function xi(e){const u=e,{children:t,className:n,itemKey:s,titleColor:o=M.KeyValueListTitleColor.LIGHT,"data-testid":i,unsafelyReplaceClassName:c}=u,l=z(u,["children","className","itemKey","titleColor","data-testid","unsafelyReplaceClassName"]),p=K(c||"sps-key-value-list__item",`sps-key-value-list__item--${o}`,n);return a.createElement("div",N({className:p,"data-testid":`${i}`},l),a.createElement("span",{className:"sps-key-value-list__key","data-testid":`${i}__key`},s),a.createElement("span",{className:"sps-key-value-list__value","data-testid":`${i}__value`},t))}Object.assign(xi,{props:AD,propTypes:PD,displayName:"SpsKeyValueListItem"});const zu={vertical:{label:"Vertical Key Value Lists",description:()=>A.default.createElement(A.default.Fragment,null,A.default.createElement("h5",null,"Use:"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Vertical containers such as a side bar or general card")),A.default.createElement("h5",null,"Do Not Use:"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"In Table cells or Description Lists")),A.default.createElement("h5",null,"Usage Rules"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Titles must be written in Title Case"),A.default.createElement("li",{className:"mb-2"},"Values can be written in Sentence Case or Title Case as best suits the content"),A.default.createElement("li",{className:"mb-2"},"Titles or Values can include hyperlinks and/or icons",A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Icons should always appear on the left before any text content"))),A.default.createElement("li",{className:"mb-2"},"Values can include tags"),A.default.createElement("li",{className:"mb-2"},"Can include multiple values on additional lines"))),examples:{standard:{description:()=>A.default.createElement("h4",null,"Standard"),react:y.code`
           function DemoComponent() {
             return (
               <SpsKeyValueList>
@@ -3344,7 +3344,7 @@ var s=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
               </SpsKeyValueList>
             )
           }
-        `}}},horizontal:{label:"Horizontal Key Value Sets",description:()=>A.default.createElement(A.default.Fragment,null,A.default.createElement("h5",null,"Use:"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Horizontal containers such as a content row")),A.default.createElement("h5",null,"Do Not Use:"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"In Table cells or Description Lists")),A.default.createElement("h5",null,"Usage Rules"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Titles must be written in Title Case"),A.default.createElement("li",{className:"mb-2"},"Values can be written in Sentence Case or Title Case as best suits the content"),A.default.createElement("li",{className:"mb-2"},"Titles or Values can include hyperlinks and/or icons",A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Icons should always appear on the left before any text content"))),A.default.createElement("li",{className:"mb-2"},"Can be used individually or stacked on top of one another",A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"When stacking, the value sets should share a common category or theme"))))),examples:{standard:{description:()=>A.default.createElement("h4",null,"Standard"),react:y.code`
+        `}}},horizontal:{label:"Horizontal Key Value Lists",description:()=>A.default.createElement(A.default.Fragment,null,A.default.createElement("h5",null,"Use:"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Horizontal containers such as a content row")),A.default.createElement("h5",null,"Do Not Use:"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"In Table cells or Description Lists")),A.default.createElement("h5",null,"Usage Rules"),A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Titles must be written in Title Case"),A.default.createElement("li",{className:"mb-2"},"Values can be written in Sentence Case or Title Case as best suits the content"),A.default.createElement("li",{className:"mb-2"},"Titles or Values can include hyperlinks and/or icons",A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"Icons should always appear on the left before any text content"))),A.default.createElement("li",{className:"mb-2"},"Can be used individually or stacked on top of one another",A.default.createElement("ul",null,A.default.createElement("li",{className:"mb-2"},"When stacking, the value lists should share a common category or theme"))))),examples:{standard:{description:()=>A.default.createElement("h4",null,"Standard"),react:y.code`
           function DemoComponent() {
             return (
               <SpsKeyValueList inline>
@@ -3354,7 +3354,7 @@ var s=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
               </SpsKeyValueList>
             )
           }
-        `},stacked:{description:()=>A.default.createElement(A.default.Fragment,null,A.default.createElement("h4",null,"Stacked"),A.default.createElement("p",null,A.default.createElement("b",null,"Note:")," There is no limit to the number of stacked listings, but more than three in a single container should be avoided."),A.default.createElement("p",null,A.default.createElement("b",null,"Note:")," Titles are right-aligned in the horizontal Key Value Sets to optimize scanability of the values.")),react:y.code`
+        `},stacked:{description:()=>A.default.createElement(A.default.Fragment,null,A.default.createElement("h4",null,"Stacked"),A.default.createElement("p",null,A.default.createElement("b",null,"Note:")," There is no limit to the number of stacked listings, but more than three in a single container should be avoided."),A.default.createElement("p",null,A.default.createElement("b",null,"Note:")," Titles are right-aligned in the horizontal Key Value Lists to optimize scanability of the values.")),react:y.code`
           function DemoComponent() {
             return (
               <div className="sfg-row">
@@ -9594,7 +9594,7 @@ function Component() {
                         </SpsForm>
                       )
                     }
-                `}}}},FN={"Advanced Search":{components:[Ur],examples:rc},Autocomplete:{components:[fs],examples:kc},Buttons:{description:()=>a.createElement(a.Fragment,null,a.createElement("div",{className:"sps-body-14"},"Buttons are used to initiate events or actions. The labels and/or icons describe what the button will do."),a.createElement("br",null),a.createElement("h5",null,"Variants"),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Default:"),"For tertiary actions or actions of lower importance on a page."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Key:"),"For primary or important actions on a page."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Confirm:"),"For the main call to action on a page. There should only be one Confirm button per screen."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Delete:"),"For deleting information or another destructive action. These should always be paired with a Delete Confirmation Modal."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Disabled:"),"For actions that are not permitted in a particular state. These can be accompanied by a Tooltip on hover describing why it\u2019s disabled."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"With an Icon:"),"For further illustrating the action. Example: Pencil icon in an Edit button. There can also be Icon Buttons without text.")),components:[Fe,Xr],examples:Mc},Cards:{description:()=>a.createElement("p",null,"Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),components:[po,ys,Ts,uo,vs],examples:od},Checkbox:{components:[In],examples:id},"Clickable Tags":{components:[Da],examples:ld},"Column Chooser":{components:[di,Xs],examples:gu},"Conditional Fields":{description:()=>a.createElement("p",null,"A conditional field is one that is only available when a certain option is selected amongst a set of checkboxes or radio buttons."),components:[cl],examples:df},"Content Rows":{components:[pi,_n,Qs,hr,Ka],examples:vu},"Content Tiles":{components:[qi,Ji,hr,Ka],examples:Wm},"Filter Tiles":{components:[Zi,Xi],examples:Gm},Datepicker:{components:[fi],examples:Cu},"Date Range Picker":{components:[gi],examples:Du},Datetime:{components:[Si],examples:Iu},"Description Lists":{description:()=>a.createElement("p",null,"Description Lists display a series of terms with accompanying descriptions such as a glossary of terms."),components:[er,tr,ar],examples:Fu},Dropdown:{components:[xn,bi],examples:Ku},"Feedback Blocks":{description:({NavigateTo:e})=>a.createElement(a.Fragment,null,a.createElement("p",null,"Feedback Blocks show static informational messages on a page. They should not dynamically appear or disappear. For feedback that responds to a user action, Use a"," ",a.createElement(e,{to:"growler"},"Growler")," instead."),a.createElement("h5",null,"Variants"),a.createElement("p",null,"Variants are generally tied to a specific color and an accompanying icon."),a.createElement(en,{kind:M.FeedbackBlockKind.ERROR,message:"Error"}),a.createElement(en,{kind:M.FeedbackBlockKind.INFO,message:"Information"}),a.createElement(en,{kind:M.FeedbackBlockKind.TIP,message:"Tip"}),a.createElement(en,{kind:M.FeedbackBlockKind.SUCCESS,message:"Success"}),a.createElement(en,{kind:M.FeedbackBlockKind.WARNING,message:"Warning"})),components:[vi,en],examples:Vu},Fieldset:{components:[yi],examples:$u},"Filter Panel":{components:[rl,ol,il,ll],examples:cf},"Focused Task":{components:[rr,sr],examples:Hu},Form:{components:[ga],examples:Wu},Growlers:{description:()=>a.createElement("p",null,"Use Growlers for dynamic messages in response to a user's action. All Growlers have a Primary Message, and may optionally have a Secondary Message as needed. Growlers may also contain Hyperlinks in the Secondary Message."),components:[or],examples:Gu},Incrementor:{components:[wi],examples:Uu},"Insight Tiles":{components:[Yu,Ei],examples:LD},"Key Value Lists":{description:()=>a.createElement("p",null,"Key Value Sets consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),components:[Ci,xi],examples:zu},Label:{description:()=>a.createElement("p",null,"Labels provide a description for the value to be entered or selected in an accompanying input field."),components:[Di],examples:ju},"List Action Bar":{description:()=>a.createElement("p",null,"The List Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The List Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),components:[Ii],examples:hm},"List Toolbar":{description:()=>a.createElement("p",null,"The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),components:[Mi,lr,cr,_i],examples:ym},"Micro Block":{components:[en],examples:Tm},Modals:{description:()=>a.createElement("p",null,"Modals are overlays on a page that focus a user\u2019s attention on an important message or a simple action. Examples of a Modal include confirming the deletion of a record, or making a single selection."),components:[Ri,dr],examples:wm},"Multi Select":{description:()=>a.createElement("p",null,"Multi-Selects consist of a Label and a dropdown menu from which a user selects one or more values from a list of pre-defined options."),components:[Li],examples:Em},"Page Title":{components:[Oi,Bi],examples:Cm},Pagination:{description:()=>a.createElement("p",null,"The Pagination component allows users to navigate lists of records and control the number of records displayed on each page. The records can span across multiple pages, or within sections of a page."),components:[Ai,ur],examples:xm},"Product Bar":{components:[Pi,mr],examples:Dm},"Progress Bar":{description:()=>a.createElement("p",null,"Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),components:[Fi],examples:km},"Radio Buttons":{description:"Radio Buttons allow a user to make single selection from a list of predefined options.",components:[$i],examples:Mm},"Scrollable Container":{components:[Hi],examples:_m},"Search Results Bar":{components:[ir],examples:bm},Select:{description:"Selects consist off a Label and a dropdown menu from which a user selects a value from a list of pre-defined options.",components:[pr],examples:Rm},"Side Navigation":{description:"Side Navigations are used to provide quick access to a series of related pages or content. It can be used to navigate between different page views, or as an anchor-style menu to scroll to specific content on the same page.",components:[Om],examples:Bm},Spinner:{components:[us],examples:Am},"Split Button":{components:[Wi],examples:Pm},"Stepped Progress Bar":{components:[Vi],examples:Im},"Slack Link":{components:[Gi],examples:Fm},"Summary List Row":{components:[Ui,Yi,Va],examples:Km},Tables:{description:({NavigateTo:e})=>a.createElement(a.Fragment,null,a.createElement("div",{className:"sps-body-14"},"Tables (along with ",a.createElement(e,{to:"content-rows"},"Content Rows")," and"," ",a.createElement(e,{to:"content-tiles"},"Content Tiles"),") are one of three options for displaying a list of records on a page."),a.createElement("br",null),a.createElement("div",{className:"sps-body-14"},"Tables are the ideal solution for displaying tabular data, especially when the listed records contain a considerable amount of data points. While tables are primarily used to display an extensive list of records, often in a paginated format, they can also be used to display smaller sets of tabular data in any context.")),components:[Ln,hn,ae,fn,Qe,Be],examples:mm},Tags:{components:[xt],examples:fm},"Task Queue":{components:[zi],examples:Vm},"Text Inputs":{description:()=>a.createElement("p",null,"Text Inputs consist of a Label and a field in which a user enters a short value."),components:[gr],examples:$m},"Text Areas":{description:()=>a.createElement("p",null,"Text Areas consist of a Label and a field in which a user enters a long value."),components:[ji],examples:Hm},Toggle:{description:()=>a.createElement("p",null,"Toggles allow a user to immediately turn a setting on or off."),components:[Qi],examples:Ym},Tooltips:{components:[Dt,Ki],examples:Nm},Wizard:{components:[tl,nl],examples:Jm},Workflow:{components:[Sr,br,vr,yr],examples:of},"Zero States":{description:"Zero States are placeholders in content areas when there is no content to show. You can view all available illustrations on the Illustrations page.",components:[al,sl],examples:lf}},KN=function({viewing:e,in:t,onChange:n}){return a.createElement("div",{className:"sps-context-bar"},"Viewing",a.createElement("span",{className:"sps-context-bar__emphasized"},e),Boolean(t)&&a.createElement(a.Fragment,null,"in",a.createElement("span",{className:"sps-context-bar__emphasized"},t)),Boolean(n)&&a.createElement(Fe,{className:"sps-context-bar__change-button",kind:M.ButtonKind.LINK,onClick:n},"Change"))},VN={disabled:"boolean",formMeta:"SpsFormFieldMeta<number>",name:"string",onChange:"ChangeEventHandler<number>",value:"number"},$N=H(N({},Y),{disabled:T.exports.bool,formMeta:le(),name:T.exports.string,onChange:ne(),ref:Ft(),value:T.exports.number});function HN(e){return e?Number.parseInt(e.replace(/[^\d]/g,""),10)/100:null}function WN(e){return typeof e=="number"?e.toFixed(2):""}function pf(f){var m=f,{className:e,disabled:t=!1,formMeta:n,id:s,name:o,onChange:i,ref:c,title:l,value:p}=m,u=z(m,["className","disabled","formMeta","id","name","onChange","ref","title","value"]);const{wrapperId:g,controlId:S}=Tt(s,n),w=a.useRef();function x(k){n&&(n.setValue(k),n.markAsDirty()),i&&i(k)}function E(){x(null)}function I(k){x(HN(k.target.value))}function D(k){k.currentTarget.setSelectionRange(k.currentTarget.value.length,k.currentTarget.value.length)}const v=K("sps-text-input",e);return a.createElement(it,{id:g,className:v,formMeta:n,inputRef:w,ref:c},a.createElement("div",{className:K("sps-form-control",t&&"disabled")},a.createElement(Rt,{className:"sps-text-input__icon",icon:M.SpsIcon.DOLLAR_SIGN}),a.createElement("input",N({type:"text",ref:w,onFocus:D,className:"sps-text-input__input",id:S,name:o,placeholder:"0.00",onChange:I,title:l,value:WN(p),disabled:t},u)),p!==null&&!t&&a.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:E})))}Object.assign(pf,{props:VN,propTypes:$N,displayName:"SpsCurrencyInput"});const GN={basic:{label:"Basic",examples:{basic:{react:y.code`
+                `}}}},FN={"Advanced Search":{components:[Ur],examples:rc},Autocomplete:{components:[fs],examples:kc},Buttons:{description:()=>a.createElement(a.Fragment,null,a.createElement("div",{className:"sps-body-14"},"Buttons are used to initiate events or actions. The labels and/or icons describe what the button will do."),a.createElement("br",null),a.createElement("h5",null,"Variants"),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Default:"),"For tertiary actions or actions of lower importance on a page."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Key:"),"For primary or important actions on a page."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Confirm:"),"For the main call to action on a page. There should only be one Confirm button per screen."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Delete:"),"For deleting information or another destructive action. These should always be paired with a Delete Confirmation Modal."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"Disabled:"),"For actions that are not permitted in a particular state. These can be accompanied by a Tooltip on hover describing why it\u2019s disabled."),a.createElement("div",{className:"sps-body-14"},a.createElement("span",{className:"sps-text-semibold"},"With an Icon:"),"For further illustrating the action. Example: Pencil icon in an Edit button. There can also be Icon Buttons without text.")),components:[Fe,Xr],examples:Mc},Cards:{description:()=>a.createElement("p",null,"Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),components:[po,ys,Ts,uo,vs],examples:od},Checkbox:{components:[In],examples:id},"Clickable Tags":{components:[Da],examples:ld},"Column Chooser":{components:[di,Xs],examples:gu},"Conditional Fields":{description:()=>a.createElement("p",null,"A conditional field is one that is only available when a certain option is selected amongst a set of checkboxes or radio buttons."),components:[cl],examples:df},"Content Rows":{components:[pi,_n,Qs,hr,Ka],examples:vu},"Content Tiles":{components:[qi,Ji,hr,Ka],examples:Wm},"Filter Tiles":{components:[Zi,Xi],examples:Gm},Datepicker:{components:[fi],examples:Cu},"Date Range Picker":{components:[gi],examples:Du},Datetime:{components:[Si],examples:Iu},"Description Lists":{description:()=>a.createElement("p",null,"Description Lists display a series of terms with accompanying descriptions such as a glossary of terms."),components:[er,tr,ar],examples:Fu},Dropdown:{components:[xn,bi],examples:Ku},"Feedback Blocks":{description:({NavigateTo:e})=>a.createElement(a.Fragment,null,a.createElement("p",null,"Feedback Blocks show static informational messages on a page. They should not dynamically appear or disappear. For feedback that responds to a user action, Use a"," ",a.createElement(e,{to:"growler"},"Growler")," instead."),a.createElement("h5",null,"Variants"),a.createElement("p",null,"Variants are generally tied to a specific color and an accompanying icon."),a.createElement(en,{kind:M.FeedbackBlockKind.ERROR,message:"Error"}),a.createElement(en,{kind:M.FeedbackBlockKind.INFO,message:"Information"}),a.createElement(en,{kind:M.FeedbackBlockKind.TIP,message:"Tip"}),a.createElement(en,{kind:M.FeedbackBlockKind.SUCCESS,message:"Success"}),a.createElement(en,{kind:M.FeedbackBlockKind.WARNING,message:"Warning"})),components:[vi,en],examples:Vu},Fieldset:{components:[yi],examples:$u},"Filter Panel":{components:[rl,ol,il,ll],examples:cf},"Focused Task":{components:[rr,sr],examples:Hu},Form:{components:[ga],examples:Wu},Growlers:{description:()=>a.createElement("p",null,"Use Growlers for dynamic messages in response to a user's action. All Growlers have a Primary Message, and may optionally have a Secondary Message as needed. Growlers may also contain Hyperlinks in the Secondary Message."),components:[or],examples:Gu},Incrementor:{components:[wi],examples:Uu},"Insight Tiles":{components:[Yu,Ei],examples:LD},"Key Value Lists":{description:()=>a.createElement("p",null,"Key Value Lists consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),components:[Ci,xi],examples:zu},Label:{description:()=>a.createElement("p",null,"Labels provide a description for the value to be entered or selected in an accompanying input field."),components:[Di],examples:ju},"List Action Bar":{description:()=>a.createElement("p",null,"The List Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The List Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),components:[Ii],examples:hm},"List Toolbar":{description:()=>a.createElement("p",null,"The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),components:[Mi,lr,cr,_i],examples:ym},"Micro Block":{components:[en],examples:Tm},Modals:{description:()=>a.createElement("p",null,"Modals are overlays on a page that focus a user\u2019s attention on an important message or a simple action. Examples of a Modal include confirming the deletion of a record, or making a single selection."),components:[Ri,dr],examples:wm},"Multi Select":{description:()=>a.createElement("p",null,"Multi-Selects consist of a Label and a dropdown menu from which a user selects one or more values from a list of pre-defined options."),components:[Li],examples:Em},"Page Title":{components:[Oi,Bi],examples:Cm},Pagination:{description:()=>a.createElement("p",null,"The Pagination component allows users to navigate lists of records and control the number of records displayed on each page. The records can span across multiple pages, or within sections of a page."),components:[Ai,ur],examples:xm},"Product Bar":{components:[Pi,mr],examples:Dm},"Progress Bar":{description:()=>a.createElement("p",null,"Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),components:[Fi],examples:km},"Radio Buttons":{description:"Radio Buttons allow a user to make single selection from a list of predefined options.",components:[$i],examples:Mm},"Scrollable Container":{components:[Hi],examples:_m},"Search Results Bar":{components:[ir],examples:bm},Select:{description:"Selects consist off a Label and a dropdown menu from which a user selects a value from a list of pre-defined options.",components:[pr],examples:Rm},"Side Navigation":{description:"Side Navigations are used to provide quick access to a series of related pages or content. It can be used to navigate between different page views, or as an anchor-style menu to scroll to specific content on the same page.",components:[Om],examples:Bm},Spinner:{components:[us],examples:Am},"Split Button":{components:[Wi],examples:Pm},"Stepped Progress Bar":{components:[Vi],examples:Im},"Slack Link":{components:[Gi],examples:Fm},"Summary List Row":{components:[Ui,Yi,Va],examples:Km},Tables:{description:({NavigateTo:e})=>a.createElement(a.Fragment,null,a.createElement("div",{className:"sps-body-14"},"Tables (along with ",a.createElement(e,{to:"content-rows"},"Content Rows")," and"," ",a.createElement(e,{to:"content-tiles"},"Content Tiles"),") are one of three options for displaying a list of records on a page."),a.createElement("br",null),a.createElement("div",{className:"sps-body-14"},"Tables are the ideal solution for displaying tabular data, especially when the listed records contain a considerable amount of data points. While tables are primarily used to display an extensive list of records, often in a paginated format, they can also be used to display smaller sets of tabular data in any context.")),components:[Ln,hn,ae,fn,Qe,Be],examples:mm},Tags:{components:[xt],examples:fm},"Task Queue":{components:[zi],examples:Vm},"Text Inputs":{description:()=>a.createElement("p",null,"Text Inputs consist of a Label and a field in which a user enters a short value."),components:[gr],examples:$m},"Text Areas":{description:()=>a.createElement("p",null,"Text Areas consist of a Label and a field in which a user enters a long value."),components:[ji],examples:Hm},Toggle:{description:()=>a.createElement("p",null,"Toggles allow a user to immediately turn a setting on or off."),components:[Qi],examples:Ym},Tooltips:{components:[Dt,Ki],examples:Nm},Wizard:{components:[tl,nl],examples:Jm},Workflow:{components:[Sr,br,vr,yr],examples:of},"Zero States":{description:"Zero States are placeholders in content areas when there is no content to show. You can view all available illustrations on the Illustrations page.",components:[al,sl],examples:lf}},KN=function({viewing:e,in:t,onChange:n}){return a.createElement("div",{className:"sps-context-bar"},"Viewing",a.createElement("span",{className:"sps-context-bar__emphasized"},e),Boolean(t)&&a.createElement(a.Fragment,null,"in",a.createElement("span",{className:"sps-context-bar__emphasized"},t)),Boolean(n)&&a.createElement(Fe,{className:"sps-context-bar__change-button",kind:M.ButtonKind.LINK,onClick:n},"Change"))},VN={disabled:"boolean",formMeta:"SpsFormFieldMeta<number>",name:"string",onChange:"ChangeEventHandler<number>",value:"number"},$N=H(N({},Y),{disabled:T.exports.bool,formMeta:le(),name:T.exports.string,onChange:ne(),ref:Ft(),value:T.exports.number});function HN(e){return e?Number.parseInt(e.replace(/[^\d]/g,""),10)/100:null}function WN(e){return typeof e=="number"?e.toFixed(2):""}function pf(f){var m=f,{className:e,disabled:t=!1,formMeta:n,id:s,name:o,onChange:i,ref:c,title:l,value:p}=m,u=z(m,["className","disabled","formMeta","id","name","onChange","ref","title","value"]);const{wrapperId:g,controlId:S}=Tt(s,n),w=a.useRef();function x(k){n&&(n.setValue(k),n.markAsDirty()),i&&i(k)}function E(){x(null)}function I(k){x(HN(k.target.value))}function D(k){k.currentTarget.setSelectionRange(k.currentTarget.value.length,k.currentTarget.value.length)}const v=K("sps-text-input",e);return a.createElement(it,{id:g,className:v,formMeta:n,inputRef:w,ref:c},a.createElement("div",{className:K("sps-form-control",t&&"disabled")},a.createElement(Rt,{className:"sps-text-input__icon",icon:M.SpsIcon.DOLLAR_SIGN}),a.createElement("input",N({type:"text",ref:w,onFocus:D,className:"sps-text-input__input",id:S,name:o,placeholder:"0.00",onChange:I,title:l,value:WN(p),disabled:t},u)),p!==null&&!t&&a.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:E})))}Object.assign(pf,{props:VN,propTypes:$N,displayName:"SpsCurrencyInput"});const GN={basic:{label:"Basic",examples:{basic:{react:y.code`
                     function DemoComponent() {
                         const { formValue, formMeta, updateForm } = useSpsForm({
                           foo: 1.2,

package/lib/index.es.js

@@ -24832,7 +24832,7 @@ Object.assign(SpsKeyValueListItem, {
 });
 const SpsKeyValueListExamples = {
   vertical: {
-    label: "Vertical Key Value Sets",
+    label: "Vertical Key Value Lists",
     description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
       className: "mb-2"
     }, "Vertical containers such as a side bar or general card")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
@@ -24931,7 +24931,7 @@ const SpsKeyValueListExamples = {
     }
   },
   horizontal: {
-    label: "Horizontal Key Value Sets",
+    label: "Horizontal Key Value Lists",
     description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
       className: "mb-2"
     }, "Horizontal containers such as a content row")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
@@ -24948,7 +24948,7 @@ const SpsKeyValueListExamples = {
       className: "mb-2"
     }, "Can be used individually or stacked on top of one another", /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
       className: "mb-2"
-    }, "When stacking, the value sets should share a common category or theme"))))),
+    }, "When stacking, the value lists should share a common category or theme"))))),
     examples: {
       standard: {
         description: () => /* @__PURE__ */ React__default.createElement("h4", null, "Standard"),
@@ -24965,7 +24965,7 @@ const SpsKeyValueListExamples = {
         `
       },
       stacked: {
-        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Stacked"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " There is no limit to the number of stacked listings, but more than three in a single container should be avoided."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Titles are right-aligned in the horizontal Key Value Sets to optimize scanability of the values.")),
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Stacked"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " There is no limit to the number of stacked listings, but more than three in a single container should be avoided."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Titles are right-aligned in the horizontal Key Value Lists to optimize scanability of the values.")),
         react: code`
           function DemoComponent() {
             return (
@@ -38158,7 +38158,7 @@ const MANIFEST = {
     examples: SpsInsightTileExamples
   },
   "Key Value Lists": {
-    description: () => /* @__PURE__ */ React.createElement("p", null, "Key Value Sets consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Key Value Lists consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),
     components: [SpsKeyValueList, SpsKeyValueListItem],
     examples: SpsKeyValueListExamples
   },

package/package.json

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