(window["webpackJsonp@visa/vds-react"]=window["webpackJsonp@visa/vds-react"]||[]).push([[19],{282:function(e,t,a){"use strict";a.r(t);var n=a(84),l=a(516),r=a(0),c=a.n(r),s=a(3),o=a.n(s),i=a(519),d=a(518),u=a(37),m=a(8),b=a(507),p=a(17),f=a(23),h=a(16),v=a(508),x=a(61),y=a(133),g=a(509),C=a(510),I=a(511),E=a(512),O=a(513),L=a(7),j=a(2),V=a(651),w=a(608),k=a(816),S=a(609);function N(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function T(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?N(a,!0).forEach((function(t){Object(j.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):N(a).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}var R=function(){var e=Object(r.useState)({items:[{label:"Silver Signature Card",value:"silver-signature-card"},{label:"Visa Signature Card",value:"visa-signature-card"},{label:"Platinum Visa Card",value:"platinum-visa-card"},{label:"Premium Card",value:"premium-card"},{label:"Another Card",value:"another-card"},{label:"Other Card",value:"other-card"},{label:"Secondary Card",value:"secondary-card"},{label:"Tertiary Card",value:"tertiary-card"},{label:"Gold Signature Card",value:"gold-signature-card"},{label:"Yet Another Card",value:"yet-another-card"},{label:"Last Card",value:"last-card"}],selected:""}),t=Object(n.a)(e,2),a=t[0],l=t[1],s=Object(r.useState)({items:[{label:"Silver Signature Card",value:"silver-signature-card"},{label:"Visa Signature Card",value:"visa-signature-card"},{label:"Platinum Visa Card",value:"platinum-visa-card"},{label:"Premium Card",value:"premium-card"},{label:"Another Card",value:"another-card"},{label:"Other Card",value:"other-card"},{label:"Secondary Card",value:"secondary-card"},{label:"Tertiary Card",value:"tertiary-card"},{label:"Gold Signature Card",value:"gold-signature-card"},{label:"Yet Another Card",value:"yet-another-card"},{label:"Last Card",value:"last-card"}],selected:""}),o=Object(n.a)(s,2),i=o[0],d=o[1];return c.a.createElement(f.a,null,c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(L.a,{tag:"h2"},"Listbox Stateless for composing different list boxes to meet requirements"),c.a.createElement(L.a,null,"No functionality."))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(w.a,null,c.a.createElement(S.a,null,"Visa Signature Card"),c.a.createElement(S.a,null,"Platinum Visa Card")))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(L.a,{tag:"h2"},"Listbox with Listbox Container Wrapper for functionality"))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(k.a,{label:"Select your card type",name:"listbox-container-demo-1"},c.a.createElement(w.a,null,c.a.createElement(S.a,{listItemValue:"visa-signature-card"},"Visa Signature Card"),c.a.createElement(S.a,{listItemValue:"platinum-visa-card"},"Platinum Visa Card"),c.a.createElement(S.a,{listItemValue:"premium-card"},"Premium Card"),c.a.createElement(S.a,{listItemValue:"another-card"},"Another Card"),c.a.createElement(S.a,{listItemValue:"other-card"},"Other Card"),c.a.createElement(S.a,{listItemValue:"secondary-card"},"Secondary Card"),c.a.createElement(S.a,{listItemValue:"tertiary-card"},"Tertiary Card"),c.a.createElement(S.a,{listItemValue:"gold-signature-card"},"Gold Signature Card"),c.a.createElement(S.a,{listItemValue:"yet-another-card"},"Yet Another Card"),c.a.createElement(S.a,{listItemValue:"last-card"},"Last Card"))))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(L.a,{tag:"h2"},"Listbox with Listbox Container Wrapper for functionality (Multiselect)"))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(k.a,{label:"Select your card type",name:"listbox-container-demo-2"},c.a.createElement(w.a,{multiselect:!0},c.a.createElement(S.a,{listItemValue:"visa-signature-card"},c.a.createElement(V.a,{label:"Visa Signature Card",name:"listbox-checkbox",tabIndex:"-1"})),c.a.createElement(S.a,{listItemValue:"platinum-visa-card"},c.a.createElement(V.a,{label:"Platinum Visa Card",name:"listbox-checkbox",tabIndex:"-1"})),c.a.createElement(S.a,{disabled:!0,listItemValue:"premium-card"},c.a.createElement(V.a,{disabled:!0,label:"Premium Card",name:"listbox-checkbox",tabIndex:"-1"})),c.a.createElement(S.a,{listItemValue:"another-card"},c.a.createElement(V.a,{label:"Another Card",name:"listbox-checkbox",tabIndex:"-1"})),c.a.createElement(S.a,{listItemValue:"other-card"},c.a.createElement(V.a,{label:"Other Card",name:"listbox-checkbox",tabIndex:"-1"})),c.a.createElement(S.a,{listItemValue:"secondary-card"},c.a.createElement(V.a,{label:"Secondary Card",name:"listbox-checkbox",tabIndex:"-1"})),c.a.createElement(S.a,{disabled:!0,listItemValue:"tertiary-card"},c.a.createElement(V.a,{disabled:!0,label:"Tertiary Card",name:"listbox-checkbox",tabIndex:"-1"})),c.a.createElement(S.a,{listItemValue:"gold-signature-card"},c.a.createElement(V.a,{label:"Gold Signature Card",name:"listbox-checkbox",tabIndex:"-1"})),c.a.createElement(S.a,{listItemValue:"yet-another-card"},c.a.createElement(V.a,{label:"Yet Another Card",name:"listbox-checkbox",tabIndex:"-1"})),c.a.createElement(S.a,{listItemValue:"last-card"},c.a.createElement(V.a,{label:"Last Card",name:"listbox-checkbox",tabIndex:"-1"})))))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(L.a,{tag:"h2"},"Listbox with Data and onSelect event"))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(k.a,{label:a.selected?"Value selected ".concat(a.selected):"Select your card type",name:"listbox-container-demo-3",onSelect:function(e){var t=e.selected;return l(T({},a,{selected:t.join(", ")}))}},c.a.createElement(w.a,null,a.items.map((function(e,t){return c.a.createElement(S.a,{key:t,listItemValue:e.value},e.label)})))))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(L.a,{tag:"h2"},"Listbox Multiselect with Data and onSelect event"))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(k.a,{label:i.selected?"Value selected ".concat(i.selected):"Select your card type",name:"listbox-container-demo-5",onSelect:function(e){var t=e.selected;return d(T({},i,{selected:t.join(", ")}))}},c.a.createElement(w.a,{multiselect:!0},i.items.map((function(e,t){return c.a.createElement(S.a,{key:t,listItemValue:e.value},c.a.createElement(V.a,{label:e.label,name:"listbox-checkbox-multi-2",tabIndex:"-1"}))})))))))},P=a(517),B="import React, { forwardRef } from 'react';\nimport { bool, node, string } from 'prop-types';\nimport classnames from 'classnames';\n\nconst CSS_PREFIX = 'vds-listbox';\n\nconst Listbox = forwardRef(({\n  children,\n  className,\n  multiselect,\n  role,\n  ...remainingProps\n}, ref) => (\n  <ul\n    className={classnames(CSS_PREFIX, {\n      'vds-select--multi': Boolean(multiselect)\n    }, className)}\n    ref={ref}\n    role={role}\n    {...remainingProps}\n  >\n    {children}\n  </ul>\n));\n\nListbox.propTypes = {\n  /**\n  * @ignore\n  */\n  children: node,\n\n  /**\n   * @ignore\n   */\n  className: string,\n\n  /**\n   * Multi select\n   */\n  multiselect: bool,\n\n  /**\n   * Role\n   */\n  role: string\n};\n\nListbox.defaultProps = {\n  role: 'listbox'\n};\n\nListbox.displayName = 'Listbox';\n\nexport default Listbox;\n".replace("= memo(({","= React.forwardRef(({").replace("cloneElement(","React.cloneElement("),A='import React, { useState } from \'react\';\nimport Checkbox from \'../../checkbox\';\nimport Col from \'../../col\';\nimport Grid from \'../../grid\';\nimport Listbox from \'../../listbox\';\nimport ListboxContainer from \'../../listbox-container\';\nimport ListboxItem from \'../../listbox-item\';\nimport Row from \'../../row\';\nimport Typography from \'../../typography\';\n\nconst ListboxExample = () => {\n  const [stateOne, setStateOne] = useState({\n    items: [\n      {\n        label: \'Silver Signature Card\',\n        value: \'silver-signature-card\'\n      }, {\n        label: \'Visa Signature Card\',\n        value: \'visa-signature-card\'\n      }, {\n        label: \'Platinum Visa Card\',\n        value: \'platinum-visa-card\'\n      }, {\n        label: \'Premium Card\',\n        value: \'premium-card\'\n      }, {\n        label: \'Another Card\',\n        value: \'another-card\'\n      }, {\n        label: \'Other Card\',\n        value: \'other-card\'\n      }, {\n        label: \'Secondary Card\',\n        value: \'secondary-card\'\n      }, {\n        label: \'Tertiary Card\',\n        value: \'tertiary-card\'\n      }, {\n        label: \'Gold Signature Card\',\n        value: \'gold-signature-card\'\n      }, {\n        label: \'Yet Another Card\',\n        value: \'yet-another-card\'\n      }, {\n        label: \'Last Card\',\n        value: \'last-card\'\n      }\n    ],\n    selected: \'\'\n  });\n\n  const [stateTwo, setStateTwo] = useState({\n    items: [\n      {\n        label: \'Silver Signature Card\',\n        value: \'silver-signature-card\'\n      }, {\n        label: \'Visa Signature Card\',\n        value: \'visa-signature-card\'\n      }, {\n        label: \'Platinum Visa Card\',\n        value: \'platinum-visa-card\'\n      }, {\n        label: \'Premium Card\',\n        value: \'premium-card\'\n      }, {\n        label: \'Another Card\',\n        value: \'another-card\'\n      }, {\n        label: \'Other Card\',\n        value: \'other-card\'\n      }, {\n        label: \'Secondary Card\',\n        value: \'secondary-card\'\n      }, {\n        label: \'Tertiary Card\',\n        value: \'tertiary-card\'\n      }, {\n        label: \'Gold Signature Card\',\n        value: \'gold-signature-card\'\n      }, {\n        label: \'Yet Another Card\',\n        value: \'yet-another-card\'\n      }, {\n        label: \'Last Card\',\n        value: \'last-card\'\n      }\n    ],\n    selected: \'\'\n  });\n\n  const handleOnSelectOne = ({ selected }) => setStateOne({\n    ...stateOne,\n    selected: selected.join(\', \')\n  });\n  const handleOnSelectTwo = ({ selected }) => setStateTwo({\n    ...stateTwo,\n    selected: selected.join(\', \')\n  });\n\n  return (\n    <Grid>\n      <Row>\n        <Col>\n          <Typography tag="h2">Listbox Stateless for composing different list boxes to meet requirements</Typography>\n          <Typography>No functionality.</Typography>\n        </Col>\n      </Row>\n      <Row>\n        <Col>\n          <Listbox>\n            <ListboxItem>\n              Visa Signature Card\n            </ListboxItem>\n            <ListboxItem>\n              Platinum Visa Card\n            </ListboxItem>\n          </Listbox>\n        </Col>\n      </Row>\n      <Row>\n        <Col>\n          <Typography tag="h2">Listbox with Listbox Container Wrapper for functionality</Typography>\n        </Col>\n      </Row>\n      <Row>\n        <Col>\n          <ListboxContainer label="Select your card type" name="listbox-container-demo-1">\n            <Listbox>\n              <ListboxItem listItemValue="visa-signature-card">Visa Signature Card</ListboxItem>\n              <ListboxItem listItemValue="platinum-visa-card">Platinum Visa Card</ListboxItem>\n              <ListboxItem listItemValue="premium-card">Premium Card</ListboxItem>\n              <ListboxItem listItemValue="another-card">Another Card</ListboxItem>\n              <ListboxItem listItemValue="other-card">Other Card</ListboxItem>\n              <ListboxItem listItemValue="secondary-card">Secondary Card</ListboxItem>\n              <ListboxItem listItemValue="tertiary-card">Tertiary Card</ListboxItem>\n              <ListboxItem listItemValue="gold-signature-card">Gold Signature Card</ListboxItem>\n              <ListboxItem listItemValue="yet-another-card">Yet Another Card</ListboxItem>\n              <ListboxItem listItemValue="last-card">Last Card</ListboxItem>\n            </Listbox>\n          </ListboxContainer>\n        </Col>\n      </Row>\n      <Row>\n        <Col>\n          <Typography tag="h2">Listbox with Listbox Container Wrapper for functionality (Multiselect)</Typography>\n        </Col>\n      </Row>\n      <Row>\n        <Col>\n          <ListboxContainer label="Select your card type" name="listbox-container-demo-2">\n            <Listbox multiselect>\n              <ListboxItem listItemValue="visa-signature-card">\n                <Checkbox label="Visa Signature Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n              <ListboxItem listItemValue="platinum-visa-card">\n                <Checkbox label="Platinum Visa Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n              <ListboxItem disabled listItemValue="premium-card">\n                <Checkbox disabled label="Premium Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n              <ListboxItem listItemValue="another-card">\n                <Checkbox label="Another Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n              <ListboxItem listItemValue="other-card">\n                <Checkbox label="Other Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n              <ListboxItem listItemValue="secondary-card">\n                <Checkbox label="Secondary Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n              <ListboxItem disabled listItemValue="tertiary-card">\n                <Checkbox disabled label="Tertiary Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n              <ListboxItem listItemValue="gold-signature-card">\n                <Checkbox label="Gold Signature Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n              <ListboxItem listItemValue="yet-another-card">\n                <Checkbox label="Yet Another Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n              <ListboxItem listItemValue="last-card">\n                <Checkbox label="Last Card" name="listbox-checkbox" tabIndex="-1" />\n              </ListboxItem>\n            </Listbox>\n          </ListboxContainer>\n        </Col>\n      </Row>\n      <Row>\n        <Col>\n          <Typography tag="h2">Listbox with Data and onSelect event</Typography>\n        </Col>\n      </Row>\n      <Row>\n        <Col>\n          <ListboxContainer\n            label={stateOne.selected ? `Value selected ${stateOne.selected}` : \'Select your card type\'}\n            name="listbox-container-demo-3"\n            onSelect={handleOnSelectOne}\n          >\n            <Listbox>\n              {\n                stateOne.items.map((item, k) => (\n                  <ListboxItem key={k} listItemValue={item.value}>{item.label}</ListboxItem>\n                ))\n              }\n            </Listbox>\n          </ListboxContainer>\n        </Col>\n      </Row>\n      <Row>\n        <Col>\n          <Typography tag="h2">Listbox Multiselect with Data and onSelect event</Typography>\n        </Col>\n      </Row>\n      <Row>\n        <Col>\n          <ListboxContainer\n            label={stateTwo.selected ? `Value selected ${stateTwo.selected}` : \'Select your card type\'}\n            name="listbox-container-demo-5"\n            onSelect={handleOnSelectTwo}\n          >\n            <Listbox multiselect>\n              {\n                stateTwo.items.map((item, k) => (\n                  <ListboxItem key={k} listItemValue={item.value}>\n                    <Checkbox label={item.label} name="listbox-checkbox-multi-2" tabIndex="-1" />\n                  </ListboxItem>\n                ))\n              }\n            </Listbox>\n          </ListboxContainer>\n        </Col>\n      </Row>\n    </Grid>\n  );\n};\n\nexport default ListboxExample;\n'.replace(/'..\/..\//g,"'@visa/vds-react/"),D=function(e){var t=Object(l.a)({},e),a=Object(r.useState)({}),s=Object(n.a)(a,2),j=s[0],V=s[1];return Object(r.useEffect)((function(){try{V(P.parse(B))}catch(e){console.log("\n        React-docgen could not parse props for Listbox\n        check for fix here https://github.com/reactjs/react-docgen/issues/342")}}),[]),c.a.createElement(f.a,{siblingOfStickyFooter:!0},c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(L.a,{tag:"h1"},"Listbox"))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(y.a,null,c.a.createElement(x.a,{tag:c.a.createElement(u.c,{exact:!0,to:"".concat("/vds-react","/components/listbox"),activeClassName:"vds-state--selected"})},c.a.createElement(p.a,{name:"log",resolution:"low"}),"Listbox Example"),c.a.createElement(x.a,{tag:c.a.createElement(u.c,{exact:!0,to:"".concat("/vds-react","/components/listbox/code"),activeClassName:"vds-state--selected"})},c.a.createElement(p.a,{name:"code-fork-code-alt",resolution:"low"}),"Code for Listbox Example")))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement("div",{className:o()({"vds-state--hidden":t.match.path==="".concat("/vds-react","/components/listbox/code"),"vds-state--show":t.match.path!=="".concat("/vds-react","/components/listbox/code")})},c.a.createElement(R,t)),c.a.createElement("div",{className:o()({"vds-state--hidden":t.match.path!=="".concat("/vds-react","/components/listbox/code"),"vds-state--show":t.match.path==="".concat("/vds-react","/components/listbox/code")})},c.a.createElement(i.a,Object.assign({},i.b,{theme:d.a,code:A,language:"jsx"}),(function(e){var t=e.className,a=e.style,n=e.tokens,l=e.getLineProps,r=e.getTokenProps;return c.a.createElement("pre",{className:t,style:a},n.map((function(e,t){return c.a.createElement("div",l({key:t,line:e}),c.a.createElement("span",{style:{display:"inline-block",opacity:"0.3",userSelect:"none",width:"2em"}},t+1),e.map((function(e,t){return c.a.createElement("span",r({key:t,token:e}))})))})))}))))),c.a.createElement(h.a,null,c.a.createElement(m.a,null,c.a.createElement(b.a,{className:o()(["components"]),dividerLines:!0,size:"compact"},c.a.createElement(v.a,{tag:"caption"},"Props"),c.a.createElement(E.a,null,c.a.createElement(O.a,{className:"vds-tr"},c.a.createElement(I.a,{"aria-sort":"none",role:"columnheader",scope:"col"},"Prop"),c.a.createElement(I.a,{"aria-sort":"none",role:"columnheader",scope:"col"},"Type"),c.a.createElement(I.a,{"aria-sort":"none",role:"columnheader",scope:"col"},"Default"),c.a.createElement(I.a,{"aria-sort":"none",role:"columnheader",scope:"col"},"Description"))),c.a.createElement(g.a,null,j.props&&Object.entries(j.props).filter((function(e){return"@ignore"!==e[1].description})).map((function(e,t){return c.a.createElement(O.a,{className:"vds-tr",key:t,tabIndex:"0"},c.a.createElement(C.a,{className:"vds-td"},e[0]," ",e[1].required?c.a.createElement("sup",{style:{color:"red"}}," required"):""),c.a.createElement(C.a,{className:"vds-td"},c.a.createElement("strong",null,e[1].type.name),e[1].type.value&&e[1].type.value.length?c.a.createElement("small",{style:{color:"#1a1f71"}},c.a.createElement("br",null),e[1].type.value.length?e[1].type.value.map((function(e){return e.value||e.name})).join(", "):void 0):""),c.a.createElement(C.a,{className:"vds-td"},e[1].defaultValue?e[1].defaultValue.value:""),c.a.createElement(C.a,{className:"vds-td"},e[1].description))})))))))};D.displayName="ListboxExample";t.default=D},507:function(e,t,a){"use strict";var n=a(2),l=a(5),r=a(0),c=a.n(r),s=a(4),o=a(3),i=a.n(o),d=Object(r.forwardRef)((function(e,t){var a,r=e.children,s=e.className,o=e.customizableColumns,d=e.dividerLines,u=e.keyValuePairs,m=e.reveal,b=e.revealFirstColumn,p=e.revealLastColumn,f=e.rowSelection,h=e.size,v=e.stickyHeader,x=Object(l.a)(e,["children","className","customizableColumns","dividerLines","keyValuePairs","reveal","revealFirstColumn","revealLastColumn","rowSelection","size","stickyHeader"]);return c.a.createElement("table",Object.assign({},x,{className:i()("vds-data-table",(a={},Object(n.a)(a,"".concat("vds-state","--customizable-columns"),Boolean(o)),Object(n.a)(a,"".concat("vds-state","--divider-lines"),Boolean(d)),Object(n.a)(a,"".concat("vds-state","--key-value-pairs"),Boolean(u)),Object(n.a)(a,"".concat("vds-state","--").concat(h),Boolean(h)),Object(n.a)(a,"".concat("vds-state","--reveal"),Boolean(m)),Object(n.a)(a,"".concat("vds-state","--reveal-first-column"),Boolean(b)),Object(n.a)(a,"".concat("vds-state","--reveal-last-column"),Boolean(p)),Object(n.a)(a,"".concat("vds-state","--").concat(f),Boolean(f)),Object(n.a)(a,"".concat("vds-state","--sticky-header"),Boolean(v)),a),s),ref:t}),r)}));d.propTypes={children:s.node,className:s.string,columns:Object(s.arrayOf)(Object(s.shape)({})),customizableColumns:s.bool,data:Object(s.arrayOf)(Object(s.shape)({})),dividerLines:s.bool,keyValuePairs:s.bool,reveal:s.bool,revealFirstColumn:s.bool,revealLastColumn:s.bool,rowSelection:Object(s.oneOf)(["multi-select","single-select"]),size:Object(s.oneOf)(["compact"]),stickyHeader:s.bool},d.displayName="DataTable",t.a=d},508:function(e,t,a){"use strict";var n=a(5),l=a(0),r=a.n(l),c=a(4),s=a(3),o=a.n(s),i=Object(l.forwardRef)((function(e,t){var a=e.children,l=e.className,c=e.tag,s=Object(n.a)(e,["children","className","tag"]);return r.a.createElement(c,Object.assign({className:o()("vds-sr",l),ref:t},s),a)}));i.propTypes={children:c.node,className:c.string,tag:c.elementType},i.defaultProps={tag:"span"},i.displayName="Sr",t.a=i},509:function(e,t,a){"use strict";var n=a(5),l=a(0),r=a.n(l),c=a(4),s=a(3),o=a.n(s),i=Object(l.forwardRef)((function(e,t){var a=e.children,l=e.className,c=Object(n.a)(e,["children","className"]);return r.a.createElement("tbody",Object.assign({className:o()("vds-tbody",l),ref:t},c),a)}));i.propTypes={children:c.node,className:c.string},i.displayName="Tbody",t.a=i},510:function(e,t,a){"use strict";var n=a(2),l=a(5),r=a(0),c=a.n(r),s=a(4),o=a(3),i=a.n(o),d=Object(r.forwardRef)((function(e,t){var a=e.children,r=e.className,s=e.textAlign,o=Object(l.a)(e,["children","className","textAlign"]);return c.a.createElement("td",Object.assign({className:i()("vds-td",Object(n.a)({},"vds-text--".concat(s),Boolean(s)),r),ref:t},o),a)}));d.propTypes={children:s.node,className:s.string,textAlign:Object(s.oneOf)(["center","left","right"])},d.displayName="Td",t.a=d},511:function(e,t,a){"use strict";var n=a(5),l=a(0),r=a.n(l),c=a(4),s=a(3),o=a.n(s),i=Object(l.forwardRef)((function(e,t){var a=e.children,l=e.className,c=Object(n.a)(e,["children","className"]);return r.a.createElement("th",Object.assign({className:o()("vds-th",l),ref:t},c),a)}));i.propTypes={children:c.node,className:c.string},i.displayName="Th",t.a=i},512:function(e,t,a){"use strict";var n=a(5),l=a(0),r=a.n(l),c=a(4),s=a(3),o=a.n(s),i=Object(l.forwardRef)((function(e,t){var a=e.children,l=e.className,c=Object(n.a)(e,["children","className"]);return r.a.createElement("thead",Object.assign({className:o()("vds-thead",l),ref:t},c),a)}));i.propTypes={children:c.node,className:c.string},i.displayName="Thead",t.a=i},513:function(e,t,a){"use strict";var n=a(5),l=a(0),r=a.n(l),c=a(4),s=a(3),o=a.n(s),i=Object(l.forwardRef)((function(e,t){var a=e.children,l=e.className,c=Object(n.a)(e,["children","className"]);return r.a.createElement("tr",Object.assign({className:o()("vds-tr",l),ref:t},c),a)}));i.propTypes={children:c.node,className:c.string},i.displayName="Tr",t.a=i},514:function(e,t,a){"use strict";var n,l,r,c=a(525),s="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-";function o(){r=!1}function i(e){if(e){if(e!==n){if(e.length!==s.length)throw new Error("Custom alphabet for shortid must be "+s.length+" unique characters. You submitted "+e.length+" characters: "+e);var t=e.split("").filter((function(e,t,a){return t!==a.lastIndexOf(e)}));if(t.length)throw new Error("Custom alphabet for shortid must be "+s.length+" unique characters. These characters were not unique: "+t.join(", "));n=e,o()}}else n!==s&&(n=s,o())}function d(){return r||(r=function(){n||i(s);for(var e,t=n.split(""),a=[],l=c.nextValue();t.length>0;)l=c.nextValue(),e=Math.floor(l*t.length),a.push(t.splice(e,1)[0]);return a.join("")}())}e.exports={get:function(){return n||s},characters:function(e){return i(e),n},seed:function(e){c.seed(e),l!==e&&(o(),l=e)},lookup:function(e){return d()[e]},shuffled:d}},520:function(e,t){},521:function(e,t,a){"use strict";e.exports=a(524)},524:function(e,t,a){"use strict";var n=a(514),l=a(526),r=a(530),c=a(531)||0;function s(){return l(c)}e.exports=s,e.exports.generate=s,e.exports.seed=function(t){return n.seed(t),e.exports},e.exports.worker=function(t){return c=t,e.exports},e.exports.characters=function(e){return void 0!==e&&n.characters(e),n.shuffled()},e.exports.isValid=r},525:function(e,t,a){"use strict";var n=1;e.exports={nextValue:function(){return(n=(9301*n+49297)%233280)/233280},seed:function(e){n=e}}},526:function(e,t,a){"use strict";var n,l,r=a(527),c=(a(514),1567752802062),s=7;e.exports=function(e){var t="",a=Math.floor(.001*(Date.now()-c));return a===l?n++:(n=0,l=a),t+=r(s),t+=r(e),n>0&&(t+=r(n)),t+=r(a)}},527:function(e,t,a){"use strict";var n=a(514),l=a(528),r=a(529);e.exports=function(e){for(var t,a=0,c="";!t;)c+=r(l,n.get(),1),t=e<Math.pow(16,a+1),a++;return c}},528:function(e,t,a){"use strict";var n,l="object"===typeof window&&(window.crypto||window.msCrypto);n=l&&l.getRandomValues?function(e){return l.getRandomValues(new Uint8Array(e))}:function(e){for(var t=[],a=0;a<e;a++)t.push(Math.floor(256*Math.random()));return t},e.exports=n},529:function(e,t){e.exports=function(e,t,a){var n=(2<<Math.log(t.length-1)/Math.LN2)-1,l=Math.ceil(1.6*n*a/t.length);a=+a;for(var r="";;)for(var c=e(l),s=0;s<l;s++){var o=c[s]&n;if(t[o]&&(r+=t[o]).length===a)return r}}},530:function(e,t,a){"use strict";var n=a(514);e.exports=function(e){return!(!e||"string"!==typeof e||e.length<6)&&!new RegExp("[^"+n.get().replace(/[|\\{}()[\]^$+*?.-]/g,"\\$&")+"]").test(e)}},531:function(e,t,a){"use strict";e.exports=0},608:function(e,t,a){"use strict";var n=a(5),l=a(0),r=a.n(l),c=a(4),s=a(3),o=a.n(s),i=Object(l.forwardRef)((function(e,t){var a=e.children,l=e.className,c=e.multiselect,s=e.role,i=Object(n.a)(e,["children","className","multiselect","role"]);return r.a.createElement("ul",Object.assign({className:o()("vds-listbox",{"vds-select--multi":Boolean(c)},l),ref:t,role:s},i),a)}));i.propTypes={children:c.node,className:c.string,multiselect:c.bool,role:c.string},i.defaultProps={role:"listbox"},i.displayName="Listbox",t.a=i},609:function(e,t,a){"use strict";var n=a(2),l=a(5),r=a(0),c=a.n(r),s=a(4),o=a(3),i=a.n(o),d=Object(r.forwardRef)((function(e,t){var a,r=e.active,s=e.children,o=e.className,d=e.disabled,u=e.focus,m=e.listItemValue,b=e.role,p=e.selected,f=Object(l.a)(e,["active","children","className","disabled","focus","listItemValue","role","selected"]);return c.a.createElement("li",Object.assign({className:i()("vds-listbox-item",(a={},Object(n.a)(a,"".concat("vds-state","--active"),Boolean(r)),Object(n.a)(a,"".concat("vds-state","--disabled"),Boolean(d)),Object(n.a)(a,"".concat("vds-state","--focus"),Boolean(u)),Object(n.a)(a,"".concat("vds-state","--selected"),Boolean(p)),a),o),"data-list-item-value":m,ref:t,role:b},f),s)}));d.propTypes={active:s.bool,children:s.node,className:s.string,disabled:s.bool,focus:s.bool,listItemValue:s.string,role:s.string,selected:s.bool},d.defaultProps={role:"option"},d.displayName="ListboxItem",t.a=d},651:function(e,t,a){"use strict";var n=a(2),l=a(84),r=a(5),c=a(0),s=a.n(c),o=a(3),i=a.n(o),d=a(521),u=a.n(d),m=Object(c.forwardRef)((function(e,t){var a,o=e.className,d=e.disabled,m=e.id,b=void 0===m?u.a.generate():m,p=e.indeterminate,f=e.invalid,h=e.label,v=e.onBlur,x=e.onChange,y=e.onFocus,g=Object(r.a)(e,["className","disabled","id","indeterminate","invalid","label","onBlur","onChange","onFocus"]),C=Object(c.useState)(),I=Object(l.a)(C,2),E=I[0],O=I[1],L=Object(c.useState)(g.checked||g.defaultChecked),j=Object(l.a)(L,2),V=j[0],w=j[1],k=Object(c.useState)(p),S=Object(l.a)(k,2),N=S[0],T=S[1],R=Object(c.useRef)(b).current;Object(c.useEffect)((function(){T(p)}),[p]),Object(c.useEffect)((function(){"undefined"!==typeof g.defaultChecked&&w(g.defaultChecked)}),[g.defaultChecked]),Object(c.useEffect)((function(){"undefined"!==typeof g.checked&&w(g.checked)}),[g.checked]);return s.a.createElement(c.Fragment,null,s.a.createElement("input",Object.assign({className:i()("vds-checkbox",o),disabled:d,id:R,onBlur:function(e){O(!1),"function"===typeof v&&v(e)},onChange:function(e){T(!1),w(e.target.checked),"function"===typeof x&&x(e)},onFocus:function(e){O(!0),"function"===typeof y&&y(e)},ref:t,type:"checkbox"},g)),s.a.createElement("label",{className:i()("".concat("vds-checkbox","-label"),(a={},Object(n.a)(a,"".concat("vds-state","--checked"),Boolean(V)),Object(n.a)(a,"".concat("vds-state","--disabled"),Boolean(d)),Object(n.a)(a,"".concat("vds-state","--focus"),Boolean(E)),Object(n.a)(a,"".concat("vds-state","--indeterminate"),N&&!V),Object(n.a)(a,"".concat("vds-state","--invalid"),Boolean(f)),a)),htmlFor:R,onClick:function(e){return e.stopPropagation()}},h))}));m.displayName="Checkbox",t.a=m},816:function(e,t,a){"use strict";var n=a(135),l=a(84),r=a(5),c=a(0),s=a.n(c),o=a(3),i=a.n(o),d=a(521),u=a.n(d),m=a(4),b=Object(c.forwardRef)((function(e,t){var a=e.children,n=e.className,l=Object(r.a)(e,["children","className"]);return s.a.createElement("label",Object.assign({className:i()("vds-listbox-label",n),ref:t},l),a)}));b.propTypes={children:m.node,className:m.string},b.displayName="ListboxLabel";var p=b,f=Object(c.forwardRef)((function(e,t){var a=e.className,n=e.type,l=Object(r.a)(e,["className","type"]);return s.a.createElement("input",Object.assign({className:i()("vds-listbox-input",a),ref:t,type:n},l))}));f.propTypes={className:m.string,type:m.string},f.defaultProps={type:"hidden"},f.displayName="ListboxInput";var h=f,v=40,x=35,y=36,g=13,C=32,I=9,E=38,O=function(e){for(var t=e.char,a=e.count,n=e.focusableItems,l=e.start;l<a;l++)if(t===n[l].textContent.trim().toLowerCase().substring(0,1))return l;return-1},L=Object(c.forwardRef)((function(e,t){var a=e.children,o=e.className,d=e.id,m=void 0===d?u.a.generate():d,b=e.label,f=e.name,L=e.onSelect,j=e.selectedListItems,V=e.tabIndex,w=Object(r.a)(e,["children","className","id","label","name","onSelect","selectedListItems","tabIndex"]),k=Object(c.useState)(["platinum-visa-card"]),S=Object(l.a)(k,2),N=S[0],T=S[1],R=Object(c.useState)([]),P=Object(l.a)(R,2),B=P[0],A=P[1],D=Object(c.useState)(void 0),M=Object(l.a)(D,2),F=M[0],G=M[1],Y=Object(c.useState)(),q=Object(l.a)(Y,2),z=q[0],H=q[1],K=Object(c.useRef)(m).current,W=Object(c.useRef)();Object(c.useEffect)((function(){W.current&&A(W.current.querySelectorAll("ul > li:not(.vds-state--disabled)"))}),[]),Object(c.useEffect)((function(){T(j)}),[j]);var $=function(e){var t=e.currentTarget.dataset.listItemValue,a=!!W.current&&W.current.classList.contains("vds-select--multi"),l=Object(n.a)(B).indexOf(e.currentTarget),r=[];if(G(l),H(t),a){var c=N.includes(t);a&&c&&(r=Object(n.a)(N.filter((function(e){return e!==t})))),a&&!c&&(r=[].concat(Object(n.a)(N),[t]))}a||(r=[t]),T(r),"function"===typeof L&&L({selected:r})};return s.a.createElement("div",Object.assign({className:i()("vds-listbox-container",o),id:K,ref:t},w),b?s.a.createElement(p,{id:"".concat("vds-listbox-container","-listbox--label-").concat(K),htmlFor:"".concat("vds-listbox-container","-listbox-").concat(K)},b):void 0,s.a.createElement(h,{name:f,value:N.join(",")}),Object(c.cloneElement)(a,{"aria-activedescendant":F?"".concat("vds-listbox-container","-listbox-item-").concat(K,"-").concat(F):void 0,"aria-labelledby":b?"".concat("vds-listbox-container","-listbox--label-").concat(K):void 0,"aria-multiselectable":a.props.multiselect?"true":void 0,children:c.Children.map(a.props.children,(function(e,t){return Object(c.cloneElement)(e,{"aria-selected":e.props.listItemValue&&N.includes(e.props.listItemValue)?"true":"false",children:a.props.multiselect?c.Children.map(e.props.children,(function(a,n){return Object(c.cloneElement)(a,{checked:N.includes(e.props.listItemValue),key:"".concat(K,"-").concat(t,"-").concat(n),value:e.props.listItemValue})})):e.props.children,focus:a.props.multiselect?e.props.listItemValue===z:void 0,id:"".concat("vds-listbox-container","-listbox-item-").concat(K,"-").concat(t),key:"".concat(K,"-").concat(t),listItemValue:e.props.listItemValue?e.props.listItemValue:"".concat(K,"-").concat(t),onClick:$,role:"option",selected:e.props.listItemValue&&!a.props.multiselect?N.includes(e.props.listItemValue):void 0,style:{position:"relative"}})})),id:"".concat("vds-listbox-container","-listbox-").concat(K),onBlur:function(e){e.currentTarget.classList.contains("vds-select--multi")&&(H(void 0),G(void 0))},onKeyDown:function(e){var t=e.charCode||e.keyCode,a=B.length,l=e.currentTarget.classList.contains("vds-select--multi"),r=0;if(t===x&&a&&(e.preventDefault(),r=a-1,l&&H(B[r].dataset.listItemValue),l||T([B[r].dataset.listItemValue]),G(r)),t===y&&a&&(e.preventDefault(),r=0,l&&H(B[r].dataset.listItemValue),l||T([B[r].dataset.listItemValue]),G(r)),t===E&&a&&(e.preventDefault(),r=F-1<0?0:F-1,l&&H(B[r].dataset.listItemValue),l||T([B[r].dataset.listItemValue]),G(r)),t===v&&a&&(e.preventDefault(),r=F+1<a-1?F+1:a-1,l&&H(B[r].dataset.listItemValue),l||T([B[r].dataset.listItemValue]),G(r)),(t===g||t===C)&&a){e.preventDefault();var c=B[F].dataset.listItemValue,s=N.includes(c);l&&(s&&T(Object(n.a)(N.filter((function(e){return e!==c})))),s||T([].concat(Object(n.a)(N),[c])))}if(!(e.ctrlKey||e.altKey||e.metaKey||e.keyCode===C||e.keyCode===g)){if(1===(i=e.key).length&&i.match(/\S/)){var o=e.key.toLowerCase();-1===(r=O({char:o,count:a,focusableItems:B,start:F+1===a?0:F+1}))&&(r=O({char:o,count:a,focusableItems:B,start:0})),r>-1&&(G(r),l&&H(B[r].dataset.listItemValue),l||T([B[r].dataset.listItemValue]))}var i;!function(e){var t=e.element,a=e.listboxNode;if(t&&a&&a.scrollHeight>a.clientHeight){var n=a.clientHeight+a.scrollTop,l=t.offsetTop+t.offsetHeight;l>n&&(a.scrollTop=l-a.clientHeight),t.offsetTop<a.scrollTop&&(a.scrollTop=t.offsetTop)}}({element:B[r],listboxNode:W.current}),"function"===typeof L&&L({selected:N})}},onKeyUp:function(e){var t=e.charCode||e.keyCode,a=void 0;"undefined"===typeof F&&t===I&&(a=e.currentTarget.classList.contains("vds-select--multi"),G(0),a&&H(B[0].dataset.listItemValue),a||T([B[0].dataset.listItemValue]))},ref:W,role:"listbox",style:{position:"relative"},tabIndex:V}))}));L.defaultProps={selectedListItems:[""],tabIndex:"0"},L.displayName="ListboxContainer";t.a=L}}]);
//# sourceMappingURL=19.aa512baf.chunk.js.map