(window.__wcAdmin_webpackJsonp=window.__wcAdmin_webpackJsonp||[]).push([[31],{793:function(e,t,n){var a={"./advanced-filters/docs/example":794,"./animation-slider/docs/example":795,"./calendar/docs/example":796,"./card/docs/example":797,"./chart/docs/example":798,"./compare-filter/docs/example":799,"./count/docs/example":800,"./date-range-filter-picker/docs/example":801,"./date/docs/example":802,"./dropdown-button/docs/example":803,"./ellipsis-menu/docs/example":804,"./empty-content/docs/example":805,"./filter-picker/docs/example":806,"./filters/docs/example":807,"./flag/docs/example":808,"./form/docs/example":809,"./gravatar/docs/example":810,"./image-upload/docs/example":811,"./link/docs/example":812,"./list/docs/example":813,"./order-status/docs/example":814,"./pagination/docs/example":815,"./pill/docs/example":816,"./product-image/docs/example":817,"./rating/docs/example":818,"./scroll-to/docs/example":819,"./search-list-control/docs/example":820,"./search/docs/example":821,"./section-header/docs/example":822,"./section/docs/example":823,"./segmented-selection/docs/example":824,"./select-control/docs/example":825,"./spinner/docs/example":826,"./stepper/docs/example":827,"./summary/docs/example":828,"./table/docs/example":829,"./tag/docs/example":830,"./text-control-with-affixes/docs/example":831,"./text-control/docs/example":832,"./view-more-list/docs/example":833,"./web-preview/docs/example":834};function r(e){var t=o(e);return n(t)}function o(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}r.keys=function(){return Object.keys(a)},r.resolve=o,e.exports=r,r.id=793},794:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=n(28),l={cancelled:"Cancelled",completed:"Completed",failed:"Failed","on-hold":"On hold",pending:"Pending payment",processing:"Processing",refunded:"Refunded"},i=new URL(document.location).searchParams.get("path")||"/devdocs",s={component:"advanced-filters"},c={title:"Orders Match {{select /}} Filters",filters:{status:{labels:{add:"Order Status",remove:"Remove order status filter",rule:"Select an order status filter match",title:"{{title}}Order Status{{/title}} {{rule /}} {{filter /}}",filter:"Select an order status"},rules:[{value:"is",label:"Is"},{value:"is_not",label:"Is Not"}],input:{component:"SelectControl",options:Object.keys(l).map((function(e){return{value:e,label:l[e]}}))}},product:{labels:{add:"Products",placeholder:"Search products",remove:"Remove products filter",rule:"Select a product filter match",title:"{{title}}Product{{/title}} {{rule /}} {{filter /}}",filter:"Select products"},rules:[{value:"includes",label:"Includes"},{value:"excludes",label:"Excludes"}],input:{component:"Search",type:"products",getLabels:function(){return Promise.resolve([])}}},customer:{labels:{add:"Customer Type",remove:"Remove customer filter",rule:"Select a customer filter match",title:"{{title}}Customer is{{/title}} {{filter /}}",filter:"Select a customer type"},input:{component:"SelectControl",options:[{value:"new",label:"New"},{value:"returning",label:"Returning"}],defaultOption:"new"}},quantity:{labels:{add:"Item Quantity",remove:"Remove item quantity filter",rule:"Select an item quantity filter match",title:"{{title}}Item Quantity is{{/title}} {{rule /}} {{filter /}}"},rules:[{value:"lessthan",label:"Less Than"},{value:"morethan",label:"More Than"},{value:"between",label:"Between"}],input:{component:"Number"}},subtotal:{labels:{add:"Subtotal",remove:"Remove subtotal filter",rule:"Select a subtotal filter match",title:"{{title}}Subtotal is{{/title}} {{rule /}} {{filter /}}"},rules:[{value:"lessthan",label:"Less Than"},{value:"morethan",label:"More Than"},{value:"between",label:"Between"}],input:{component:"Number",type:"currency"}}}};t.default=function(){return Object(a.createElement)(r.AdvancedFilters,{siteLocale:"en_US",path:i,query:s,filterTitle:"Orders",config:c,currency:o.b})}},795:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return y}));var a=n(13),r=n.n(a),o=n(12),l=n.n(o),i=n(7),s=n.n(i),c=n(14),u=n.n(c),d=n(15),p=n.n(d),m=n(6),h=n.n(m),f=n(0),b=n(55);function g(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,a=h()(e);if(t){var r=h()(this).constructor;n=Reflect.construct(a,arguments,r)}else n=a.apply(this,arguments);return p()(this,n)}}var y=function(e){u()(n,e);var t=g(n);function n(){var e;return r()(this,n),(e=t.call(this)).state={pages:[44,55,66,77,88],page:0,animate:null},e.forward=e.forward.bind(s()(e)),e.back=e.back.bind(s()(e)),e}return l()(n,[{key:"forward",value:function(){this.setState((function(e){return{page:e.page+1,animate:"left"}}))}},{key:"back",value:function(){this.setState((function(e){return{page:e.page-1,animate:"right"}}))}},{key:"render",value:function(){var e=this.state,t=e.page,n=e.pages,a=e.animate,r={margin:"16px 0",padding:"8px 16px",color:"white",fontWeight:"bold",backgroundColor:"#246EB9"};return Object(f.createElement)("div",null,Object(f.createElement)(b.AnimationSlider,{animationKey:t,animate:a},(function(){return Object(f.createElement)("div",{style:r},n[t])})),Object(f.createElement)("button",{onClick:this.back,disabled:0===t},"Back"),Object(f.createElement)("button",{onClick:this.forward,disabled:t===n.length-1},"Forward"))}}]),n}(f.Component)},796:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=n(17),l=n.n(o),i=n(718);t.default=Object(i.a)({after:null,afterText:"",before:null,beforeText:"",afterError:null,beforeError:null,focusedInput:"startDate"})((function(e){var t=e.after,n=e.afterText,o=e.before,i=e.beforeText,s=e.afterError,c=e.focusedInput,u=e.setState;return Object(a.createElement)("div",null,Object(a.createElement)(r.H,null,"Date Range Picker"),Object(a.createElement)(r.Section,{component:!1},Object(a.createElement)(r.DateRange,{after:t,afterText:n,before:o,beforeText:i,onUpdate:function(e){u(e)},shortDateFormat:"MM/DD/YYYY",focusedInput:c,isInvalidDate:function(e){return l()().isBefore(l()(e),"date")}})),Object(a.createElement)(r.H,null,"Date Picker"),Object(a.createElement)(r.Section,{component:!1},Object(a.createElement)(r.DatePicker,{date:t,text:n,error:s,onUpdate:function(e){var t=e.date,n=e.text,a=e.error;u({after:t,afterText:n,afterError:a})},dateFormat:"MM/DD/YYYY",isInvalidDate:function(e){return 1===l()(e).day()}})))}))},797:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(r.Card,{title:"Store Performance",description:"Key performance metrics"},Object(a.createElement)("p",null,"Your stuff in a Card.")),Object(a.createElement)(r.Card,{title:"Inactive Card",isInactive:!0},Object(a.createElement)("p",null,"This Card is grayed out and has no box-shadow.")))}},798:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=[{date:"2018-05-30T00:00:00",Hoodie:{label:"Hoodie",value:21599},Sunglasses:{label:"Sunglasses",value:38537},Cap:{label:"Cap",value:106010}},{date:"2018-05-31T00:00:00",Hoodie:{label:"Hoodie",value:14205},Sunglasses:{label:"Sunglasses",value:24721},Cap:{label:"Cap",value:70131}},{date:"2018-06-01T00:00:00",Hoodie:{label:"Hoodie",value:10581},Sunglasses:{label:"Sunglasses",value:19991},Cap:{label:"Cap",value:53552}},{date:"2018-06-02T00:00:00",Hoodie:{label:"Hoodie",value:9250},Sunglasses:{label:"Sunglasses",value:16072},Cap:{label:"Cap",value:47821}}];t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(r.Chart,{data:o,title:"Example Chart",layout:"item-comparison"}))}},799:function(e,t,n){"use strict";n.r(t);var a=n(33),r=n.n(a),o=n(0),l=n(55),i=new URL(document.location).searchParams.get("path")||"/devdocs",s={},c={type:"products",param:"product",getLabels:function(){return Promise.resolve([])},labels:{helpText:"Select at least two products to compare",placeholder:"Search for products to compare",title:"Compare Products",update:"Compare"}};t.default=function(){return Object(o.createElement)(l.CompareFilter,r()({path:i,query:s},c))}},800:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.Count,{count:33})}},801:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=n(32),l=n(2),i={},s=Object(l.partialRight)(o.getDateParamsFromQuery,"period=month&compare=previous_year"),c=Object(l.partialRight)(o.getCurrentDates,"period=month&compare=previous_year"),u=s(i),d=u.period,p=u.compare,m=u.before,h=u.after,f=c(i),b={period:d,compare:p,before:m,after:h,primaryDate:f.primary,secondaryDate:f.secondary};t.default=function(){return Object(a.createElement)(r.DateRangeFilterPicker,{key:"daterange",query:i,onRangeSelect:function(){},dateQuery:b,isoDateFormat:o.isoDateFormat})}},802:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.Date,{date:"2019-01-01"})}},803:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(716),o=n(55);t.default=function(){return Object(a.createElement)(r.a,{renderToggle:function(e){var t=e.isOpen,n=e.onToggle;return Object(a.createElement)(o.DropdownButton,{onClick:n,isOpen:t,labels:["All Products Sold"]})},renderContent:function(){return Object(a.createElement)("p",null,"Dropdown content here")}})}},804:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(718),o=n(288),l=n(55);t.default=Object(r.a)({showCustomers:!0,showOrders:!0})((function(e){var t=e.setState,n=e.showCustomers,r=e.showOrders;return Object(a.createElement)(l.EllipsisMenu,{label:"Choose which analytics to display",renderContent:function(e){var i=e.onToggle;return Object(a.createElement)(a.Fragment,null,Object(a.createElement)(l.MenuTitle,null,"Display Stats"),Object(a.createElement)(l.MenuItem,{isCheckbox:!0,isClickable:!0,checked:n,onInvoke:function(){return t({showCustomers:!n})}},"Show Customers"),Object(a.createElement)(l.MenuItem,{isCheckbox:!0,isClickable:!0,checked:r,onInvoke:function(){return t({showOrders:!r})}},"Show Orders"),Object(a.createElement)(l.MenuItem,{isClickable:!0,onInvoke:i},Object(a.createElement)(o.a,{icon:"no-alt"}),"Close Menu"))}})}))},805:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.EmptyContent,{title:"Nothing here",message:"Some descriptive text",actionLabel:"Reload page",actionURL:"#"})}},806:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=new URL(document.location).searchParams.get("path")||"/devdocs",l={meal:"breakfast"},i={label:"Meal",staticParams:[],param:"meal",showFilters:function(){return!0},filters:[{label:"Breakfast",value:"breakfast"},{label:"Lunch",value:"lunch",subFilters:[{label:"Meat",value:"meat",path:["lunch"]},{label:"Vegan",value:"vegan",path:["lunch"]},{label:"Pescatarian",value:"fish",path:["lunch"],subFilters:[{label:"Snapper",value:"snapper",path:["lunch","fish"]},{label:"Cod",value:"cod",path:["lunch","fish"]},{label:"Other",value:"other_fish",path:["lunch","fish"],component:"OtherFish"}]}]},{label:"Dinner",value:"dinner"}]};t.default=function(){return Object(a.createElement)(r.FilterPicker,{config:i,path:o,query:l})}},807:function(e,t,n){"use strict";n.r(t);var a=n(33),r=n.n(a),o=n(0),l=n(55),i=n(32),s=n(2),c={cancelled:"Cancelled",completed:"Completed",failed:"Failed","on-hold":"On hold",pending:"Pending payment",processing:"Processing",refunded:"Refunded"},u={getDateParamsFromQuery:Object(s.partialRight)(i.getDateParamsFromQuery,"period=month&compare=previous_year"),getCurrentDates:Object(s.partialRight)(i.getCurrentDates,"period=month&compare=previous_year"),isoDateFormat:i.isoDateFormat},d={},p=[{label:"Show",staticParams:["chart"],param:"filter",showFilters:function(){return!0},filters:[{label:"All Orders",value:"all"},{label:"Advanced Filters",value:"advanced"}]}],m={title:"Orders Match {{select /}} Filters",filters:{status:{labels:{add:"Order Status",remove:"Remove order status filter",rule:"Select an order status filter match",title:"Order Status {{rule /}} {{filter /}}",filter:"Select an order status"},rules:[{value:"is",label:"Is"},{value:"is_not",label:"Is Not"}],input:{component:"SelectControl",options:Object.keys(c).map((function(e){return{value:e,label:c[e]}}))}},product:{labels:{add:"Products",placeholder:"Search products",remove:"Remove products filter",rule:"Select a product filter match",title:"Product {{rule /}} {{filter /}}",filter:"Select products"},rules:[{value:"includes",label:"Includes"},{value:"excludes",label:"Excludes"}],input:{component:"Search",type:"products",getLabels:function(){return Promise.resolve([])}}},customer:{labels:{add:"Customer Type",remove:"Remove customer filter",rule:"Select a customer filter match",title:"Customer is {{filter /}}",filter:"Select a customer type"},input:{component:"SelectControl",options:[{value:"new",label:"New"},{value:"returning",label:"Returning"}],defaultOption:"new"}},quantity:{labels:{add:"Item Quantity",remove:"Remove item quantity filter",rule:"Select an item quantity filter match",title:"Item Quantity is {{rule /}} {{filter /}}"},rules:[{value:"lessthan",label:"Less Than"},{value:"morethan",label:"More Than"},{value:"between",label:"Between"}],input:{component:"Number"}},subtotal:{labels:{add:"Subtotal",remove:"Remove subtotal filter",rule:"Select a subtotal filter match",title:"Subtotal is {{rule /}} {{filter /}}"},rules:[{value:"lessthan",label:"Less Than"},{value:"morethan",label:"More Than"},{value:"between",label:"Between"}],input:{component:"Number",type:"currency"}}}},h={type:"products",param:"product",getLabels:function(){return Promise.resolve([])},labels:{helpText:"Select at least two products to compare",placeholder:"Search for products to compare",title:"Compare Products",update:"Compare"}};t.default=function(){return Object(o.createElement)("div",null,Object(o.createElement)(l.H,null,"Date picker only"),Object(o.createElement)(l.Section,{component:!1},Object(o.createElement)(l.ReportFilters,{path:"",query:d,storeDate:u})),Object(o.createElement)(l.H,null,"Date picker & more filters"),Object(o.createElement)(l.Section,{component:!1},Object(o.createElement)(l.ReportFilters,{filters:p,path:"",query:d,storeDate:u})),Object(o.createElement)(l.H,null,"Advanced Filters"),Object(o.createElement)(l.Section,{component:!1},Object(o.createElement)(l.AdvancedFilters,{siteLocale:"en_US",path:"",query:d,filterTitle:"Orders",config:m})),Object(o.createElement)(l.H,null,"Compare Filter"),Object(o.createElement)(l.Section,{component:!1},Object(o.createElement)(l.CompareFilter,r()({path:"",query:d},h))))}},808:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(r.H,null,"Default (inherits parent font size)"),Object(a.createElement)(r.Section,{component:!1},Object(a.createElement)(r.Flag,{code:"VU"})),Object(a.createElement)(r.H,null,"Large"),Object(a.createElement)(r.Section,{component:!1},Object(a.createElement)(r.Flag,{code:"VU",size:48})),Object(a.createElement)(r.H,null,"Invalid Country Code"),Object(a.createElement)(r.Section,{component:!1},Object(a.createElement)(r.Flag,{code:"invalid country code"})))}},809:function(e,t,n){"use strict";n.r(t);var a=n(33),r=n.n(a),o=n(0),l=n(719),i=n(717),s=n(933),c=n(919),u=n(166),d=n(55),p=function(e){var t={};return e.firstName||(t.firstName="First name is required"),e.lastName.length<3&&(t.lastName="Last name must be at least 3 characters"),t},m=function(e){return console.log(e)},h={firstName:"",lastName:"",select:"3",checkbox:!0,radio:"2"};t.default=function(){return Object(o.createElement)(d.Form,{validate:p,onSubmitCallback:m,initialValues:h},(function(e){var t=e.getInputProps,n=e.values,a=e.errors,d=e.handleSubmit;return Object(o.createElement)("div",null,Object(o.createElement)(l.a,r()({label:"First Name"},t("firstName"))),Object(o.createElement)(l.a,r()({label:"Last Name"},t("lastName"))),Object(o.createElement)(i.a,r()({label:"Select",options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}]},t("select"))),Object(o.createElement)(s.a,r()({label:"Checkbox"},t("checkbox"))),Object(o.createElement)(c.a,r()({label:"Radio",options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}]},t("radio"))),Object(o.createElement)(u.a,{isPrimary:!0,onClick:d,disabled:Object.keys(a).length},"Submit"),Object(o.createElement)("br",null),Object(o.createElement)("br",null),Object(o.createElement)("h3",null,"Return data:"),Object(o.createElement)("pre",null,"Values: ",JSON.stringify(n),Object(o.createElement)("br",null),"Errors: ",JSON.stringify(a)))}))}},810:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.Gravatar,{user:"[email protected]",size:48})}},811:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(718),o=n(55);t.default=Object(r.a)({image:null})((function(e){var t=e.setState,n=e.logo;return Object(a.createElement)(o.ImageUpload,{image:n,onChange:function(e){return t({logo:e})}})}))},812:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.Link,{href:"edit.php?post_type=shop_coupon",type:"wp-admin"},"Coupons")}},813:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=n(86),l=n.n(o),i=[{title:"List item title",content:"List item description text"},{before:Object(a.createElement)(l.a,{icon:"star"}),title:"List item with before icon",content:"List item description text"},{before:Object(a.createElement)(l.a,{icon:"star"}),after:Object(a.createElement)(l.a,{icon:"chevron-right"}),title:"List item with before and after icons",content:"List item description text"},{title:"Clickable list item",content:"List item description text",onClick:function(){return alert("List item clicked")}}];t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(r.List,{items:i}))}},814:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(3),o=n(55),l={processing:Object(r.__)("Processing Order"),pending:Object(r.__)("Pending Order"),completed:Object(r.__)("Completed Order")};t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(o.OrderStatus,{order:{status:"processing"},orderStatusMap:l}),Object(a.createElement)(o.OrderStatus,{order:{status:"pending"},orderStatusMap:l}),Object(a.createElement)(o.OrderStatus,{order:{status:"completed"},orderStatusMap:l}))}},815:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(718),o=n(55);t.default=Object(r.a)({page:2,perPage:50})((function(e){var t=e.page,n=e.perPage,r=e.setState;return Object(a.createElement)(o.Pagination,{page:t,perPage:n,total:500,onPageChange:function(e){return r({page:e})},onPerPageChange:function(e){return r({perPage:e})}})}))},816:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.Pill,null,"Content")}},817:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(r.ProductImage,{product:null}),Object(a.createElement)(r.ProductImage,{product:{images:[]}}),Object(a.createElement)(r.ProductImage,{product:{images:[{src:"https://cldup.com/6L9h56D9Bw.jpg"}]}}))}},818:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)("div",null,Object(a.createElement)(r.Rating,{rating:4,totalStars:5})),Object(a.createElement)("div",null,Object(a.createElement)(r.Rating,{rating:2.5,totalStars:6})),Object(a.createElement)("div",null,Object(a.createElement)(r.ProductRating,{product:{average_rating:3.5}})),Object(a.createElement)("div",null,Object(a.createElement)(r.ReviewRating,{review:{rating:5}})))}},819:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.ScrollTo,null,Object(a.createElement)("div",null,"Have the web browser automatically scroll to this component on page render."))}},820:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=n(718);t.default=Object(o.a)({selected:[],loading:!0})((function(e){var t=e.selected,n=e.loading,o=e.setState;return Object(a.createElement)("div",null,Object(a.createElement)("button",{onClick:function(){return o({loading:!n})}},"Toggle loading state"),Object(a.createElement)(r.SearchListControl,{list:[{id:1,name:"Apricots"},{id:2,name:"Clementine"},{id:3,name:"Elderberry"},{id:4,name:"Guava"},{id:5,name:"Lychee"},{id:6,name:"Mulberry"}],isLoading:n,selected:t,onChange:function(e){return o({selected:e})}}))}))},821:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(718),o=n(55);t.default=Object(r.a)({selected:[],inlineSelected:[]})((function(e){var t=e.selected,n=e.inlineSelected,r=e.setState;return Object(a.createElement)("div",null,Object(a.createElement)(o.H,null,"Tags Below Input"),Object(a.createElement)(o.Section,{component:!1},Object(a.createElement)(o.Search,{type:"products",placeholder:"Search for a product",selected:t,onChange:function(e){return r({selected:e})}})),Object(a.createElement)(o.H,null,"Tags Inline with Input"),Object(a.createElement)(o.Section,{component:!1},Object(a.createElement)(o.Search,{type:"products",placeholder:"Search for a product",selected:n,onChange:function(e){return r({inlineSelected:e})},inlineTags:!0})))}))},822:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.SectionHeader,{title:"Store Performance"})}},823:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(r.H,null,"Header using a contextual level (h3)"),Object(a.createElement)(r.Section,{component:"article"},Object(a.createElement)("p",null,"This is an article component wrapper."),Object(a.createElement)(r.H,null,"Another header with contextual level (h4)"),Object(a.createElement)(r.Section,{component:!1},Object(a.createElement)("p",null,"There is no wrapper component here."),Object(a.createElement)(r.H,null,"This is an h5"))))}},824:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=n(718);t.default=Object(o.a)({selected:"two"})((function(e){var t=e.selected,n=e.setState;return Object(a.createElement)(r.SegmentedSelection,{options:[{value:"one",label:"One"},{value:"two",label:"Two"},{value:"three",label:"Three"},{value:"four",label:"Four"}],selected:t,legend:"Select a number",onSelect:function(e){return n({selected:e.number})},name:"number"})}))},825:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=n(718),l=[{key:"apple",label:"Apple",value:{id:"apple"}},{key:"apricot",label:"Apricot",value:{id:"apricot"}},{key:"banana",label:"Banana",keywords:["best","fruit"],value:{id:"banana"}},{key:"blueberry",label:"Blueberry",value:{id:"blueberry"}},{key:"cherry",label:"Cherry",value:{id:"cherry"}},{key:"cantaloupe",label:"Cantaloupe",value:{id:"cantaloupe"}},{key:"dragonfruit",label:"Dragon Fruit",value:{id:"dragonfruit"}},{key:"elderberry",label:"Elderberry",value:{id:"elderberry"}}];t.default=Object(o.a)({simpleSelected:[],simpleMultipleSelected:[],singleSelected:[],singleSelectedShowAll:[],multipleSelected:[],inlineSelected:[]})((function(e){var t=e.simpleSelected,n=e.simpleMultipleSelected,o=e.singleSelected,i=e.singleSelectedShowAll,s=e.multipleSelected,c=e.inlineSelected,u=e.setState;return Object(a.createElement)("div",null,Object(a.createElement)(r.SelectControl,{label:"Simple single value",onChange:function(e){return u({simpleSelected:e})},options:l,placeholder:"Start typing to filter options...",selected:t}),Object(a.createElement)("br",null),Object(a.createElement)(r.SelectControl,{label:"Multiple values",multiple:!0,onChange:function(e){return u({simpleMultipleSelected:e})},options:l,placeholder:"Start typing to filter options...",selected:n}),Object(a.createElement)("br",null),Object(a.createElement)(r.SelectControl,{label:"Single value searchable",isSearchable:!0,onChange:function(e){return u({singleSelected:e})},options:l,placeholder:"Start typing to filter options...",selected:o}),Object(a.createElement)("br",null),Object(a.createElement)(r.SelectControl,{label:"Single value searchable with options on refocus",isSearchable:!0,onChange:function(e){return u({singleSelectedShowAll:e})},options:l,placeholder:"Start typing to filter options...",selected:i,showAllOnFocus:!0}),Object(a.createElement)("br",null),Object(a.createElement)(r.SelectControl,{label:"Inline tags searchable",isSearchable:!0,multiple:!0,inlineTags:!0,onChange:function(e){return u({inlineSelected:e})},options:l,placeholder:"Start typing to filter options...",selected:c}),Object(a.createElement)("br",null),Object(a.createElement)(r.SelectControl,{hideBeforeSearch:!0,isSearchable:!0,label:"Hidden options before search",multiple:!0,onChange:function(e){return u({multipleSelected:e})},options:l,placeholder:"Start typing to filter options...",selected:s,showClearButton:!0}))}))},826:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(r.Spinner,null))}},827:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(718),o=n(55);t.default=Object(r.a)({currentStep:"first",isComplete:!1,isPending:!1})((function(e){var t=e.currentStep,n=e.isComplete,r=e.isPending,l=e.setState,i=function(e){l({currentStep:e})},s=[{key:"first",label:"First",description:"Step item description",content:Object(a.createElement)("div",null,"First step content."),onClick:i},{key:"second",label:"Second",description:"Step item description",content:Object(a.createElement)("div",null,"Second step content."),onClick:i},{label:"Third",key:"third",description:"Step item description",content:Object(a.createElement)("div",null,"Third step content."),onClick:i},{label:"Fourth",key:"fourth",description:"Step item description",content:Object(a.createElement)("div",null,"Fourth step content."),onClick:i}],c=s.findIndex((function(e){return t===e.key}));return n&&s.forEach((function(e){return e.isComplete=!0})),Object(a.createElement)("div",null,n?Object(a.createElement)("button",{onClick:function(){return l({currentStep:"first",isComplete:!1})}},"Reset"):Object(a.createElement)("div",null,Object(a.createElement)("button",{onClick:function(){return l({currentStep:s[c-1].key})},disabled:c<1},"Previous step"),Object(a.createElement)("button",{onClick:function(){return l({currentStep:s[c+1].key})},disabled:c>=s.length-1},"Next step"),Object(a.createElement)("button",{onClick:function(){return l({isComplete:!0})},disabled:c!==s.length-1},"Complete"),Object(a.createElement)("button",{onClick:function(){return l({isPending:!r})}},"Toggle Spinner")),Object(a.createElement)(o.Stepper,{steps:s,currentStep:t,isPending:r}),Object(a.createElement)("br",null),Object(a.createElement)(o.Stepper,{isPending:r,isVertical:!0,steps:s,currentStep:t}))}))},828:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.SummaryList,null,(function(){return[Object(a.createElement)(r.SummaryNumber,{key:"revenue",value:"$829.40",label:"Total Sales",delta:29,href:"/analytics/report"}),Object(a.createElement)(r.SummaryNumber,{key:"refunds",value:"$24.00",label:"Refunds",delta:-10,href:"/analytics/report",selected:!0}),Object(a.createElement)(r.SummaryNumber,{key:"coupons",value:"$49.90",label:"Coupons",href:"/analytics/report"})]}))}},829:function(e,t,n){"use strict";n.r(t);var a=n(5),r=n.n(a),o=n(0),l=n(55),i=n(718),s=[{key:"month",label:"Month"},{key:"orders",label:"Orders"},{key:"revenue",label:"Revenue"}],c=[[{display:"January",value:1},{display:10,value:10},{display:"$530.00",value:530}],[{display:"February",value:2},{display:13,value:13},{display:"$675.00",value:675}],[{display:"March",value:3},{display:9,value:9},{display:"$460.00",value:460}]],u=[{label:"Gross Income",value:"$830.00"},{label:"Taxes",value:"$96.32"},{label:"Shipping",value:"$50.00"}];t.default=Object(i.a)({query:{paged:1}})((function(e){var t=e.query,n=e.setState;return Object(o.createElement)("div",null,Object(o.createElement)(l.H,null,"TableCard"),Object(o.createElement)(l.Section,{component:!1},Object(o.createElement)(l.TableCard,{title:"Revenue Last Week",rows:c,headers:s,onQueryChange:function(e){return function(t){return n({query:r()({},e,t)})}},query:t,rowsPerPage:7,totalRows:10,summary:u})),Object(o.createElement)(l.H,null,"Table only"),Object(o.createElement)(l.Section,{component:!1},Object(o.createElement)(l.Card,{className:"woocommerce-analytics__card"},Object(o.createElement)(l.Table,{caption:"Revenue Last Week",rows:c,headers:s}))),Object(o.createElement)(l.H,null,"Summary only"),Object(o.createElement)(l.Section,{component:!1},Object(o.createElement)(l.TableSummary,{data:u})),Object(o.createElement)(l.H,null,"Placeholder"),Object(o.createElement)(l.Section,{component:!1},Object(o.createElement)(l.Card,{className:"woocommerce-analytics__card"},Object(o.createElement)(l.TablePlaceholder,{caption:"Revenue Last Week",headers:s}))),Object(o.createElement)(l.H,null,"Empty Table"),Object(o.createElement)(l.Section,{component:!1},Object(o.createElement)(l.EmptyTable,null,"There are no entries.")))}))},830:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=function(){};t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(r.Tag,{label:"My tag",id:1}),Object(a.createElement)(r.Tag,{label:"Removable tag",id:2,remove:o}),Object(a.createElement)(r.Tag,{label:"Tag with popover",popoverContents:Object(a.createElement)("p",null,"This is a popover")}))}},831:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=n(718);t.default=Object(o.a)({first:"",second:"",third:"",fourth:"",fifth:""})((function(e){var t=e.first,n=e.second,o=e.third,l=e.fourth,i=e.fifth,s=e.setState;return Object(a.createElement)("div",null,Object(a.createElement)(r.TextControlWithAffixes,{label:"Text field without affixes",value:t,placeholder:"Placeholder",onChange:function(e){return s({first:e})}}),Object(a.createElement)(r.TextControlWithAffixes,{label:"Disabled text field without affixes",value:t,placeholder:"Placeholder",onChange:function(e){return s({first:e})},disabled:!0}),Object(a.createElement)(r.TextControlWithAffixes,{prefix:"$",label:"Text field with a prefix",value:n,onChange:function(e){return s({second:e})}}),Object(a.createElement)(r.TextControlWithAffixes,{prefix:"$",label:"Disabled text field with a prefix",value:n,onChange:function(e){return s({second:e})},disabled:!0}),Object(a.createElement)(r.TextControlWithAffixes,{prefix:"Prefix",suffix:"Suffix",label:"Text field with both affixes",value:o,onChange:function(e){return s({third:e})}}),Object(a.createElement)(r.TextControlWithAffixes,{prefix:"Prefix",suffix:"Suffix",label:"Disabled text field with both affixes",value:o,onChange:function(e){return s({third:e})},disabled:!0}),Object(a.createElement)(r.TextControlWithAffixes,{suffix:"%",label:"Text field with a suffix",value:l,onChange:function(e){return s({fourth:e})}}),Object(a.createElement)(r.TextControlWithAffixes,{suffix:"%",label:"Disabled text field with a suffix",value:l,onChange:function(e){return s({fourth:e})},disabled:!0}),Object(a.createElement)(r.TextControlWithAffixes,{prefix:"$",label:"Text field with prefix and help text",value:i,onChange:function(e){return s({fifth:e})},help:"This is some help text."}),Object(a.createElement)(r.TextControlWithAffixes,{prefix:"$",label:"Disabled text field with prefix and help text",value:i,onChange:function(e){return s({fifth:e})},help:"This is some help text.",disabled:!0}))}))},832:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55),o=n(718);t.default=Object(o.a)({value:""})((function(e){var t=e.setState,n=e.value;return Object(a.createElement)("div",null,Object(a.createElement)(r.TextControl,{name:"text-control",label:"Enter text here",onChange:function(e){return t({value:e})},value:n}),Object(a.createElement)("br",null),Object(a.createElement)(r.TextControl,{label:"Disabled field",disabled:!0,value:""}))}))},833:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)(r.ViewMoreList,{items:[Object(a.createElement)("i",null,"Lorem"),Object(a.createElement)("i",null,"Ipsum"),Object(a.createElement)("i",null,"Dolor"),Object(a.createElement)("i",null,"Sit")]})}},834:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(55);t.default=function(){return Object(a.createElement)("div",null,Object(a.createElement)(r.WebPreview,{src:"https://themes.woocommerce.com/?name=galleria",title:"My Web Preview"}))}},840:function(e,t,n){var a={"./advanced-filters/README.md":841,"./animation-slider/README.md":842,"./calendar/README.md":843,"./card/README.md":844,"./chart/README.md":845,"./chart/d3chart/d3base/README.md":846,"./compare-filter/README.md":847,"./count/README.md":848,"./date-range-filter-picker/README.md":849,"./date/README.md":850,"./dropdown-button/README.md":851,"./ellipsis-menu/README.md":852,"./empty-content/README.md":853,"./filter-picker/README.md":854,"./filters/README.md":855,"./flag/README.md":856,"./form/README.md":857,"./gravatar/README.md":858,"./higher-order/use-filters/README.md":859,"./image-upload/README.md":860,"./link/README.md":861,"./list/README.md":862,"./order-status/README.md":863,"./pagination/README.md":864,"./pill/README.md":865,"./plugins/README.md":866,"./product-image/README.md":867,"./rating/README.md":868,"./scroll-to/README.md":869,"./search-list-control/README.md":870,"./search/README.md":871,"./section-header/README.md":872,"./section/README.md":873,"./segmented-selection/README.md":874,"./select-control/README.md":875,"./spinner/README.md":876,"./stepper/README.md":877,"./summary/README.md":878,"./table/README.md":879,"./tag/README.md":880,"./text-control-with-affixes/README.md":881,"./text-control/README.md":882,"./timeline/README.md":883,"./view-more-list/README.md":884,"./web-preview/README.md":885};function r(e){var t=o(e);return n(t)}function o(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}r.keys=function(){return Object.keys(a)},r.resolve=o,e.exports=r,r.id=840},841:function(e,t,n){"use strict";n.r(t),t.default="Advanced Filters\n===\n\nDisplays a configurable set of filters which can modify query parameters. Display, behavior, and types of filters can be designated by a configuration object.\n\n## Usage\n\nBelow is a config example complete with translation strings. Advanced Filters makes use of [interpolateComponents](https://github.com/Automattic/interpolate-components#readme) to organize sentence structure, resulting in a filter visually represented as a sentence fragment in any language.\n\n```js\nconst config = {\n\ttitle: __(\n\t\t// A sentence describing filters for Orders\n\t\t// See screen shot for context: https://cloudup.com/cSsUY9VeCVJ\n\t\t'Orders Match {{select /}} Filters',\n\t\t'woocommerce'\n\t),\n\tfilters: {\n\t\tstatus: {\n\t\t\tlabels: {\n\t\t\t\tadd: __( 'Order Status', 'woocommerce' ),\n\t\t\t\tremove: __( 'Remove order status filter', 'woocommerce' ),\n\t\t\t\trule: __( 'Select an order status filter match', 'woocommerce' ),\n\t\t\t\t// A sentence describing an Order Status filter\n\t\t\t\t// See screen shot for context: https://cloudup.com/cSsUY9VeCVJ\n\t\t\t\ttitle: __( 'Order Status {{rule /}} {{filter /}}', 'woocommerce' ),\n\t\t\t\tfilter: __( 'Select an order status', 'woocommerce' ),\n\t\t\t},\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\tvalue: 'is',\n\t\t\t\t\t// Sentence fragment, logical, \"Is\"\n\t\t\t\t\t// Refers to searching for orders matching a chosen order status\n\t\t\t\t\t// Screenshot for context: https://cloudup.com/cSsUY9VeCVJ\n\t\t\t\t\tlabel: _x( 'Is', 'order status', 'woocommerce' ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tvalue: 'is_not',\n\t\t\t\t\t// Sentence fragment, logical, \"Is Not\"\n\t\t\t\t\t// Refers to searching for orders that don't match a chosen order status\n\t\t\t\t\t// Screenshot for context: https://cloudup.com/cSsUY9VeCVJ\n\t\t\t\t\tlabel: _x( 'Is Not', 'order status', 'woocommerce' ),\n\t\t\t\t},\n\t\t\t],\n\t\t\tinput: {\n\t\t\t\tcomponent: 'SelectControl',\n\t\t\t\toptions: Object.keys( orderStatuses ).map( key => ( {\n\t\t\t\t\tvalue: key,\n\t\t\t\t\tlabel: orderStatuses[ key ],\n\t\t\t\t} ) ),\n\t\t\t},\n\t\t},\n\t},\n};\n```\n\nWhen filters are applied, the query string will be modified using a combination of rule names and selected filter values.\n\nTaking the above configuration as an example, applying the filter will result in a query parameter like `status_is=pending` or `status_is_not=cancelled`.\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`config` | Object | `null` | (required) The configuration object required to render filters. See example above.\n`path` | String | `null` | (required) Name of this filter, used in translations.\n`query` | Object | `null` | The query string represented in object form.\n`onAdvancedFilterAction` | Function | `null` | Function to be called after an advanced filter action has been taken.\n`siteLocale` | string | `'en_US'` | The siteLocale for the site.\n`currency` | Object | `null` | (required) The currency instance for the site (@woocommerce/currency).\n\n\n## Input Components\n\n\n### SelectControl\n\nRender a select component with options.\n\n```js\nconst config = {\n\t...,\n\tfilters: {\n\t\tfruit: {\n\t\t\tinput: {\n\t\t\t\tcomponent: 'SelectControl',\n\t\t\t\toptions: [\n\t\t\t\t\t{ label: 'Apples', key: 'apples' },\n\t\t\t\t\t{ label: 'Oranges', key: 'oranges' },\n\t\t\t\t\t{ label: 'Bananas', key: 'bananas' },\n\t\t\t\t\t{ label: 'Cherries', key: 'cherries' },\n\t\t\t\t],\n\t\t\t},\n\t\t},\n\t},\n};\n```\n\n`options`: An array of objects with `key` and `label` properties.\n\n\n### Search\n\nRender an input for users to search and select using an autocomplete.\n\n```js\nconst config = {\n\t...,\n\tfilters: {\n\t\tproduct: {\n\t\t\tinput: {\n\t\t\t\tcomponent: 'Search',\n\t\t\t\ttype: 'products',\n\t\t\t\tgetLabels: getRequestByIdString( NAMESPACE + 'products', product => ( {\n\t\t\t\t\tid: product.id,\n\t\t\t\t\tlabel: product.name,\n\t\t\t\t} ) ),\n\t\t\t},\n\t\t},\n\t},\n};\n```\n\n`type`: A string Autocompleter type used by the [Search Component](https://github.com/woocommerce/woocommerce-admin/tree/main/packages/components/src/search).\n`getLabels`: A function returning a Promise resolving to an array of objects with `id` and `label` properties.\n\n\n### Date\n\nRenders an input or two inputs allowing a user to filter based on a date value or range of values.\n\n```js\nconst config = {\n\t...,\n\tfilters: {\n\t\tregistered: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\tvalue: 'before',\n\t\t\t\t\tlabel: __( 'Before', 'woocommerce' ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tvalue: 'after',\n\t\t\t\t\tlabel: __( 'After', 'woocommerce' ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tvalue: 'between',\n\t\t\t\t\tlabel: __( 'Between', 'woocommerce' ),\n\t\t\t\t},\n\t\t\t],\n\t\t\tinput: {\n\t\t\t\tcomponent: 'Date',\n\t\t\t},\n\t\t},\n\t},\n};\n```\n\n\n### Numeric Value\n\nRenders an input or two inputs allowing a user to filter based on a numeric value or range of values. Can also render inputs for currency values.\n\nValid rule values are `after`, `before`, and `between`. Use any combination you'd like.\n\n```js\nconst config = {\n\t...,\n\tfilters: {\n\t\tquantity: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\tvalue: 'lessthan',\n\t\t\t\t\tlabel: __( 'Less Than', 'woocommerce' ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tvalue: 'morethan',\n\t\t\t\t\tlabel: __( 'More Than', 'woocommerce' ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tvalue: 'between',\n\t\t\t\t\tlabel: __( 'Between', 'woocommerce' ),\n\t\t\t\t},\n\t\t\t],\n\t\t\tinput: {\n\t\t\t\tcomponent: 'Number',\n\t\t\t},\n\t\t},\n\t},\n};\n```\n\nValid rule values are `lessthan`, `morethan`, and `between`. Use any combination you'd like.\n\nSpecify `input.type` as `'currency'` if you'd like to render currency inputs, which respects store currency locale.\n"},842:function(e,t,n){"use strict";n.r(t),t.default="AnimationSlider\n===\n\nThis component creates slideable content controlled by an animate prop to direct the contents to slide left or right.\nAll other props are passed to `CSSTransition`. More info at http://reactcommunity.org/react-transition-group/css-transition\n\n## Usage\n\n```jsx\n<AnimationSlider animationKey=\"1\" animate=\"right\">\n\t{ ( status ) => (\n\t\t<span>One (1)</span>\n\t) }\n</AnimationSlider>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`children` | function | `null` | (required) A function returning rendered content with argument status, reflecting `CSSTransition` status\n`animationKey` | any | `null` | (required) A unique identifier for each slideable page\n`animate` | string | `null` | null, 'left', 'right', to designate which direction to slide on a change\n`onExited` | function | `null` | A function to be executed after a transition is complete, passing the containing ref as the argument\n"},843:function(e,t,n){"use strict";n.r(t),t.default='DatePicker\n===\n\n## Usage\n\n```jsx\n<DatePicker\n\tdate={ date }\n\ttext={ text }\n\terror={ error }\n\tonUpdate={ ( { date, text, error } ) => setState( { date, text, error } ) }\n\tdateFormat="MM/DD/YYYY"\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`date` | Object | `null` | A moment date object representing the selected date. `null` for no selection\n`disabled` | Boolean | `null` | Whether the input is disabled\n`text` | String | `null` | The date in human-readable format. Displayed in the text input\n`error` | String | `null` | A string error message, shown to the user\n`onUpdate` | Function | `null` | (required) A function called upon selection of a date or input change\n`dateFormat` | String | `null` | (required) The date format in moment.js-style tokens\n`isInvalidDate` | Function | `null` | A function to determine if a day on the calendar is not valid\n\n\nDateRange\n===\n\nThis is wrapper for a [react-dates](https://github.com/airbnb/react-dates) powered calendar.\n\n## Usage\n\n```jsx\n<DateRange\n\tafter={ after }\n\tafterText={ afterText }\n\tbefore={ before }\n\tbeforeText={ beforeText }\n\tonUpdate={ ( update ) => setState( update ) }\n\tshortDateFormat="MM/DD/YYYY"\n\tfocusedInput="startDate"\n\tisInvalidDate={ date => (\n\t\t// not a future date\n\t\tmoment().isBefore( moment( date ), \'date\' )\n\t) }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`after` | Object | `null` | A moment date object representing the selected start. `null` for no selection\n`afterError` | String | `null` | A string error message, shown to the user\n`afterText` | String | `null` | The start date in human-readable format. Displayed in the text input\n`before` | Object | `null` | A moment date object representing the selected end. `null` for no selection\n`beforeError` | String | `null` | A string error message, shown to the user\n`beforeText` | String | `null` | The end date in human-readable format. Displayed in the text input\n`focusedInput` | String | `null` | String identifying which is the currently focused input (start or end)\n`isInvalidDate` | Function | `null` | A function to determine if a day on the calendar is not valid\n`onUpdate` | Function | `null` | (required) A function called upon selection of a date\n`shortDateFormat` | String | `null` | (required) The date format in moment.js-style tokens\n'},844:function(e,t,n){"use strict";n.r(t),t.default='Card\n===\n\nA basic card component with a header. The header can contain a title, an action, and an `EllipsisMenu` menu.\n\n## Usage\n\n```jsx\n<div>\n\t<Card title="Store Performance" description="Key performance metrics">\n\t\t<p>Your stuff in a Card.</p>\n\t</Card>\n\t<Card title="Inactive Card" isInactive>\n\t\t<p>This Card is grayed out and has no box-shadow.</p>\n\t</Card>\n</div>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`action` | ReactNode | `null` | One "primary" action for this card, appears in the card header\n`className` | String | `null` | Additional CSS classes\n`description` | One of type: string, node | `null` | The description displayed beneath the title\n`isInactive` | Boolean | `null` | Boolean representing whether the card is inactive or not\n`menu` | (custom validator) | `null` | An `EllipsisMenu`, with filters used to control the content visible in this card\n`title` | One of type: string, node | `null` | The title to use for this card\n'},845:function(e,t,n){"use strict";n.r(t),t.default="Chart\n===\n\nA chart container using d3, to display timeseries data with an interactive legend.\n\n## Usage\n\n```jsx\nconst data = [\n\t{\n\t\tdate: '2018-05-30T00:00:00',\n\t\tHoodie: {\n\t\t\tlabel: 'Hoodie',\n\t\t\tvalue: 21599,\n\t\t},\n\t\tSunglasses: {\n\t\t\tlabel: 'Sunglasses',\n\t\t\tvalue: 38537,\n\t\t},\n\t\tCap: {\n\t\t\tlabel: 'Cap',\n\t\t\tvalue: 106010,\n\t\t},\n\t},\n\t{\n\t\tdate: '2018-05-31T00:00:00',\n\t\tHoodie: {\n\t\t\tlabel: 'Hoodie',\n\t\t\tvalue: 14205,\n\t\t},\n\t\tSunglasses: {\n\t\t\tlabel: 'Sunglasses',\n\t\t\tvalue: 24721,\n\t\t},\n\t\tCap: {\n\t\t\tlabel: 'Cap',\n\t\t\tvalue: 70131,\n\t\t},\n\t},\n\t{\n\t\tdate: '2018-06-01T00:00:00',\n\t\tHoodie: {\n\t\t\tlabel: 'Hoodie',\n\t\t\tvalue: 10581,\n\t\t},\n\t\tSunglasses: {\n\t\t\tlabel: 'Sunglasses',\n\t\t\tvalue: 19991,\n\t\t},\n\t\tCap: {\n\t\t\tlabel: 'Cap',\n\t\t\tvalue: 53552,\n\t\t},\n\t},\n\t{\n\t\tdate: '2018-06-02T00:00:00',\n\t\tHoodie: {\n\t\t\tlabel: 'Hoodie',\n\t\t\tvalue: 9250,\n\t\t},\n\t\tSunglasses: {\n\t\t\tlabel: 'Sunglasses',\n\t\t\tvalue: 16072,\n\t\t},\n\t\tCap: {\n\t\t\tlabel: 'Cap',\n\t\t\tvalue: 47821,\n\t\t},\n\t},\n];\n\n<Chart data={ data } title=\"Example Chart\" layout=\"item-comparison\" />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`allowedIntervals` | Array | `null` | Allowed intervals to show in a dropdown\n`baseValue` | Number | `0` | Base chart value. If no data value is different than the baseValue, the `emptyMessage` will be displayed if provided\n`chartType` | One of: 'bar', 'line' | `'line'` | Chart type of either `line` or `bar`\n`data` | Array | `[]` | An array of data\n`dateParser` | String | `'%Y-%m-%dT%H:%M:%S'` | Format to parse dates into d3 time format\n`emptyMessage` | String | `null` | The message to be displayed if there is no data to render. If no message is provided, nothing will be displayed\n`filterParam` | String | `null` | Name of the param used to filter items. If specified, it will be used, in combination with query, to detect which elements are being used by the current filter and must be displayed even if their value is 0\n`itemsLabel` | String | `null` | Label describing the legend items\n`mode` | One of: 'item-comparison', 'time-comparison' | `'time-comparison'` | `item-comparison` (default) or `time-comparison`, this is used to generate correct ARIA properties\n`path` | String | `null` | Current path\n`query` | Object | `null` | The query string represented in object form\n`interactiveLegend` | Boolean | `true` | Whether the legend items can be activated/deactivated\n`interval` | One of: 'hour', 'day', 'week', 'month', 'quarter', 'year' | `'day'` | Interval specification (hourly, daily, weekly etc)\n`intervalData` | Object | `null` | Information about the currently selected interval, and set of allowed intervals for the chart. See `getIntervalsForQuery`\n`isRequesting` | Boolean | `false` | Render a chart placeholder to signify an in-flight data request\n`legendPosition` | One of: 'bottom', 'side', 'top' | `null` | Position the legend must be displayed in. If it's not defined, it's calculated depending on the viewport width and the mode\n`legendTotals` | Object | `null` | Values to overwrite the legend totals. If not defined, the sum of all line values will be used\n`screenReaderFormat` | One of type: string, func | `'%B %-d, %Y'` | A datetime formatting string or overriding function to format the screen reader labels\n`showHeaderControls` | Boolean | `true` | Wether header UI controls must be displayed\n`title` | String | `null` | A title describing this chart\n`tooltipLabelFormat` | One of type: string, func | `'%B %-d, %Y'` | A datetime formatting string or overriding function to format the tooltip label\n`tooltipValueFormat` | One of type: string, func | `','` | A number formatting string or function to format the value displayed in the tooltips\n`tooltipTitle` | String | `null` | A string to use as a title for the tooltip. Takes preference over `tooltipLabelFormat`\n`valueType` | String | `null` | What type of data is to be displayed? Number, Average, String?\n`xFormat` | String | `'%d'` | A datetime formatting string, passed to d3TimeFormat\n`x2Format` | String | `'%b %Y'` | A datetime formatting string, passed to d3TimeFormat\n`yBelow1Format` | String | `null` | A number formatting string, passed to d3Format\n`yFormat` | String | `null` | A number formatting string, passed to d3Format\n`currency` | Object | `{}` | An object with currency properties for usage in the chart. The following properties are expected: `decimal`, `symbol`, `symbolPosition`, `thousands`. This is passed to d3Format.\n"},846:function(e,t,n){"use strict";n.r(t),t.default="# D3 Base Component\n\nIntegrate React Lifecyle methods with d3.js charts.\n\n### Base Component Responsibilities\n\n* Create and manage mounting and unmounting parent `div` and `svg`\n* Handle resize events, resulting re-renders, and event listeners\n* Handle re-renders as a result of new props\n\n## Props\n\n### className\n{ string } A class to be applied to the parent `div`\n\n### getParams( node )\n{ function } A function returning an object containing required properties for drawing a chart. This object is created before re-render, making it an ideal place for calculating scales and other props or user input based properties.\n* `svg` { node } The parent `div`. Useful for calculating available widths\n\n### drawChart( svg, params )\n{ function } draw the chart\n* `svg` { node } Base element \n* `params` { Object } Properties created by the `getParams` function "},847:function(e,t,n){"use strict";n.r(t),t.default="CompareFilter\n===\n\nDisplays a card + search used to filter results as a comparison between objects.\n\n## Usage\n\n```jsx\nconst path = ''; // from React Router\nconst getLabels = () => Promise.resolve( [] );\nconst labels = {\n\thelpText: 'Select at least two products to compare',\n\tplaceholder: 'Search for products to compare',\n\ttitle: 'Compare Products',\n\tupdate: 'Compare',\n};\n\n<CompareFilter\n\ttype=\"products\"\n\tparam=\"product\"\n\tpath={ path }\n\tgetLabels={ getLabels }\n\tlabels={ labels }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`getLabels` | Function | `null` | (required) Function used to fetch object labels via an API request, returns a Promise\n`labels` | Object | `{}` | Object of localized labels\n`param` | String | `null` | (required) The parameter to use in the querystring\n`path` | String | `null` | (required) The `path` parameter supplied by React-Router\n`query` | Object | `{}` | The query string represented in object form\n`type` | String | `null` | (required) Which type of autocompleter should be used in the Search\n"},848:function(e,t,n){"use strict";n.r(t),t.default="Count\n===\n\nDisplay a number with a styled border.\n\n## Usage\n\n```jsx\n<Count count={ 33 } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`count` | Number | `null` | (required) Value of the number to be displayed\n`label` | String | `''` | A translated label with the number in context, used for screen readers\n"},849:function(e,t,n){"use strict";n.r(t),t.default="Date Range Picker\n===\n\nSelect a range of dates or single dates\n\n## Usage\n\n```jsx\nimport {\n\tgetDateParamsFromQuery,\n\tgetCurrentDates,\n\tisoDateFormat,\n\tloadLocaleData,\n} from '@woocommerce/date';\n\n/**\n * External dependencies\n */\nimport { partialRight } from 'lodash';\n\nconst query = {};\n\n// Fetch locale from store settings and load for date functions.\nconst localeSettings = {\n\tuserLocale: 'fr_FR',\n\tweekdaysShort: [ 'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam' ],\n};\nloadLocaleData( localeSettings );\n\nconst defaultDateRange = 'period=month&compare=previous_year';\nconst storeGetDateParamsFromQuery = partialRight( getDateParamsFromQuery, defaultDateRange );\nconst storeGetCurrentDates = partialRight( getCurrentDates, defaultDateRange );\nconst { period, compare, before, after } = storeGetDateParamsFromQuery( query );\nconst { primary: primaryDate, secondary: secondaryDate } = storeGetCurrentDates( query );\nconst dateQuery = {\n\tperiod,\n\tcompare,\n\tbefore,\n\tafter,\n\tprimaryDate,\n\tsecondaryDate,\n};\n\n<DateRangeFilterPicker\n\tkey=\"daterange\"\n\tonRangeSelect={ () => {} }\n\tdateQuery={ dateQuery }\n\tisoDateFormat={ isoDateFormat }\n/>\n```\n\n### Props\n\nName    | Type     | Default | Description\n------- | -------- | ------- | ---\n`isDateFormat` | string | `null` | (required) ISO date format string\n`onRangeSelect` | Function | `null` | Callback called when selection is made\n`dateQuery` | object | `null` | (required) Date initialization object\n\n## URL as the source of truth\n\nThe Date Range Picker reads parameters from the URL querystring and updates them by creating a link to reflect newly selected parameters, which is rendered as the \"Update\" button.\n\nURL Parameter | Default | Possible Values\n--- | --- | ---\n`period` | `today` | `today`, `yesterday`, `week`, `last_week`, `month`, `last_month`, `quarter`, `last_quarter`, `year`, `last_year`, `custom`\n`compare` | `previous_period` | `previous_period`, `previous_year`\n`start` | none | start date for custom periods `2018-04-15`. [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601)\n`end` | none | end date for custom periods `2018-04-15`. [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601)\n"},850:function(e,t,n){"use strict";n.r(t),t.default="Date\n===\n\nUse the `Date` component to display accessible dates or times.\n\n## Usage\n\n```jsx\n<Date date=\"2019-01-01\" />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`date` | One of type: string, object | `null` | (required) Date to use in the component\n`machineFormat` | String | `'Y-m-d H:i:s'` | Date format used in the `datetime` prop of the `time` element\n`screenReaderFormat` | String | `'F j, Y'` | Date format used for screen readers\n`visibleFormat` | String | `'Y-m-d'` | Date format displayed in the page\n"},851:function(e,t,n){"use strict";n.r(t),t.default="DropdownButton\n===\n\nA button useful for a launcher of a dropdown component. The button is 100% width of its container and displays single or multiple lines rendered as `<span/>` elments.\n\n## Usage\n\n```jsx\n<Dropdown\n\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t<DropdownButton\n\t\t\tonClick={ onToggle }\n\t\t\tisOpen={ isOpen }\n\t\t\tlabels={ [ 'All Products Sold' ] }\n\t\t/>\n\t) }\n\trenderContent={ () => (\n\t\t<p>Dropdown content here</p>\n\t) }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`labels` | Array | `null` | (required) An array of elements to be rendered as the content of the button\n`isOpen` | Boolean | `null` | Boolean describing if the dropdown in open or not\n"},852:function(e,t,n){"use strict";n.r(t),t.default='EllipsisMenu\n===\n\nThis is a dropdown menu hidden behind a vertical ellipsis icon. When clicked, the inner MenuItems are displayed.\n\n## Usage\n\n```jsx\n<EllipsisMenu label="Choose which analytics to display"\n\trenderContent={ ( { onToggle } )=> {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<MenuTitle>Display Stats</MenuTitle>\n\t\t\t\t<MenuItem onInvoke={ () => setState( { showCustomers: ! showCustomers } ) }>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel="Show Customers"\n\t\t\t\t\t\tchecked={ showCustomers }\n\t\t\t\t\t\tonChange={ () => setState( { showCustomers: ! showCustomers } ) }\n\t\t\t\t\t/>\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem onInvoke={ () => setState( { showOrders: ! showOrders } ) }>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel="Show Orders"\n\t\t\t\t\t\tchecked={ showOrders }\n\t\t\t\t\t\tonChange={ () => setState( { showOrders: ! showOrders } ) }\n\t\t\t\t\t/>\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem onInvoke={ onToggle }>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel="Close menu"\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t>\n\t\t\t\t\tClose Menu\n\t\t\t\t\t</Button>\n\t\t\t\t</MenuItem>\n\t\t\t</div>\n\t\t);\n\t} }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`label` | String | `null` | (required) The label shown when hovering/focusing on the icon button\n`renderContent` | Function | `null` | A function returning `MenuTitle`/`MenuItem` components as a render prop. Arguments from Dropdown passed as function arguments\n\n\nMenuItem\n===\n\n`MenuItem` is used to give the item an accessible wrapper, with the `menuitem` role and added keyboard functionality (`onInvoke`).\n`MenuItem`s can also be deemed "clickable", though this is disabled by default because generally the inner component handles\nthe click event.\n\n## Usage\n\n```jsx\n<MenuItem onInvoke={ onToggle }>\n\t<Button\n\t\tlabel="Close menu"\n\t\tonClick={ onToggle }\n\t>\n\tClose Menu\n\t</Button>\n</MenuItem>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`checked` | Boolean | `null` | Whether the menu item is checked or not. Only relevant for menu items with `isCheckbox`\n`children` | ReactNode | `null` | A renderable component (or string) which will be displayed as the content of this item. Generally a `ToggleControl`\n`isCheckbox` | Boolean | `false` | Whether the menu item is a checkbox (will render a FormToggle and use the `menuitemcheckbox` role)\n`isClickable` | Boolean | `false` | Boolean to control whether the MenuItem should handle the click event. Defaults to false, assuming your child component handles the click event\n`onInvoke` | Function | `null` | (required) A function called when this item is activated via keyboard ENTER or SPACE; or when the item is clicked (only if `isClickable` is set)\n\n\nMenuTitle\n===\n\n`MenuTitle` is another valid Menu child, but this does not have any accessibility attributes associated\n(so this should not be used in place of the `EllipsisMenu` prop `label`).\n\n## Usage\n\n```jsx\n<MenuTitle>Display Stats</MenuTitle>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`children` | ReactNode | `null` | A renderable component (or string) which will be displayed as the content of this item\n'},853:function(e,t,n){"use strict";n.r(t),t.default='EmptyContent\n===\n\nA component to be used when there is no data to show.\nIt can be used as an opportunity to provide explanation or guidance to help a user progress.\n\n## Usage\n\n```jsx\n<EmptyContent\n\ttitle="Nothing here"\n\tmessage="Some descriptive text"\n\tactionLabel="Reload page"\n\tactionURL="#"\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`title` | String | `null` | (required) The title to be displayed\n`message` | String | `null` | An additional message to be displayed\n`illustration` | String | `\'/empty-content.svg\'` | The url string of an image path. Prefix with `/` to load an image relative to the plugin directory\n`illustrationHeight` | Number | `null` | Height to use for the illustration\n`illustrationWidth` | Number | `400` | Width to use for the illustration\n`actionLabel` | String | `null` | (required) Label to be used for the primary action button\n`actionURL` | String | `null` | URL to be used for the primary action button\n`actionCallback` | Function | `null` | Callback to be used for the primary action button\n`secondaryActionLabel` | String | `null` | Label to be used for the secondary action button\n`secondaryActionURL` | String | `null` | URL to be used for the secondary action button\n`secondaryActionCallback` | Function | `null` | Callback to be used for the secondary action button\n`className` | String | `null` | Additional CSS classes\n'},854:function(e,t,n){"use strict";n.r(t),t.default="Filter Picker\n===\n\nModify a url query parameter via a dropdown selection of configurable options. This component manipulates the `filter` query parameter.\n\n## Usage\n\n```jsx\nimport { FilterPicker } from '@woocommerce/components';\n\nconst renderFilterPicker = () => {\n\tconst filters = [\n\t\t{ label: 'Breakfast', value: 'breakfast' },\n\t\t{\n\t\t\tlabel: 'Lunch',\n\t\t\tvalue: 'lunch',\n\t\t\tsubFilters: [\n\t\t\t\t{ label: 'Meat', value: 'meat', path: [ 'lunch' ] },\n\t\t\t\t{ label: 'Vegan', value: 'vegan', path: [ 'lunch' ] },\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Pescatarian',\n\t\t\t\t\tvalue: 'fish',\n\t\t\t\t\tpath: [ 'lunch' ],\n\t\t\t\t\tsubFilters: [\n\t\t\t\t\t\t{ label: 'Snapper', value: 'snapper', path: [ 'lunch', 'fish' ] },\n\t\t\t\t\t\t{ label: 'Cod', value: 'cod', path: [ 'lunch', 'fish' ] },\n\t\t\t\t\t\t// Specify a custom component to render (Work in Progress)\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: 'Other',\n\t\t\t\t\t\t\tvalue: 'other_fish',\n\t\t\t\t\t\t\tpath: [ 'lunch', 'fish' ],\n\t\t\t\t\t\t\tcomponent: 'OtherFish',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{ label: 'Dinner', value: 'dinner' },\n\t];\n\n\treturn <FilterPicker filters={ filters } path={ path } query={ query } />;\n};\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`config` | Object | `null` | (required) An array of filters and subFilters to construct the menu\n`path` | String | `null` | (required) The `path` parameter supplied by React-Router\n`query` | Object | `{}` | The query string represented in object form\n`onFilterSelect` | Function | `() => {}` | Function to be called after filter selection\n\n### `config` structure\n\nThe `config` prop has the following structure:\n\n- `label`: String - A label above the filter selector.\n- `staticParams`: Array - Url parameters to persist when selecting a new filter.\n- `param`: String - The url paramter this filter will modify.\n- `defaultValue`: String - The default paramter value to use instead of 'all'.\n- `showFilters`: Function - Determine if the filter should be shown. Supply a function with the query object as an argument returning a boolean.\n- `filters`: Array - Array of filter objects.\n\n### `filters` structure\n\nThe `filters` prop is an array of filter objects. Each filter object should have the following format:\n\n- `chartMode`: One of: 'item-comparison', 'time-comparison'\n- `component`: String - A custom component used instead of a button, might have special handling for filtering. TBD, not yet implemented.\n- `label`: String - The label for this filter. Optional only for custom component filters.\n- `path`: String - An array representing the \"path\" to this filter, if nested.\n- `subFilters`: Array - An array of more filter objects that act as \"children\" to this item. This set of filters is shown if the parent filter is clicked.\n- `value`: String - The value for this filter, used to set the `filter` query param when clicked, if there are no `subFilters`.\n"},855:function(e,t,n){"use strict";n.r(t),t.default='ReportFilters\n===\n\nAdd a collection of report filters to a page. This uses `DatePicker` & `FilterPicker` for the "basic" filters, and `AdvancedFilters`\nor a comparison card if "advanced" or "compare" are picked from `FilterPicker`.\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`advancedFilters` | Object | `{}` | Config option passed through to `AdvancedFilters`\n`siteLocale` | string| `en_US` | The locale of the site. Passed through to `AdvancedFilters`\n`currency` | object | {} | The currency of the site. Passed through to `AdvancedFilters`\n`filters` | Array | `[]` | Config option passed through to `FilterPicker` - if not used, `FilterPicker` is not displayed\n`path` | String | `null` | (required) The `path` parameter supplied by React-Router\n`query` | Object | `{}` | The query string represented in object form\n`showDatePicker` | Boolean | `true` | Whether the date picker must be shown\n`onDateSelect` | Function | `() => {}` | Function to be called after date selection\n`onFilterSelect` | Function | `null` | Function to be called after filter selection\n`onAdvancedFilterAction` | Function | `null` | Function to be called after an advanced filter action has been taken\n`storeDate` | object | `null` | (required) Date utility function object bound to store settings.\n'},856:function(e,t,n){"use strict";n.r(t),t.default="Flag\n===\n\nUse the `Flag` component to display a country's flag using the operating system's emojis.\n\n React component.\n\n## Usage\n\n```jsx\n<Flag code=\"VU\" size={ 48 } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`code` | String | `null` | Two letter, three letter or three digit country code\n`order` | Object | `null` | An order can be passed instead of `code` and the code will automatically be pulled from the billing or shipping data\n`className` | String | `null` | Additional CSS classes\n`size` | Number | `null` | Supply a font size to be applied to the emoji flag\n"},857:function(e,t,n){"use strict";n.r(t),t.default="Form\n===\n\nA form component to handle form state and provide input helper props.\n\n## Usage\n\n```jsx\nconst initialValues = { firstName: '' };\n\n<Form\n\tonSubmitCallback={ ( values ) => {} }\n\tinitialValues={ initialValues }\n>\n\t{ ( {\n\t\tgetInputProps,\n\t\tvalues,\n\t\terrors,\n\t\thandleSubmit,\n\t} ) => (\n\t\t<div>\n\t\t\t<TextControl\n\t\t\t\tlabel={ 'First Name' }\n\t\t\t\t{ ...getInputProps( 'firstName' ) }\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tisPrimary\n\t\t\t\tonClick={ handleSubmit }\n\t\t\t\tdisabled={ Object.keys( errors ).length }\n\t\t\t>\n\t\t\t\tSubmit\n\t\t\t</Button>\n\t\t</div>\n\t) }\n</Form>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`children` | * | `null` | A renderable component in which to pass this component's state and helpers. Generally a number of input or other form elements\n`errors` | Object | `{}` | Object of all initial errors to store in state\n`initialValues` | Object | `{}` | Object key:value pair list of all initial field values\n`onSubmitCallback` | Function | `noop` | Function to call when a form is submitted with valid fields\n`validate` | Function | `noop` | A function that is passed a list of all values and should return an `errors` object with error response\n`touched` |  | `{}` | \n"},858:function(e,t,n){"use strict";n.r(t),t.default='Gravatar\n===\n\nDisplay a users Gravatar.\n\n## Usage\n\n```jsx\n<Gravatar\n\tuser="[email protected]"\n\tsize={ 48 }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`user` | One of type: object, string | `null` | The address to hash for displaying a Gravatar. Can be an email address or WP-API user object\n`alt` | String | `null` | Text to display as the image alt attribute\n`title` | String | `null` | Text to use for the image\'s title\n`size` | Number | `60` | Default 60. The size of Gravatar to request\n`className` | String | `null` | Additional CSS classes\n'},859:function(e,t,n){"use strict";n.r(t),t.default="useFilters\n==========\n\n`useFilters` is a fork of [gutenberg's `withFilters`.](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/higher-order/with-filters) It is also a React [higher-order component.](https://facebook.github.io/react/docs/higher-order-components.html)\n\nWrapping a component with `useFilters` provides a filtering capability controlled externally by the list of `hookName`s.\n\n## Usage\n\n```jsx\nimport { applyFilters } from '@wordpress/hooks';\nimport { useFilters } from '@woocommerce/components';\n\nfunction MyCustomElement() {\n\treturn <h3>{ applyFilters( 'woocommerce.componentTitle', 'Title Text' ) }</h3>;\n}\n\nexport default useFilters( [ 'woocommerce.componentTitle' ] )( MyCustomElement );\n```\n\n`useFilters` expects an array argument which provides a list of hook names. It returns a function which can then be used in composing your component. The list of hook names are used in your component with `applyFilters`. Any filters added to the given hooks are run when added, and update your content (the title text, in this example).\n\n### Adding filters\n\n```js\nfunction editText( string ) {\n\treturn `Filtered: ${ string }`;\n}\naddFilter( 'woocommerce.componentTitle', 'editText', editText );\n```\n\nIf we added this filter, our `MyCustomElement` component would display:\n\n```html\n<h3>Filtered: Title Text</h3>\n```\n"},860:function(e,t,n){"use strict";n.r(t),t.default="ImageUpload\n===\n\nImageUpload - Adds an upload area for selecting or uploading an image from the WordPress media gallery.\n\n## Usage\n\n```jsx\n\t<ImageUpload image={ image } onChange={ newImage => setState( { url: newImage } ) } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`image` | Object | `null` | Image information containing media gallery `id` and image `url`\n`onChange` | Function | `null` | Function to trigger when the selected image changes\n`className` | String | `null` | Additional class name to style the component\n"},861:function(e,t,n){"use strict";n.r(t),t.default="Link\n===\n\nUse `Link` to create a link to another resource. It accepts a type to automatically\ncreate wp-admin links, wc-admin links, and external links.\n\n## Usage\n\n```jsx\n<Link\n\thref=\"edit.php?post_type=shop_coupon\"\n\ttype=\"wp-admin\"\n>\n\tCoupons\n</Link>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`href` | String | `null` | (required) The resource to link to\n`type` | One of: 'wp-admin', 'wc-admin', 'external' | `'wc-admin'` | Type of link. For wp-admin and wc-admin, the correct prefix is appended\n"},862:function(e,t,n){"use strict";n.r(t),t.default="List\n===\n\nList component to display a list of items.\n\n## Usage\n\n```jsx\nconst listItems = [\n\t{\n\t\ttitle: 'List item title',\n\t\tdescription: 'List item description text',\n\t},\n\t{\n\t\tbefore: <Gridicon icon=\"star\" />,\n\t\ttitle: 'List item with before icon',\n\t\tdescription: 'List item description text',\n\t},\n\t{\n\t\tbefore: <Gridicon icon=\"star\" />,\n\t\tafter: <Gridicon icon=\"chevron-right\" />,\n\t\ttitle: 'List item with before and after icons',\n\t\tdescription: 'List item description text',\n\t},\n\t{\n\t\ttitle: 'Clickable list item',\n\t\tdescription: 'List item description text',\n\t\tonClick: () => alert( 'List item clicked' ),\n\t},\n];\n\n<List items={ listItems } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | `null` | Additional class name to style the component\n`items` | Array | `null` | (required) An array of list items\n\n`items` structure:\n\n* `after`: ReactNode - Content displayed after the list item text.\n* `before`: ReactNode - Content displayed before the list item text.\n* `className`: String - Additional class name to style the list item.\n* `description`: String - Description displayed beneath the list item title.\n* `href`: String - Href attribute used in a Link wrapped around the item.\n* `onClick`: Function - Called when the list item is clicked.\n* `target`: String - Target attribute used for Link wrapper.\n* `title`: String - Title displayed for the list item."},863:function(e,t,n){"use strict";n.r(t),t.default="OrderStatus\n===\n\nUse `OrderStatus` to display a badge with human-friendly text describing the current order status.\n\n## Usage\n\n```jsx\nconst order = { status: 'processing' }; // Use a real WooCommerce Order here.\n\n<OrderStatus order={ order } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`order` | Object | `null` | (required) The order to display a status for. See: https://woocommerce.github.io/woocommerce-rest-api-docs/#order-properties\n`className` | String | `null` | Additional CSS classes\n`orderStatusMap` | Object | {} | A map of order status to human-friendly label.\n"},864:function(e,t,n){"use strict";n.r(t),t.default="Pagination\n===\n\nUse `Pagination` to allow navigation between pages that represent a collection of items.\nThe component allows for selecting a new page and items per page options.\n\n## Usage\n\n```jsx\n<Pagination\n\tpage={ 1 }\n\tperPage={ 10 }\n\ttotal={ 500 }\n\tonPageChange={ ( newPage ) => setState( { page: newPage } ) }\n\tonPerPageChange={ ( newPerPage ) => setState( { perPage: newPerPage } ) }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`page` | Number | `null` | (required) The current page of the collection\n`onPageChange` | Function | `noop` | A function to execute when the page is changed\n`perPage` | Number | `null` | (required) The amount of results that are being displayed per page\n`onPerPageChange` | Function | `noop` | A function to execute when the per page option is changed\n`total` | Number | `null` | (required) The total number of results\n`className` | String | `null` | Additional classNames\n`showPagePicker` | Boolean | `true` | Whether the page picker should be shown.\n`showPerPagePicker` | Boolean | `true` | Whether the per page picker should shown.\n`showPageArrowsLabel` | Boolean | `true` | Whether the page arrows label should be shown.\n"},865:function(e,t,n){"use strict";n.r(t),t.default="# Pill\n\nUse `Pill` to display a pill element containing child content.\n\n## Usage\n\n```jsx\n<Pill>Content</Pill>\n```\n"},866:function(e,t,n){"use strict";n.r(t),t.default="Plugins\n===\n\nUse `Plugins` to install and activate a list of plugins.\n\n## Usage\n\n```jsx\n<Plugins onComplete={ this.complete } pluginSlugs={ [ 'jetpack', 'woocommerce-services' ] } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`onComplete` | Function |  | Called when the plugin installer is completed\n`onSkip` | Function | `noop` | Called when the plugin installer is skipped\n`skipText` | String |  | Text used for the skip installer button\n`autoInstall` | Boolean | false | If installation should happen automatically, or require user confirmation\n`pluginSlugs` | Array | `[ 'jetpack', 'woocommerce-services' ],` | An array of plugin slugs to install.\n"},867:function(e,t,n){"use strict";n.r(t),t.default="ProductImage\n===\n\nUse `ProductImage` to display a product's or variation's featured image.\nIf no image can be found, a placeholder matching the front-end image\nplaceholder will be displayed.\n\n## Usage\n\n```jsx\n// Use a real WooCommerce Product here.\nconst product = {\n\timages: [\n\t\t{\n\t\t\tsrc: 'https://cldup.com/6L9h56D9Bw.jpg',\n\t\t},\n\t],\n};\n\n<ProductImage product={ product } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`width` | Number | `60` | The width of image to display\n`height` | Number | `60` | The height of image to display\n`className` | String | `''` | Additional CSS classes\n`product` | Object | `null` | Product or variation object. The image to display will be pulled from `product.images` or `variation.image`. See https://woocommerce.github.io/woocommerce-rest-api-docs/#product-properties and https://woocommerce.github.io/woocommerce-rest-api-docs/#product-variation-properties\n`alt` | String | `null` | Text to use as the image alt attribute\n"},868:function(e,t,n){"use strict";n.r(t),t.default="Rating\n===\n\nUse `Rating` to display a set of stars, filled, empty or half-filled, that represents a\nrating in a scale between 0 and the prop `totalStars` (default 5).\n\n## Usage\n\n```jsx\n<Rating rating={ 2.5 } totalStars={ 6 } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`rating` | Number | `0` | Number of stars that should be filled. You can pass a partial number of stars like `2.5`\n`totalStars` | Number | `5` | The total number of stars the rating is out of\n`size` | Number | `18` | The size in pixels the stars should be rendered at\n`className` | String | `null` | Additional CSS classes\n\n\nProductRating\n===\n\nDisplay a set of stars representing the product's average rating.\n\n## Usage\n\n```jsx\n// Use a real WooCommerce Product here.\nconst product = { average_rating: 3.5 };\n\n<ProductRating product={ product } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`product` | Object | `null` | (required) A product object containing a `average_rating`. See https://woocommerce.github.io/woocommerce-rest-api-docs/#products\n\n\nReviewRating\n===\n\nDisplay a set of stars representing the review's rating.\n\n## Usage\n\n```jsx\n// Use a real WooCommerce Review here.\nconst review = { rating: 5 };\n\n<ReviewRating review={ review } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`review` | Object | `null` | (required) A review object containing a `rating`. See https://woocommerce.github.io/woocommerce-rest-api-docs/#retrieve-product-reviews\n"},869:function(e,t,n){"use strict";n.r(t),t.default="ScrollTo\n===\n\n\n\n## Usage\n\n```jsx\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`offset` | String | ``'0'`` | The offset from the top of the component\n"},870:function(e,t,n){"use strict";n.r(t),t.default='SearchListControl\n===\n\nComponent to display a searchable, selectable list of items.\n\n## Usage\n\n```jsx\n<SearchListControl\n\tlist={ list }\n\tisLoading={ loading }\n\tselected={ selected }\n\tonChange={ items => setState( { selected: items } ) }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | `null` | Additional CSS classes\n`isHierarchical` | Boolean | `null` | Whether the list of items is hierarchical or not. If true, each list item is expected to have a parent property\n`isLoading` | Boolean | `null` | Whether the list of items is still loading\n`isSingle` | Boolean | `null` | Restrict selections to one item\n`list` | Array | `null` | A complete list of item objects, each with id, name properties. This is displayed as a clickable/keyboard-able list, and possibly filtered by the search term (searches name)\n`messages` | Object | `null` | Messages displayed or read to the user. Configure these to reflect your object type. See `defaultMessages` above for examples\n`onChange` | Function | `null` | (required) Callback fired when selected items change, whether added, cleared, or removed. Passed an array of item objects (as passed in via props.list)\n`onSearch` | Function | `null` | Callback fired when the search field is used\n`renderItem` | Function | `null` | Callback to render each item in the selection list, allows any custom object-type rendering\n`selected` | Array | `null` | (required) The list of currently selected items\n`search` | String | `null` | \n`setState` | Function | `null` | \n`debouncedSpeak` | Function | `null` | \n`instanceId` | Number | `null` | \n\n### `list` item structure:\n\n  - `id`: Number\n  - `name`: String\n\n### `messages` object structure:\n\n  - `clear`: String - A more detailed label for the "Clear all" button, read to screen reader users.\n  - `list`: String - Label for the list of selectable items, only read to screen reader users.\n  - `noItems`: String - Message to display when the list is empty (implies nothing loaded from the server\nor parent component).\n  - `noResults`: String - Message to display when no matching results are found. %s is the search term.\n  - `search`: String - Label for the search input\n  - `selected`: Function - Label for the selected items. This is actually a function, so that we can pass\nthrough the count of currently selected items.\n  - `updated`: String - Label indicating that search results have changed, read to screen reader users.\n\n\nSearchListItem\n===\n\n## Usage\n\nUsed implicitly by `SearchListControl` when the `renderItem` prop is omitted.\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | `null` | Additional CSS classes\n`countLabel` | ReactNode | `null` | Label to display if `showCount` is set to true. If undefined, it will use `item.count`\n`depth` | Number | `0` | Depth, non-zero if the list is hierarchical\n`item` | Object | `null` | Current item to display\n`isSelected` | Boolean | `null` | Whether this item is selected\n`isSingle` | Boolean | `null` | Whether this should only display a single item (controls radio vs checkbox icon)\n`onSelect` | Function | `null` | Callback for selecting the item\n`search` | String | `\'\'` | Search string, used to highlight the substring in the item name\n`showCount` | Boolean | `false` | Toggles the "count" bubble on/off\n'},871:function(e,t,n){"use strict";n.r(t),t.default="Search\n===\n\nA search box which autocompletes results while typing, allowing for the user to select an existing object\n(product, order, customer, etc). Currently only products are supported.\n\n## Usage\n\n```jsx\n<Search\n\ttype=\"products\"\n\tplaceholder=\"Search for a product\"\n\tselected={ selected }\n\tonChange={ items => setState( { selected: items } ) }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`allowFreeTextSearch` | Boolean | `false` | Render additional options in the autocompleter to allow free text entering depending on the type\n`className` | String | `null` | Class name applied to parent div\n`onChange` | Function | `noop` | Function called when selected results change, passed result list\n`type` | One of: 'categories', 'countries', 'coupons', 'customers', 'downloadIps', 'emails', 'orders', 'products', 'taxes', 'usernames', 'variations', 'custom' | `null` | (required) The object type to be used in searching\n`autocompleter` | Completer | `null` | Custom [completer](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/autocomplete#the-completer-interface) to be used in searching. Required when `type` is 'custom'\n`placeholder` | String | `null` | A placeholder for the search input\n`selected` | Array | `[]` | An array of objects describing selected values. If the label of the selected value is omitted, the Tag of that value will not be rendered inside the search box.\n`inlineTags` | Boolean | `false` | Render tags inside input, otherwise render below input\n`showClearButton` | Boolean | `false` | Render a 'Clear' button next to the input box to remove its contents\n`staticResults` | Boolean | `false` | Render results list positioned statically instead of absolutely\n`disabled` | Boolean | `false` | Whether the control is disabled or not\n\n### `selected` item structure:\n\n- `id`: One of type: number, string\n- `label`: String"},872:function(e,t,n){"use strict";n.r(t),t.default='SectionHeader\n===\n\nA header component. The header can contain a title, actions via children, and an `EllipsisMenu` menu.\n\n## Usage\n\n```jsx\n<SectionHeader title="Section Title" />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | `null` | Additional CSS classes\n`menu` | (custom validator) | `null` | An `EllipsisMenu`, with filters used to control the content visible in this card\n`title` | One of type: string, node | `null` | (required) The title to use for this card\n'},873:function(e,t,n){"use strict";n.r(t),t.default='H\n===\n\nThese components are used to frame out the page content for accessible heading hierarchy. Instead of defining fixed heading levels\n(`h2`, `h3`, …) you can use `<H />` to create "section headings", which look to the parent `<Section />`s for the appropriate\nheading level.\n\n## Usage\n\n```jsx\n<div>\n\t<H>Header using a contextual level (h3)</H>\n\t<Section component="article">\n\t\t<p>This is an article component wrapper.</p>\n\t\t<H>Another header with contextual level (h4)</H>\n\t\t<Section component={ false }>\n\t\t\t<p>There is no wrapper component here.</p>\n\t\t\t<H>This is an h5</H>\n\t\t</Section>\n\t</Section>\n</div>\n```\n\nSection\n===\n\nThe section wrapper, used to indicate a sub-section (and change the header level context).\n\n## Usage\n\nSee above\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`component` | One of type: func, string, bool | `null` | The wrapper component for this section. Optional, defaults to `div`. If passed false, no wrapper is used. Additional props passed to Section are passed on to the component\n`children` | ReactNode | `null` | The children inside this section, rendered in the `component`. This increases the context level for the next heading used\n'},874:function(e,t,n){"use strict";n.r(t),t.default="SegmentedSelection\n===\n\nCreate a panel of styled selectable options rendering stylized checkboxes and labels\n\n## Usage\n\n```jsx\n<SegmentedSelection\n\toptions={ [\n\t\t{ value: 'one', label: 'One' },\n\t\t{ value: 'two', label: 'Two' },\n\t\t{ value: 'three', label: 'Three' },\n\t\t{ value: 'four', label: 'Four' },\n\t] }\n\tselected={ selected }\n\tlegend=\"Select a number\"\n\tonSelect={ ( data ) => setState( { selected: data[ name ] } ) }\n\tname={ name }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | `null` | Additional CSS classes\n`options` | Array | `null` | (required) An Array of options to render. The array needs to be composed of objects with properties `label` and `value`\n`selected` | String | `null` | Value of selected item\n`onSelect` | Function | `null` | (required) Callback to be executed after selection\n`name` | String | `null` | (required) This will be the key in the key and value arguments supplied to `onSelect`\n`legend` | String | `null` | (required) Create a legend visible to screen readers\n\n### `options` structure\n\nThe `options` array needs to be composed of objects with properties:\n\n- `value`: String - Input value for this option.\n- `label`: String - Label for this option."},875:function(e,t,n){"use strict";n.r(t),t.default="# SelectControl\n\nA search box which filters options while typing,\nallowing a user to select from an option from a filtered list.\n\n## Usage\n\n```jsx\nconst options = [\n\t{\n\t\tkey: 'apple',\n\t\tlabel: 'Apple',\n\t\tvalue: { id: 'apple' },\n\t},\n\t{\n\t\tkey: 'apricot',\n\t\tlabel: 'Apricot',\n\t\tvalue: { id: 'apricot' },\n\t},\n];\n\n<SelectControl\n\tlabel=\"Single value\"\n\tonChange={ selected => setState( { singleSelected: selected } ) }\n\toptions={ options }\n\tplaceholder=\"Start typing to filter options...\"\n\tselected={ singleSelected }\n/>;\n```\n\n### Props\n\n| Name                     | Type         | Default    | Description                                                                                                                                                     |\n| ------------------------ | ------------ | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `className`              | string       | `null`     | Class name applied to parent div                                                                                                                                |\n| `excludeSelectedOptions` | boolean      | `true`     | Exclude already selected options from the options list                                                                                                          |\n| `onFilter`               | function     | `identity` | Add or remove items to the list of options after filtering, passed the array of filtered options and should return an array of options.                         |\n| `getSearchExpression`    | function     | `identity` | Function to add regex expression to the filter the results, passed the search query                                                                             |\n| `help`                   | string\\|node | `null`     | Help text to be appended beneath the input                                                                                                                      |\n| `inlineTags`             | boolean      | `false`    | Render tags inside input, otherwise render below input                                                                                                          |\n| `label`                  | string       | `null`     | A label to use for the main input                                                                                                                               |\n| `onChange`               | function     | `noop`     | Function called when selected results change, passed result list                                                                                                |\n| `onSearch`               | function     | `noop`     | Function to run after the search query is updated, passed the search query                                                                                      |\n| `options`                | array        | `null`     | (required) An array of objects for the options list. The option along with its key, label and value will be returned in the onChange event                      |\n| `placeholder`            | string       | `null`     | A placeholder for the search input                                                                                                                              |\n| `selected`               | array        | `[]`       | An array of objects describing selected values. If the label of the selected value is omitted, the Tag of that value will not be rendered inside the search box |\n| `maxResults`             | number       | `0`        | A limit for the number of results shown in the options menu. Set to 0 for no limit                                                                              |\n| `multiple`               | boolean      | `false`    | Allow multiple option selections                                                                                                                                |\n| `showClearButton`        | boolean      | `false`    | Render a 'Clear' button next to the input box to remove its contents                                                                                            |\n| `hideBeforeSearch`       | boolean      | `false`    | Only show list options after typing a search query                                                                                                              |\n| `staticList`             | boolean      | `false`    | Render results list positioned statically instead of absolutely                                                                                                 |\n"},876:function(e,t,n){"use strict";n.r(t),t.default="Spinner\n===\n\nSpinner - An indeterminate circular progress indicator.\n\n## Usage\n\n```jsx\n<Spinner />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | `null` | Additional class name to style the component\n"},877:function(e,t,n){"use strict";n.r(t),t.default="Stepper\n===\n\nA stepper component to indicate progress in a set number of steps.\n\n## Usage\n\n```jsx\nconst steps = [\n\t{\n\t\tkey: 'first',\n\t\tlabel: 'First',\n\t\tdescription: 'Step item description',\n\t\tcontent: <div>First step content.</div>,\n\t},\n\t{\n\t\tkey: 'second',\n\t\tlabel: 'Second',\n\t\tdescription: 'Step item description',\n\t\tcontent: <div>Second step content.</div>,\n\t},\n];\n\n<Stepper\n\tsteps={ steps }\n\tcurrentStep=\"first\"\n\tisPending={ true }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | `null` | Additional class name to style the component\n`currentStep` | String | `null` | (required) The current step's key\n`steps` | Array | `null` | (required) An array of steps used\n`isVertical` | Boolean | `false` | If the stepper is vertical instead of horizontal\n`isPending` | Boolean | `false` | Optionally mark the current step as pending to show a spinner\n\n### `steps` structure\n\nArray of step objects with properties:\n\n- `key:` String - Key used to identify step.\n- `label`: String - Label displayed in stepper.\n- `description`: String - Description displayed beneath the label.\n- `isComplete`: Boolean - Optionally mark a step complete regardless of step index.\n- `content`: ReactNode - Content displayed when the step is active."},878:function(e,t,n){"use strict";n.r(t),t.default='SummaryList\n===\n\nA container element for a list of SummaryNumbers. This component handles detecting & switching to the mobile format on smaller screens.\n\n## Usage\n\n```jsx\n<SummaryList>\n\t{ () => {\n\t\treturn [\n\t\t\t<SummaryNumber\n\t\t\t\tkey="revenue"\n\t\t\t\tvalue={ \'$829.40\' }\n\t\t\t\tlabel="Total Sales"\n\t\t\t\tdelta={ 29 }\n\t\t\t\thref="/analytics/report"\n\t\t\t/>,\n\t\t\t<SummaryNumber\n\t\t\t\tkey="refunds"\n\t\t\t\tvalue={ \'$24.00\' }\n\t\t\t\tlabel="Refunds"\n\t\t\t\tdelta={ -10 }\n\t\t\t\thref="/analytics/report"\n\t\t\t\tselected\n\t\t\t/>,\n\t\t];\n\t} }\n</SummaryList>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`children` | Function | `null` | (required) A function returning a list of `<SummaryNumber />`s\n`label` | String | `__( \'Performance Indicators\', \'woocommerce-admin\' )` | An optional label of this group, read to screen reader users\n\n\nSummaryNumber\n===\n\nA component to show a value, label, and an optional change percentage. Can also act as a link to a specific report focus.\n\n## Usage\n\nSee above\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`delta` | Number | `null` | A number to represent the percentage change since the last comparison period - positive numbers will show a green up arrow, negative numbers will show a red down arrow, and zero will show a flat right arrow. If omitted, no change value will display\n`href` | String | `\'\'` | An internal link to the report focused on this number\n`isOpen` | Boolean | `false` | Boolean describing whether the menu list is open. Only applies in mobile view, and only applies to the toggle-able item (first in the list)\n`label` | String | `null` | (required) A string description of this value, ex "Revenue", or "New Customers"\n`onToggle` | Function | `null` | A function used to switch the given SummaryNumber to a button, and called on click\n`prevLabel` | String | `__( \'Previous Period:\', \'woocommerce-admin\' )` | A string description of the previous value\'s timeframe, ex "Previous Year:"\n`prevValue` | One of type: number, string | `null` | A string or number value to display - a string is allowed so we can accept currency formatting. If omitted, this section won\'t display\n`reverseTrend` | Boolean | `false` | A boolean used to indicate that a negative delta is "good", and should be styled like a positive (and vice-versa)\n`selected` | Boolean | `false` | A boolean used to show a highlight style on this number\n`value` | One of type: number, string | `null` | A string or number value to display - a string is allowed so we can accept currency formatting\n`onLinkClickCallback` | Function | `noop` | A function to be called after a SummaryNumber, rendered as a link, is clicked\n\n\nSummaryListPlaceholder\n===\n\n`SummaryListPlaceholder` behaves like `SummaryList` but displays placeholder summary items instead of data. This can be used while loading data.\n\n## Usage\n\n```jsx\n<SummaryListPlaceholder numberOfItems={ 2 } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`numberOfItems` | Number | `null` | (required) An integer with the number of summary items to display\n`numberOfRows` |  | `5` | \n'},879:function(e,t,n){"use strict";n.r(t),t.default="TableCard\n===\n\nThis is an accessible, sortable, and scrollable table for displaying tabular data (like revenue and other analytics data).\nIt accepts `headers` for column headers, and `rows` for the table content.\n`rowHeader` can be used to define the index of the row header (or false if no header).\n\n`TableCard` serves as Card wrapper & contains a card header, `<Table />`, `<TableSummary />`, and `<Pagination />`.\nThis includes filtering and comparison functionality for report pages.\n\n## Usage\n\n```jsx\nconst headers = [\n\t{ key: 'month', label: 'Month' },\n\t{ key: 'orders', label: 'Orders' },\n\t{ key: 'revenue', label: 'Revenue' },\n];\nconst rows = [\n\t[\n\t\t{ display: 'January', value: 1 },\n\t\t{ display: 10, value: 10 },\n\t\t{ display: '$530.00', value: 530 },\n\t],\n\t[\n\t\t{ display: 'February', value: 2 },\n\t\t{ display: 13, value: 13 },\n\t\t{ display: '$675.00', value: 675 },\n\t],\n\t[\n\t\t{ display: 'March', value: 3 },\n\t\t{ display: 9, value: 9 },\n\t\t{ display: '$460.00', value: 460 },\n\t],\n];\nconst summary = [\n\t{ label: 'Gross Income', value: '$830.00' },\n\t{ label: 'Taxes', value: '$96.32' },\n\t{ label: 'Shipping', value: '$50.00' },\n];\n\n<TableCard\n\ttitle=\"Revenue Last Week\"\n\trows={ rows }\n\theaders={ headers }\n\tquery={ { page: 2 } }\n\trowsPerPage={ 7 }\n\ttotalRows={ 10 }\n\tsummary={ summary }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`compareBy` | String | `null` | The string to use as a query parameter when comparing row items\n`compareParam` | String | `'filter'` | Url query parameter compare function operates on\n`headers` | Array | `null` | An array of column headers (see `Table` props)\n`labels` | Object | `null` | Custom labels for table header actions\n`ids` | Array | `null` | A list of IDs, matching to the row list so that ids[ 0 ] contains the object ID for the object displayed in row[ 0 ]\n`isLoading` | Boolean | `false` | Defines if the table contents are loading. It will display `TablePlaceholder` component instead of `Table` if that's the case\n`onQueryChange` | Function | `noop` | A function which returns a callback function to update the query string for a given `param`\n`onColumnsChange` | Function | `noop` | A function which returns a callback function which is called upon the user changing the visiblity of columns\n`onSearch` | Function | `noop` | A function which is called upon the user searching in the table header\n`onSort` | Function | `undefined` | A function which is called upon the user changing the sorting of the table\n`downloadable` | Boolean | `false` | Whether the table must be downloadable. If true, the download button will appear\n`onClickDownload` | Function | `null` | A callback function called when the \"download\" button is pressed. Optional, if used, the download button will appear\n`query` | Object | `{}` | An object of the query parameters passed to the page, ex `{ page: 2, per_page: 5 }`\n`rowHeader` | One of type: number, bool | `0` | An array of arrays of display/value object pairs (see `Table` props)\n`rows` | Array | `[]` | Which column should be the row header, defaults to the first item (`0`) (see `Table` props)\n`rowsPerPage` | Number | `null` | (required) The total number of rows to display per page\n`searchBy` | String | `null` | The string to use as a query parameter when searching row items\n`showMenu` | Boolean | `true` | Boolean to determine whether or not ellipsis menu is shown\n`summary` | Array | `null` | An array of objects with `label` & `value` properties, which display in a line under the table. Optional, can be left off to show no summary\n`title` | String | `null` | (required) The title used in the card header, also used as the caption for the content in this table\n`totalRows` | Number | `null` | (required) The total number of rows (across all pages)\n`baseSearchQuery` | Object | `{}` | Pass in query parameters to be included in the path when onSearch creates a new url\n\n### `labels` structure\n\nTable header action labels object with properties:\n\n- `compareButton`: String - Compare button label\n- `downloadButton`: String - Download button label\n- `helpText`: String - \n- `placeholder`: String - \n\n### `summary` structure\n\nArray of summary items objects with properties:\n\n- `label`: ReactNode\n- `value`: One of type: string, number \n\n\nEmptyTable\n===\n\n`EmptyTable` displays a blank space with an optional message passed as a children node\nwith the purpose of replacing a table with no rows.\nIt mimics the same height a table would have according to the `numberOfRows` prop.\n\n## Usage\n\n```jsx\n<EmptyTable>\n\tThere are no entries.\n</EmptyTable>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`numberOfRows` | Number | `5` | An integer with the number of rows the box should occupy\n\n\nTablePlaceholder\n===\n\n`TablePlaceholder` behaves like `Table` but displays placeholder boxes instead of data. This can be used while loading.\n\n## Usage\n\n```jsx\nconst headers = [\n\t{ key: 'month', label: 'Month' },\n\t{ key: 'orders', label: 'Orders' },\n\t{ key: 'revenue', label: 'Revenue' },\n];\n\n<TablePlaceholder\n\tcaption=\"Revenue Last Week\"\n\theaders={ headers }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`query` | Object | `null` | An object of the query parameters passed to the page, ex `{ page: 2, per_page: 5 }`\n`caption` | String | `null` | (required) A label for the content in this table\n`headers` | Array | `null` | An array of column headers (see `Table` props)\n`numberOfRows` | Number | `5` | An integer with the number of rows to display\n\n\nTableSummary\n===\n\nA component to display summarized table data - the list of data passed in on a single line.\n\n## Usage\n\n```jsx\nconst summary = [\n\t{ label: 'Gross Income', value: '$830.00' },\n\t{ label: 'Taxes', value: '$96.32' },\n\t{ label: 'Shipping', value: '$50.00' },\n];\n\n<TableSummary data={ summary } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`data` | Array | `null` | An array of objects with `label` & `value` properties, which display on a single line\n\n\nTable\n===\n\nA table component, without the Card wrapper. This is a basic table display, sortable, but no default filtering.\n\nRow data should be passed to the component as a list of arrays, where each array is a row in the table.\nHeaders are passed in separately as an array of objects with column-related properties. For example,\nthis data would render the following table.\n\n```js\nconst headers = [ { label: 'Month' }, { label: 'Orders' }, { label: 'Revenue' } ];\nconst rows = [\n\t[\n\t\t{ display: 'January', value: 1 },\n\t\t{ display: 10, value: 10 },\n\t\t{ display: '$530.00', value: 530 },\n\t],\n\t[\n\t\t{ display: 'February', value: 2 },\n\t\t{ display: 13, value: 13 },\n\t\t{ display: '$675.00', value: 675 },\n\t],\n\t[\n\t\t{ display: 'March', value: 3 },\n\t\t{ display: 9, value: 9 },\n\t\t{ display: '$460.00', value: 460 },\n\t],\n]\n```\n\n|   Month  | Orders | Revenue |\n| ---------|--------|---------|\n| January  |     10 | $530.00 |\n| February |     13 | $675.00 |\n| March    |      9 | $460.00 |\n\n## Usage\n\n```jsx\n<Table\n\tcaption=\"Revenue Last Week\"\n\trows={ rows }\n\theaders={ headers }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`ariaHidden` | Boolean | `false` | Controls whether this component is hidden from screen readers. Used by the loading state, before there is data to read. Don't use this on real tables unless the table data is loaded elsewhere on the page\n`caption` | String | `null` | (required) A label for the content in this table\n`className` | String | `null` | Additional CSS classes\n`headers` | Array | `[]` | An array of column headers, as objects\n`onSort` | Function | `noop` | A function called when sortable table headers are clicked, gets the `header.key` as argument\n`query` | Object | `{}` | The query string represented in object form\n`rows` | Array | `null` | (required) An array of arrays of display/value object pairs\n`rowHeader` | One of type: number, bool | `0` | Which column should be the row header, defaults to the first item (`0`) (but could be set to `1`, if the first col is checkboxes, for example). Set to false to disable row headers\n\n### `headers` structure\n\nArray of column header objects with properties:\n\n- `defaultSort`: Boolean - Boolean, true if this column is the default for sorting. Only one column should have this set.\n- `defaultOrder`: String - String, asc|desc if this column is the default for sorting. Only one column should have this set.\n- `isLeftAligned`: Boolean - Boolean, true if this column should be aligned to the left.\n- `isNumeric`: Boolean - Boolean, true if this column is a number value.\n- `isSortable`: Boolean - Boolean, true if this column is sortable.\n- `key`: String - The API parameter name for this column, passed to `orderby` when sorting via API.\n- `label`: ReactNode - The display label for this column.\n- `required`: Boolean - Boolean, true if this column should always display in the table (not shown in toggle-able list).\n- `screenReaderLabel`: String - The label used for screen readers for this column. \n\n### `rows` structure\n\nArray of arrays representing rows and columns. Column object properties:\n\n- `display`: ReactNode - Display value, used for rendering - strings or elements are best here.\n- `value`: One of type: string, number, bool"},880:function(e,t,n){"use strict";n.r(t),t.default='Tag\n===\n\nThis component can be used to show an item styled as a "tag", optionally with an `X` + "remove"\nor with a popover that is shown on click.\n\n\n\n## Usage\n\n```jsx\n<Tag label="My tag" id={ 1 } />\n<Tag label="Removable tag" id={ 2 } remove={ noop } />\n<Tag label="Tag with popover" popoverContents={ ( <p>This is a popover</p> ) } />\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`id` | One of type: number, string | `null` | The ID for this item, used in the remove function\n`label` | String | `null` | (required) The name for this item, displayed as the tag\'s text\n`popoverContents` | ReactNode | `null` | Contents to display on click in a popover\n`remove` | Function | `null` | A function called when the remove X is clicked. If not used, no X icon will display\n`screenReaderLabel` | String | `null` | A more descriptive label for screen reader users. Defaults to the `name` prop\n'},881:function(e,t,n){"use strict";n.r(t),t.default='TextControlWithAffixes\n===\n\nThis component is essentially a wrapper (really a reimplementation) around the\nTextControl component that adds support for affixes, i.e. the ability to display\na fixed part either at the beginning or at the end of the text input.\n\n## Usage\n\n```jsx\n<TextControlWithAffixes\n    suffix="%"\n    label="Text field with a suffix"\n    value={ fourth }\n    onChange={ value => setState( { fourth: value } ) }\n/>\n<TextControlWithAffixes\n    prefix="$"\n    label="Text field with prefix and help text"\n    value={ fifth }\n    onChange={ value => setState( { fifth: value } ) }\n    help="This is some help text."\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`label` | String | `null` | If this property is added, a label will be generated using label property as the content\n`help` | String | `null` | If this property is added, a help text will be generated using help property as the content\n`type` | String | `\'text\'` | Type of the input element to render. Defaults to "text"\n`value` | String | `null` | (required) The current value of the input\n`className` | String | `null` | The class that will be added with "components-base-control" to the classes of the wrapper div. If no className is passed only components-base-control is used\n`onChange` | Function | `null` | (required) A function that receives the value of the input\n`prefix` | ReactNode | `null` | Markup to be inserted at the beginning of the input\n`suffix` | ReactNode | `null` | Markup to be appended at the end of the input\n`disabled` | Boolean | `null` | Disables the field\n'},882:function(e,t,n){"use strict";n.r(t),t.default='TextControl\n===\n\nAn input field use for text inputs in forms.\n\n## Usage\n\n```jsx\n<TextControl\n\tlabel="Input label"\n\tvalue={ value }\n\tonChange={ value => setState( { value } ) }\n/>;\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | ``null`` | Additional CSS classes\n`disabled` | Boolean | ``null`` | Disables the field\n`label` | String | ``null`` | Input label used as a placeholder\n`onClick` | Function | ``null`` | On click handler called when the component is clicked, passed the click event\n`value` | String | ``null`` | The value of the input field\n'},883:function(e,t,n){"use strict";n.r(t),t.default="Timeline\n===\n\nThis is a timeline for displaying data, such as events, in chronological order.\nIt accepts `items` for the timeline content and will order the data for you.\n\n## Usage\n\n```jsx\nimport Timeline from './Timeline';\nimport { orderByOptions, groupByOptions } from './Timeline';\nimport GridIcon from 'gridicons';\n\nconst items = [\n  {\n    date: new Date( 2019, 9, 28, 9, 0 ),\n    icon: <GridIcon icon={ 'checkmark' } />,\n    headline: 'A payment of $90.00 was successfully charged',\n    body: [\n      <p key={ '1' }>{ 'Fee: $2.91 ( 2.9% + $0.30 )' }</p>,\n      <p key={ '2' }>{ 'Net deposit: $87.09' }</p>,\n    ],\n  },\n  {\n    date: new Date( 2019, 9, 28, 9, 32 ),\n    icon: <GridIcon icon={ 'plus' } />,\n    headline: '$94.16 was added to your October 29, 2019 deposit',\n    body: [],\n  },\n  {\n    date: new Date( 2019, 9, 27, 20, 9 ),\n    icon: <GridIcon icon={ 'checkmark' } className={ 'is-success' } />,\n    headline: 'A payment of $90.00 was successfully authorized',\n    body: [],\n  },\n]\n\n<Timeline\n  items={ items }\n  groupBy={ groupByOptions.DAY }\n  orderBy={ orderByOptions.ASC }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | `''` | Additional class names that can be applied for styling purposes\n`items` | Array | `[]` | An array of items to be displayed on the timeline\n`orderBy` | String | `'asc'` | How the items should be ordered, either `'asc'` or `'desc'`\n`groupBy` | String | `'day'` | How the items should be grouped, one of `'day'`, `'week'`, or `'month'`\n`dateFormat` | String | `'F j, Y'` | PHP date format string used to format dates, see php.net/date\n`clockFormat` | String | `'g:ia'` | PHP clock format string used to format times, see php.net/date\n\n\n### `items` structure\n\nA list of items with properties:\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`date` | Date | Required | JavaScript Date object set to when this event happened\n`icon` | Element | Required | The element used to represent the icon for this event\n`headline` | Element | Required | The element used to represent the title of this event\n`body` | Array | `[]` | Elements that contain details pertaining to this event\n`hideTimestamp` | Bool | `false` | Allows the user to hide the timestamp associated with this event\n\nIcon color can be customized by adding 1 of 3 classes to the icon element: `is-success` (green), `is-warning` (yellow), and `is-error` (red)\n  - If no class is provided the icon will be gray\n"},884:function(e,t,n){"use strict";n.r(t),t.default="ViewMoreList\n===\n\nThis component displays a 'X more' button that displays a list of items on a popover when clicked.\n\n\n\n## Usage\n\n```jsx\n<ViewMoreList\n    items={ [ <i>Lorem</i>, <i>Ipsum</i>, <i>Dolor</i>, <i>Sit</i> ] }\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`items` | Array | `[]` | `ReactNodes` to list in the popover\n"},885:function(e,t,n){"use strict";n.r(t),t.default='WebPreview\n===\n\nWebPreview component to display an iframe of another page.\n\n## Usage\n\n```jsx\n<WebPreview\n    title="My Web Preview"\n    src="https://themes.woocommerce.com/?name=galleria"\n/>\n```\n\n### Props\n\nName | Type | Default | Description\n--- | --- | --- | ---\n`className` | String | `null` | Additional class name to style the component\n`loadingContent` | ReactNode | `<Spinner />` | Content shown when iframe is still loading\n`onLoad` | Function | `noop` | Function to fire when iframe content is loaded\n`src` | String | `null` | (required) Iframe src to load\n`title` | String | `null` | (required) Iframe title\n'},886:function(e){e.exports=JSON.parse('[{"component":"AdvancedFilters"},{"component":"AnimationSlider"},{"component":"Calendar"},{"component":"Card"},{"component":"Chart"},{"component":"CompareFilter"},{"component":"Count"},{"component":"Date"},{"component":"DateRangeFilterPicker"},{"component":"DropdownButton"},{"component":"EllipsisMenu"},{"component":"EmptyContent"},{"component":"FilterPicker"},{"component":"Flag"},{"component":"Form"},{"component":"Gravatar"},{"component":"ImageAsset"},{"component":"ImageUpload"},{"component":"Link"},{"component":"List"},{"component":"OrderStatus"},{"component":"Pagination"},{"component":"Pill"},{"component":"ProductImage"},{"component":"Rating"},{"component":"ScrollTo"},{"component":"Search"},{"component":"SearchListControl"},{"component":"Section"},{"component":"SegmentedSelection"},{"component":"SelectControl"},{"component":"Spinner"},{"component":"SplitButton"},{"component":"Stepper"},{"component":"Summary"},{"component":"Table"},{"component":"Tag"},{"component":"TextControl"},{"component":"TextControlWithAffixes"},{"component":"ViewMoreList"},{"component":"WebPreview"}]')},887:function(e,t,n){},931:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return U}));var a=n(13),r=n.n(a),o=n(12),l=n.n(o),i=n(14),s=n.n(i),c=n(15),u=n.n(c),d=n(6),p=n.n(d),m=n(0),h=n(4),f=n.n(h),b=n(2),g=n(16),y=n.n(g),v=n(37),S=n.n(v),w=n(7),j=n.n(w),O=n(5),T=n.n(O),x=n(10),E=n.n(x);function C(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,a=p()(e);if(t){var r=p()(this).constructor;n=Reflect.construct(a,arguments,r)}else n=a.apply(this,arguments);return u()(this,n)}}var D=function(e){s()(o,e);var t,a=C(o);function o(){var e;r()(this,o);for(var t=arguments.length,n=new Array(t),l=0;l<t;l++)n[l]=arguments[l];return e=a.call.apply(a,[this].concat(n)),T()(j()(e),"state",{example:null}),e}return l()(o,[{key:"componentDidMount",value:function(){this.getExample()}},{key:"getExample",value:(t=S()(y.a.mark((function e(){var t;return y.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:try{t=n(793)("./".concat(this.props.filePath,"/docs/example"))}catch(e){console.error(e)}if(t){e.next=3;break}return e.abrupt("return");case 3:this.setState({example:E.a.createElement(t.default||t)});case 4:case"end":return e.stop()}}),e,this)}))),function(){return t.apply(this,arguments)})},{key:"render",value:function(){var e=this.state.example;return Object(m.createElement)("div",{className:"woocommerce-devdocs__example"},e)}}]),o}(m.Component),k=n(835),A=n.n(k),P=n(838),R=n.n(P);n(839);function F(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,a=p()(e);if(t){var r=p()(this).constructor;n=Reflect.construct(a,arguments,r)}else n=a.apply(this,arguments);return u()(this,n)}}R.a.languages.es6=R.a.languages.javascript,A.a.setOptions({highlight:function(e,t){var n=R.a.languages[t];return n?R.a.highlight(e,n):e}});var N=function(e){s()(a,e);var t=F(a);function a(){var e;r()(this,a);for(var n=arguments.length,o=new Array(n),l=0;l<n;l++)o[l]=arguments[l];return e=t.call.apply(t,[this].concat(o)),T()(j()(e),"state",{readme:null}),e}return l()(a,[{key:"componentDidMount",value:function(){this.getReadme()}},{key:"getReadme",value:function(){var e=this.props.filePath,t=n(840)("./".concat(e,"/README.md")).default;t&&this.setState({readme:t})}},{key:"render",value:function(){var e=this.state.readme;return e?Object(m.createElement)("div",{className:"woocommerce-devdocs__docs",dangerouslySetInnerHTML:{__html:A()(e)}}):null}}]),a}(m.Component),I=n(55),M=n(886);n(887);function q(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,a=p()(e);if(t){var r=p()(this).constructor;n=Reflect.construct(a,arguments,r)}else n=a.apply(this,arguments);return u()(this,n)}}var L=function(e){return e.replace(/\.?([A-Z])/g,(function(e,t){return"-"+t.toLowerCase()})).replace(/^-/,"")},U=function(e){s()(n,e);var t=q(n);function n(){return r()(this,n),t.apply(this,arguments)}return l()(n,[{key:"render",value:function(){var e=this.props.query.component,t=f()("woocommerce_devdocs",{"is-single":e,"is-list":!e}),n=M;e&&(n=[Object(b.find)(M,(function(t){return e===L(t.component)}))]);return Object(m.createElement)("div",{className:t},n.map((function(t){var n=function(e){var t=Object(b.get)(e,"component");return{componentName:t,filePath:Object(b.get)(e,"filePath",L(t))}}(t),a=n.componentName,r=n.filePath,o=f()("woocommerce-devdocs__card","woocommerce-devdocs__card--".concat(r),"woocommerce-analytics__card");return Object(m.createElement)(m.Fragment,{key:a},Object(m.createElement)(I.Card,{key:"".concat(a,"-example"),className:o,title:e?a:Object(m.createElement)(I.Link,{href:"admin.php?page=wc-admin&path=/devdocs&component=".concat(r),type:"wc-admin"},a),action:e?Object(m.createElement)(I.Link,{href:"?page=wc-admin&path=/devdocs",type:"wc-admin"},"Full list"):null},Object(m.createElement)(D,{asyncName:a,component:a,filePath:r})),e&&Object(m.createElement)(N,{key:"".concat(a,"-readme"),componentName:a,filePath:r}))})))}}]),n}(m.Component)}}]);