@metrostar/comet-uswds - npm Package Compare versions

Comparing version 2.2.0-beta-0 to 2.2.0

dist/cjs/components/alert/alert.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
      */
-    type: 'info' | 'warning' | 'error' | 'success';
+    type: 'info' | 'warning' | 'error' | 'success' | 'emergency';
     /**
@@ -13,0 +13,0 @@ * Whether or not to display the alert

dist/cjs/components/index.d.ts

@@ -0,2 +1,49 @@
+export { default as Accordion, AccordionItem } from './accordion';
+export type { AccordionItemProps } from './accordion';
 export { default as Alert } from './alert';
 export { default as Banner } from './banner';
+export { default as Breadcrumb, BreadcrumbItem } from './breadcrumb';
+export type { BreadcrumbItemProps } from './breadcrumb';
+export { default as Button } from './button';
+export { default as ButtonGroup } from './button-group';
+export { default as Card, CardFooter, CardBody, CardHeader } from './card';
+export { default as CharacterCount, CharacterCountContainer } from './character-count';
+export { default as Checkbox, CheckboxGroup } from './checkbox';
+export type { CheckboxData } from './checkbox';
+export { default as ComboBox } from './combo-box';
+export type { ComboBoxOptionProps } from './combo-box';
+export { default as DatePicker } from './date-picker';
+export { default as DateRangePicker } from './date-range-picker';
+export { default as ErrorMessages } from './error-messages';
+export { default as FileInput } from './file-input';
+export { default as Form } from './form';
+export { default as FormGroup } from './form-group';
+export { default as Icon } from './icon';
+export { default as TextInput } from './text-input';
+export { default as Label } from './label';
+export { default as List } from './list';
+export type { ListItem } from './list';
+export { default as MemorableDate } from './memorable-date';
+export { default as Modal } from './modal';
+export { default as Pagination } from './pagination';
+export type { CreatePageUrlHandler, OnPageHandler } from './pagination';
+export { default as ProcessList, ProcessListStep } from './process-list';
+export type { ProcessListStepProps } from './process-list';
+export { default as Prose } from './prose';
+export { default as RadioButton, RadioButtonGroup } from './radio-button';
+export type { RadioButtonData } from './radio-button';
+export { default as RangeSlider } from './range-slider';
+export { default as Search } from './search';
+export { default as Select, SelectOption } from './select';
+export type { SelectOptionProps } from './select';
+export { default as SideNavigation, SideNavigationItem } from './side-navigation';
+export type { SideNavigationItemProps } from './side-navigation';
+export { default as SiteAlert } from './site-alert';
+export { default as StepIndicator } from './step-indicator';
+export { default as SummaryBox } from './summary-box';
+export { default as Table } from './table';
+export type { TableColumn, TableCell } from './table';
+export { default as Tag } from './tag';
+export { default as TextArea } from './text-area';
+export { default as TimePicker } from './time-picker';
+export { default as Tooltip } from './tooltip';

dist/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),a=require("@uswds/uswds/js/usa-accordion"),n=require("@uswds/uswds/js/usa-banner"),r=require("@uswds/uswds/img/us_flag_small.png"),t=require("@uswds/uswds/img/icon-https.svg"),i=require("@uswds/uswds/img/icon-dot-gov.svg");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(a),o=c(n),d=c(r),u=c(t),g=c(i);function b(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var j,f={exports:{}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),a=require("@uswds/uswds/js/usa-accordion"),n=require("@uswds/uswds/js/usa-banner"),t=require("@uswds/uswds/img/us_flag_small.png"),i=require("@uswds/uswds/img/icon-https.svg"),r=require("@uswds/uswds/img/icon-dot-gov.svg"),l=require("@uswds/uswds/js/usa-character-count"),c=require("@uswds/uswds/js/usa-combo-box"),o=require("@uswds/uswds/js/usa-date-picker"),d=require("@uswds/uswds/js/usa-date-range-picker"),u=require("@uswds/uswds/js/usa-file-input"),m=require("@uswds/uswds/img/sprite.svg"),h=require("@uswds/uswds/js/usa-modal"),g=require("@uswds/uswds/img/usa-icons-bg/search--white.svg"),b=require("@uswds/uswds/js/usa-table"),j=require("@uswds/uswds/js/usa-time-picker"),p=require("@uswds/uswds/js/usa-tooltip");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=x(s),_=x(a),v=x(n),O=x(t),N=x(i),y=x(r),k=x(l),w=x(c),C=x(o),S=x(d),$=x(u),L=x(m),E=x(h),F=x(g),V=x(b),q=x(j),T=x(p);function M(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var P,A={exports:{}};
 /*!
@@ -6,3 +6,3 @@ Copyright (c) 2018 Jed Watson.
 	http://jedwatson.github.io/classnames
-*/j=f,function(){var e={}.hasOwnProperty;function s(){for(var e="",s=0;s<arguments.length;s++){var r=arguments[s];r&&(e=n(e,a(r)))}return e}function a(a){if("string"==typeof a||"number"==typeof a)return a;if("object"!=typeof a)return"";if(Array.isArray(a))return s.apply(null,a);if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]"))return a.toString();var r="";for(var t in a)e.call(a,t)&&a[t]&&(r=n(r,t));return r}function n(e,s){return s?e?e+" "+s:e+s:e}j.exports?(s.default=s,j.exports=s):window.classNames=s}();var h=b(f.exports);const m={gov:"government",mil:"U.S. Department of Defense"};exports.Alert=({id:s,type:a,show:n=!0,slim:r,noIcon:t,heading:i,body:c,children:l})=>{const o=h("usa-alert",{"usa-alert--success":"success"===a,"usa-alert--warning":"warning"===a,"usa-alert--error":"error"===a,"usa-alert--info":"info"===a,"usa-alert--slim":r,"usa-alert--no-icon":t});return n?e.jsx("div",Object.assign({id:s,className:o},{children:e.jsxs("div",Object.assign({className:"usa-alert__body"},{children:[i&&e.jsx("h4",Object.assign({className:"usa-alert__heading"},{children:i})),null!=c?c:e.jsx("p",Object.assign({className:"usa-alert__text"},{children:l}))]}))})):e.jsx(e.Fragment,{})},exports.Banner=({id:a,type:n="gov"})=>{const[r]=s.useState(!1),t=s.useRef(null);return s.useEffect((()=>{const e=t.current;return o.default.on(e),l.default.on(e),()=>{o.default.off(e),l.default.off(e)}})),e.jsx("section",Object.assign({id:a,className:"usa-banner","aria-label":"Official government website",ref:t},{children:e.jsxs("div",Object.assign({className:"usa-accordion"},{children:[e.jsx("header",Object.assign({className:"usa-banner__header"},{children:e.jsxs("div",Object.assign({className:"usa-banner__inner"},{children:[e.jsx("div",Object.assign({className:"grid-col-auto"},{children:e.jsx("img",{className:"usa-banner__header-flag",src:d.default,alt:"U.S. flag"})})),e.jsxs("div",Object.assign({className:"grid-col-fill tablet:grid-col-auto"},{children:[e.jsx("p",Object.assign({className:"usa-banner__header-text"},{children:"An official website of the United States government"})),e.jsx("p",Object.assign({className:"usa-banner__header-action","aria-hidden":"true"},{children:"Here’s how you know"}))]})),e.jsx("button",Object.assign({className:"usa-accordion__button usa-banner__button","aria-expanded":"false","aria-controls":"gov-banner-default"},{children:e.jsx("span",Object.assign({className:"usa-banner__button-text"},{children:"Here’s how you know"}))}))]}))})),e.jsx("div",Object.assign({className:"usa-banner__content usa-accordion__content",id:"gov-banner-default",hidden:!r},{children:e.jsxs("div",Object.assign({className:"grid-row grid-gap-lg"},{children:[e.jsxs("div",Object.assign({className:"usa-banner__guidance tablet:grid-col-6"},{children:[e.jsx("img",{className:"usa-banner__icon usa-media-block__img",src:g.default,role:"img",alt:"","aria-hidden":"true"}),e.jsx("div",Object.assign({className:"usa-media-block__body"},{children:e.jsxs("p",{children:[e.jsxs("strong",{children:[" Official websites use .",n," "]}),e.jsx("br",{}),"A ",e.jsxs("strong",{children:[".",n]})," website belongs to an official"," ",m[n]," organization in the United States."]})}))]})),e.jsxs("div",Object.assign({className:"usa-banner__guidance tablet:grid-col-6"},{children:[e.jsx("img",{className:"usa-banner__icon usa-media-block__img",src:u.default,role:"img",alt:"","aria-hidden":"true"}),e.jsx("div",Object.assign({className:"usa-media-block__body"},{children:e.jsxs("p",{children:[e.jsx("strong",{children:" Secure .gov websites use HTTPS "}),e.jsx("br",{}),"A ",e.jsx("strong",{children:"lock"})," (",e.jsx("span",Object.assign({className:"icon-lock"},{children:e.jsxs("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"52",height:"64",viewBox:"0 0 52 64",className:"usa-banner__lock-image",role:"img","aria-labelledby":"banner-lock-title-default banner-lock-description-default",focusable:"false"},{children:[e.jsx("title",Object.assign({id:"banner-lock-title-default"},{children:"Lock"})),e.jsx("desc",Object.assign({id:"banner-lock-description-default"},{children:"A locked padlock"})),e.jsx("path",{fill:"#000000",fillRule:"evenodd",d:"M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"})]}))})),") or ",e.jsx("strong",{children:"https://"})," means you’ve safely connected to the .",n," ","website. Share sensitive information only on official, secure websites."]})}))]}))]}))}))]}))}))};
+*/P=A,function(){var e={}.hasOwnProperty;function s(){for(var e="",s=0;s<arguments.length;s++){var t=arguments[s];t&&(e=n(e,a(t)))}return e}function a(a){if("string"==typeof a||"number"==typeof a)return a;if("object"!=typeof a)return"";if(Array.isArray(a))return s.apply(null,a);if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]"))return a.toString();var t="";for(var i in a)e.call(a,i)&&a[i]&&(t=n(t,i));return t}function n(e,s){return s?e?e+" "+s:e+s:e}P.exports?(s.default=s,P.exports=s):window.classNames=s}();var D=M(A.exports);function I(e,s){void 0===s&&(s={});var a=s.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===a&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}I(".accordion-item {\n  margin: 10px;\n  border: none;\n}\n");const R=({id:s,label:a,expanded:n,children:t})=>e.jsxs("div",Object.assign({className:"accordion-item","data-testid":"accordion-item"},{children:[e.jsx("h4",Object.assign({className:"usa-accordion__heading"},{children:e.jsx("button",Object.assign({type:"button",className:"usa-accordion__button","data-testid":"accordion-button","aria-expanded":n,"aria-controls":s},{children:a}))})),e.jsx("div",Object.assign({id:s,className:"usa-accordion__content usa-prose text-left","data-testid":"accordion-content",hidden:!n},{children:t}))]})),B={gov:"government",mil:"U.S. Department of Defense"},z=({path:s,name:a,action:n})=>e.jsx("li",Object.assign({className:"usa-breadcrumb__list-item"},{children:e.jsx("span",Object.assign({className:"usa-breadcrumb__link span-link","data-testid":"breadcrumb-link",onClick:()=>!!n&&n(s)},{children:e.jsx("span",{children:a})}))}));function H(e,s){var a={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&s.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(n=Object.getOwnPropertySymbols(e);t<n.length;t++)s.indexOf(n[t])<0&&Object.prototype.propertyIsEnumerable.call(e,n[t])&&(a[n[t]]=e[n[t]])}return a}"function"==typeof SuppressedError&&SuppressedError;const U=s=>{var{id:a,name:n,label:t,value:i,checked:r,isTile:l,onChange:c,onClick:o}=s,d=H(s,["id","name","label","value","checked","isTile","onChange","onClick"]);const u=`${a}__usa-checkbox__input`,m=D("usa-checkbox__input",{"usa-checkbox__input--tile":l});return e.jsxs("div",Object.assign({id:a,className:"usa-checkbox"},{children:[e.jsx("input",Object.assign({className:m,id:u,type:"checkbox",name:n,defaultValue:i,defaultChecked:r,onChange:c,onClick:o},d)),e.jsx("label",Object.assign({className:"usa-checkbox__label",htmlFor:u},{children:t}))]}))},Y=s=>{var{defaultOption:a={value:"",label:"- Select -"},options:n,onChange:t,className:i,children:r}=s,l=H(s,["defaultOption","options","onChange","className","children"]);return r||n?e.jsxs("select",Object.assign({className:D("usa-select",i),onChange:t},l,{children:[G(a,-1),null!=r?r:null==n?void 0:n.map(G)]})):e.jsx(e.Fragment,{})},G=(s,a)=>s&&e.jsx("option",Object.assign({value:s.value},{children:s.label}),a);function J(e){if("string"==typeof e){return new Date(e).toISOString().substring(0,10)}return e.toISOString().substring(0,10)}const W=(e,s)=>{let a=null!=s?s:void 0;switch(e){case"ssn":a="^(?!(000|666|9))d{3} (?!00)d{2} (?!0000)d{4}$";break;case"phone_number":a="d{3}-d{3}-d{4}";break;case"zip_5_digit":a="\\d{5}";break;case"zip_9_digit":a="^[0-9]{5}(?:-[0-9]{4})?$"}return a},K=(e,s)=>{let a=null!=s?s:void 0;switch(e){case"ssn":a="___ __ ____";break;case"phone_number":a="___-___-____";break;case"zip_5_digit":a="_____";break;case"zip_9_digit":a="_____-____"}return a},Q=(e,s)=>{let a=null!=s?s:"text";if("phone_number"===e)a="tel";return a},X=(e,s)=>{let a=null!=s?s:"text";switch(e){case"ssn":case"phone_number":case"zip_5_digit":case"zip_9_digit":a="numeric"}return a};function Z(e,s,a){const n=[];for(;e<=s;e++)n.push(a(e));return n}function ee(s,a,n,t,i){const r=s===a,l=n-1===s?`last page, page ${s+1}`:`page ${s+1}`;return e.jsx("li",Object.assign({className:"usa-pagination__item usa-pagination__page-no"},{children:e.jsx("a",Object.assign({href:t(s),onClick:e=>i(e,s),className:D("usa-pagination__button",{"usa-current":r}),"aria-label":l,"aria-current":r?"page":void 0},{children:`${s+1}`}))}),s)}I(".current.usa-process-list__item::before {\n  border: 0.25rem solid #005ea2;\n  background-color: #005ea2;\n  color: #fff;\n}\n\n.current.usa-process-list__item {\n  border-left: 0.5rem solid #005ea2;\n}\n\n.current.usa-process-list__heading {\n  color: #005ea2;\n}\n\n.completed.usa-process-list__item::before {\n  border: 0.25rem solid #162e51;\n  background-color: #162e51;\n  color: #fff;\n}\n\n.completed.usa-process-list__item:not(.last) {\n  border-left: 0.5rem solid #162e51;\n}\n\n.completed.usa-process-list__heading {\n  color: #162e51;\n}\n");const se=({heading:s,headingClassName:a,headingElementName:n="h4",isCurrentStep:t,isCompletedStep:i,isLastStep:r,children:l})=>{const c=D("usa-process-list__item",{current:t&&!i,completed:i,last:r}),o=D("usa-process-list__heading",{current:t&&!i,completed:i,last:r},a);return e.jsxs("li",Object.assign({className:c},{children:[f.default.createElement(n,{className:o},s),l]}))},ae=s=>{var{id:a,name:n,label:t,value:i,checked:r,isTile:l,onChange:c,onClick:o}=s,d=H(s,["id","name","label","value","checked","isTile","onChange","onClick"]);const u=`${a}__usa-radio__input`,m=D("usa-radio__input",{"usa-radio__input--tile":l});return e.jsxs("div",Object.assign({id:a,className:"usa-radio"},{children:[e.jsx("input",Object.assign({className:m,id:u,type:"radio",name:n,defaultValue:i,defaultChecked:r,onChange:c,onClick:o},d)),e.jsx("label",Object.assign({className:"usa-radio__label",htmlFor:u},{children:t}))]}))},ne=({items:s,anchor:a})=>e.jsxs("li",Object.assign({className:"usa-sidenav__item"},{children:[a,s&&s.length>0&&e.jsx("ul",Object.assign({className:"usa-sidenav__sublist"},{children:s.map(((s,a)=>e.jsx(ne,{items:s.items,anchor:s.anchor},`side-nav-item-sublist-${a}`)))}))]}));exports.Accordion=({id:a,allowMultiSelect:n=!1,items:t,children:i})=>{if(!i&&!t)return e.jsx(e.Fragment,{});const r=s.useRef(null);return s.useEffect((()=>{const e=r.current;return e&&e.querySelectorAll("button").forEach((e=>{_.default.on(e)})),()=>{e&&e.querySelectorAll("button").forEach((e=>{_.default.off(e)}))}})),e.jsx("div",Object.assign({id:a,ref:r,className:D("usa-accordion",{"usa-accordion--multiselectable":n}),"data-allow-multiple":!!n||void 0},{children:null!=i?i:null==t?void 0:t.map(((s,a)=>e.jsx(R,Object.assign({id:s.id,label:s.label,expanded:s.expanded},{children:s.children}),`accordion-item-${a}`)))}))},exports.AccordionItem=R,exports.Alert=({id:s,type:a,show:n=!0,slim:t,noIcon:i,heading:r,body:l,children:c})=>{const o=D("usa-alert",{"usa-alert--success":"success"===a,"usa-alert--warning":"warning"===a,"usa-alert--error":"error"===a,"usa-alert--emergency":"emergency"===a,"usa-alert--info":"info"===a,"usa-alert--slim":t,"usa-alert--no-icon":i});return n?e.jsx("div",Object.assign({id:s,className:o},{children:e.jsxs("div",Object.assign({className:"usa-alert__body"},{children:[r&&e.jsx("h4",Object.assign({className:"usa-alert__heading"},{children:r})),null!=l?l:e.jsx("p",Object.assign({className:"usa-alert__text"},{children:c}))]}))})):e.jsx(e.Fragment,{})},exports.Banner=({id:a,type:n="gov"})=>{const[t]=s.useState(!1),i=s.useRef(null);return s.useEffect((()=>{const e=i.current;return v.default.on(e),_.default.on(e),()=>{v.default.off(e),_.default.off(e)}})),e.jsx("section",Object.assign({id:a,className:"usa-banner","aria-label":"Official government website",ref:i},{children:e.jsxs("div",Object.assign({className:"usa-accordion"},{children:[e.jsx("header",Object.assign({className:"usa-banner__header"},{children:e.jsxs("div",Object.assign({className:"usa-banner__inner"},{children:[e.jsx("div",Object.assign({className:"grid-col-auto"},{children:e.jsx("img",{className:"usa-banner__header-flag",src:O.default,alt:"U.S. flag"})})),e.jsxs("div",Object.assign({className:"grid-col-fill tablet:grid-col-auto"},{children:[e.jsx("p",Object.assign({className:"usa-banner__header-text"},{children:"An official website of the United States government"})),e.jsx("p",Object.assign({className:"usa-banner__header-action","aria-hidden":"true"},{children:"Here’s how you know"}))]})),e.jsx("button",Object.assign({className:"usa-accordion__button usa-banner__button","aria-expanded":"false","aria-controls":"gov-banner-default"},{children:e.jsx("span",Object.assign({className:"usa-banner__button-text"},{children:"Here’s how you know"}))}))]}))})),e.jsx("div",Object.assign({className:"usa-banner__content usa-accordion__content",id:"gov-banner-default",hidden:!t},{children:e.jsxs("div",Object.assign({className:"grid-row grid-gap-lg"},{children:[e.jsxs("div",Object.assign({className:"usa-banner__guidance tablet:grid-col-6"},{children:[e.jsx("img",{className:"usa-banner__icon usa-media-block__img",src:y.default,role:"img",alt:"","aria-hidden":"true"}),e.jsx("div",Object.assign({className:"usa-media-block__body"},{children:e.jsxs("p",{children:[e.jsxs("strong",{children:[" Official websites use .",n," "]}),e.jsx("br",{}),"A ",e.jsxs("strong",{children:[".",n]})," website belongs to an official"," ",B[n]," organization in the United States."]})}))]})),e.jsxs("div",Object.assign({className:"usa-banner__guidance tablet:grid-col-6"},{children:[e.jsx("img",{className:"usa-banner__icon usa-media-block__img",src:N.default,role:"img",alt:"","aria-hidden":"true"}),e.jsx("div",Object.assign({className:"usa-media-block__body"},{children:e.jsxs("p",{children:[e.jsx("strong",{children:" Secure .gov websites use HTTPS "}),e.jsx("br",{}),"A ",e.jsx("strong",{children:"lock"})," (",e.jsx("span",Object.assign({className:"icon-lock"},{children:e.jsxs("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"52",height:"64",viewBox:"0 0 52 64",className:"usa-banner__lock-image",role:"img","aria-labelledby":"banner-lock-title-default banner-lock-description-default",focusable:"false"},{children:[e.jsx("title",Object.assign({id:"banner-lock-title-default"},{children:"Lock"})),e.jsx("desc",Object.assign({id:"banner-lock-description-default"},{children:"A locked padlock"})),e.jsx("path",{fill:"#000000",fillRule:"evenodd",d:"M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"})]}))})),") or ",e.jsx("strong",{children:"https://"})," means you’ve safely connected to the .",n," ","website. Share sensitive information only on official, secure websites."]})}))]}))]}))}))]}))}))},exports.Breadcrumb=({id:s,current:a,action:n,items:t,children:i})=>i||t?e.jsx("nav",Object.assign({className:"usa-breadcrumb breadcrumb","aria-label":"Breadcrumbs,,",id:s},{children:e.jsxs("ol",Object.assign({className:"usa-breadcrumb__list"},{children:[null!=i?i:null==t?void 0:t.map(((s,a)=>e.jsx(z,{path:s.path,name:s.name,action:n},`breadcrumb-${a}`))),a?e.jsx("li",Object.assign({className:"usa-breadcrumb__list-item usa-current","aria-current":"true"},{children:e.jsx("span",{children:a})})):e.jsx(e.Fragment,{})]}))})):e.jsx(e.Fragment,{}),exports.BreadcrumbItem=z,exports.Button=s=>{var{id:a,type:n="button",variant:t="default",className:i,children:r}=s,l=H(s,["id","type","variant","className","children"]);const c=D("usa-button",{"usa-button--secondary":"secondary"===t,"usa-button--accent-cool":"accent-cool"===t,"usa-button--accent-warm":"accent-warm"===t,"usa-button--base":"base"===t,"usa-button--outline":"outline"===t,"usa-button--outline usa-button--inverse":"outline-inverse"===t,"usa-button--big":"big"===t,"usa-button--unstyled":"unstyled"===t},i);return e.jsx("button",Object.assign({id:a,type:n,className:c,"data-testid":"button"},l,{children:r}))},exports.ButtonGroup=({id:a,type:n="default",className:t,children:i})=>{const r=D("usa-button-group",{"usa-button-group--segmented":"segmented"===n},t);return e.jsx("ul",Object.assign({id:a,className:r},{children:s.Children.map(i,((s,a)=>e.jsx("li",Object.assign({className:"usa-button-group__item"},{children:s}),a)))}))},exports.Card=({id:s,className:a,children:n})=>{const t=D("usa-card__container",a);return e.jsx("div",Object.assign({className:"usa-card",id:s},{children:e.jsx("div",Object.assign({className:t},{children:n}))}))},exports.CardBody=({children:s})=>e.jsx("div",Object.assign({className:"usa-card__body"},{children:s})),exports.CardFooter=({children:s})=>e.jsx("div",Object.assign({className:"usa-card__footer"},{children:s})),exports.CardHeader=({children:s})=>e.jsx("div",Object.assign({className:"usa-card__header"},{children:e.jsx("h2",Object.assign({className:"usa-card__heading text-primary-dark"},{children:s}))})),exports.CharacterCount=s=>{var{id:a}=s,n=H(s,["id"]);return e.jsx("span",Object.assign({id:a,className:D("usa-hint","usa-character-count__message",n.className),"aria-live":"polite"},{children:n.children}))},exports.CharacterCountContainer=a=>{var{className:n}=a,t=H(a,["className"]);const i=s.useRef(null);return s.useEffect((()=>{const e=i.current;return k.default.on(e),()=>k.default.off(e)})),e.jsx("div",Object.assign({ref:i,className:D("usa-character-count",n)},t,{children:t.children}))},exports.Checkbox=U,exports.CheckboxGroup=({id:s,name:a,data:n,areTiles:t,onChange:i,onClick:r})=>e.jsx(e.Fragment,{children:n.map(((n,l)=>{const c=`${s}__checkbox${l}`;return e.jsx(U,{id:c,name:a,label:n.label,value:n.value,checked:n.checked,isTile:t,onChange:i,onClick:r},c)}))}),exports.ComboBox=a=>{var{placeholder:n}=a,t=H(a,["placeholder"]);const i=s.useRef(null);s.useLayoutEffect((()=>{const e=i.current;return w.default.on(e),()=>w.default.off(e)}));const r={className:"usa-combo-box",ref:i};return n&&(r["data-placeholder"]=n),t.defaultValue&&(r["data-default-value"]=t.defaultValue),e.jsx("div",Object.assign({},r,{children:e.jsx(Y,Object.assign({},t))}))},exports.DatePicker=a=>{var{minDate:n,maxDate:t,dateRange:i,defaultValue:r,onChange:l}=a,c=H(a,["minDate","maxDate","dateRange","defaultValue","onChange"]);const o=s.useRef(null);s.useLayoutEffect((()=>{const e=o.current,s=e.querySelector(".usa-date-picker__wrapper");s||C.default.on(e);const a=C.default.getDatePickerContext(e).externalInputEl;return l&&a.addEventListener("change",l),()=>{l&&a.removeEventListener("change",l),s&&C.default.off(e)}}),[]);const d={};return n&&(d["data-min-date"]=J(n)),t&&(d["data-max-date"]=J(t)),i&&(d["data-range-date"]=J(i)),r&&(d["data-default-value"]=J(r)),e.jsx("div",Object.assign({ref:o,className:"usa-date-picker"},d,{children:e.jsx("input",Object.assign({className:"usa-input",type:"text"},c))}))},exports.DateRangePicker=({id:a,children:n})=>{const t=s.useRef(null);return s.useLayoutEffect((()=>{const e=t.current;return S.default.on(e),()=>S.default.off(e)})),e.jsx("div",Object.assign({id:a,ref:t,className:"usa-date-range-picker"},{children:n}))},exports.ErrorMessages=({id:s,errors:a,children:n})=>n||a?e.jsx(e.Fragment,{children:null!=n?n:null==a?void 0:a.map(((a,n)=>e.jsx("span",Object.assign({id:`${s}-${n}`,className:"usa-error-message"},{children:a}),n)))}):e.jsx(e.Fragment,{}),exports.FileInput=a=>{const n=s.useRef(null);return s.useLayoutEffect((()=>{const e=n.current;return $.default.on(e),()=>$.default.off(e)}),[]),e.jsx("input",Object.assign({className:"usa-file-input",type:"file",ref:n},a))},exports.Form=s=>{var{id:a,isLarge:n=!1,className:t,children:i}=s,r=H(s,["id","isLarge","className","children"]);return e.jsx("form",Object.assign({id:a,className:D("usa-form",{"usa-form--large":n},t),style:{maxWidth:"unset"}},r,{children:i}))},exports.FormGroup=({id:s,errors:a,className:n,children:t})=>{const i=!!(a&&a.length>0),r=D("usa-form-group",{"usa-form-group--error":i},n);return e.jsx("div",Object.assign({id:s,className:r},{children:t}))},exports.Icon=({id:s,type:a,size:n="size-3",className:t="text-base-darkest"})=>{const i=D("usa-icon",`usa-icon--${n}`,t);return e.jsx("svg",Object.assign({id:s,className:i,"aria-hidden":"true",focusable:"false",role:"img"},{children:e.jsx("use",{xlinkHref:`${L.default}#${a}`})}))},exports.Label=s=>{var{htmlFor:a,required:n,children:t}=s,i=H(s,["htmlFor","required","children"]);return e.jsxs("label",Object.assign({className:"usa-label",htmlFor:a},i,{children:[t,n&&e.jsx("span",Object.assign({className:"text-red"},{children:" *"}))]}))},exports.List=s=>{var{id:a,type:n="unordered",variant:t="default",className:i,items:r}=s,l=H(s,["id","type","variant","className","items"]);const c=D("usa-list",{"usa-list--unstyled":"unstyled"===t},i),o=s=>s.map((s=>e.jsx("li",Object.assign({id:s.id},{children:s.value}),s.id)));return"unordered"===n?e.jsx("ul",Object.assign({id:a,className:c},l,{children:o(r)})):e.jsx("ol",Object.assign({id:a,className:c},l,{children:o(r)}))},exports.MemorableDate=s=>{var{id:a,defaultMonthValue:n,defaultDayValue:t,defaultYearValue:i,onMonthChange:r,onDayChange:l,onYearChange:c}=s,o=H(s,["id","defaultMonthValue","defaultDayValue","defaultYearValue","onMonthChange","onDayChange","onYearChange"]);return e.jsxs("div",Object.assign({id:`memorable-date-${a}`,className:"usa-memorable-date","data-testid":"memorable-date"},o,{children:[e.jsxs("div",Object.assign({className:"usa-form-group usa-form-group--month usa-form-group--select"},{children:[e.jsx("label",Object.assign({className:"usa-label",htmlFor:`memorable-date-month-${a}`},{children:"Month"})),e.jsxs("select",Object.assign({className:"usa-select",id:`memorable-date-month-${a}`,name:`memorable-date-month-${a}`,defaultValue:n,onChange:r},{children:[e.jsx("option",Object.assign({value:""},{children:"- Select -"})),e.jsx("option",Object.assign({value:1},{children:"01 - January"})),e.jsx("option",Object.assign({value:2},{children:"02 - February"})),e.jsx("option",Object.assign({value:3},{children:"03 - March"})),e.jsx("option",Object.assign({value:4},{children:"04 - April"})),e.jsx("option",Object.assign({value:5},{children:"05 - May"})),e.jsx("option",Object.assign({value:6},{children:"06 - June"})),e.jsx("option",Object.assign({value:7},{children:"07 - July"})),e.jsx("option",Object.assign({value:8},{children:"08 - August"})),e.jsx("option",Object.assign({value:9},{children:"09 - September"})),e.jsx("option",Object.assign({value:10},{children:"10 - October"})),e.jsx("option",Object.assign({value:11},{children:"11 - November"})),e.jsx("option",Object.assign({value:12},{children:"12 - December"}))]}))]})),e.jsxs("div",Object.assign({className:"usa-form-group usa-form-group--day"},{children:[e.jsx("label",Object.assign({className:"usa-label",htmlFor:`memorable-date-day-${a}`},{children:"Day"})),e.jsx("input",{className:"usa-input",id:`memorable-date-day-${a}`,name:`memorable-date-day-${a}`,minLength:1,maxLength:2,pattern:"[0-9]*",inputMode:"numeric",defaultValue:t,onChange:l})]})),e.jsxs("div",Object.assign({className:"usa-form-group usa-form-group--year"},{children:[e.jsx("label",Object.assign({className:"usa-label",htmlFor:`memorable-date-year-${a}`},{children:"Year"})),e.jsx("input",{className:"usa-input",id:`memorable-date-year-${a}`,name:`memorable-date-year-${a}`,minLength:4,maxLength:4,pattern:"[0-9]*",inputMode:"numeric",defaultValue:i,onChange:c})]}))]}))},exports.Modal=({id:a,heading:n,size:t="small",footer:i,children:r})=>{const l=s.useRef(null);s.useLayoutEffect((()=>{const e=l.current;return E.default.on(e),()=>E.default.off(e)}));const c=D("usa-modal",{"usa-modal--lg":"large"===t});return e.jsx("div",Object.assign({ref:l,className:c,id:a,"aria-labelledby":`${a}-heading`,"aria-describedby":`${a}-description`},{children:e.jsxs("div",Object.assign({className:"usa-modal__content"},{children:[e.jsxs("div",Object.assign({className:"usa-modal__main"},{children:[e.jsx("h2",Object.assign({className:"usa-modal__heading",id:`${a}-heading`},{children:n})),r,e.jsx("div",Object.assign({className:"usa-modal__footer"},{children:i}))]})),e.jsx("button",Object.assign({className:"usa-button usa-modal__close","aria-label":"Close this window","data-close-modal":!0},{children:e.jsx("svg",Object.assign({className:"usa-icon","aria-hidden":"true",focusable:"false",role:"img"},{children:e.jsx("use",{xlinkHref:`${L.default}#close`})}))}))]}))}))},exports.Pagination=({id:s,currentPage:a,amountOfPages:n,amountOfVisiblePageItems:t=3,ariaLabel:i,createPageUrl:r=(()=>"#"),onPage:l=(()=>{})})=>{n<=7&&(t=7);let c=Math.max(0,a-Math.floor(t/2));const o=Math.min(n,c+t)-1;return o===n-1&&(c=Math.max(0,o-t+1)),e.jsx("nav",Object.assign({id:s,"aria-label":i,className:"usa-pagination"},{children:e.jsxs("ul",Object.assign({className:"usa-pagination__list"},{children:[a>0&&e.jsx("li",Object.assign({className:"usa-pagination__item usa-pagination__arrow"},{children:e.jsxs("a",Object.assign({href:r(a-1),onClick:e=>l(e,a-1),className:"usa-pagination__link usa-pagination__previous-page","aria-label":"Previous page"},{children:[e.jsx("svg",Object.assign({className:"usa-icon","aria-hidden":"true",role:"img"},{children:e.jsx("use",{xlinkHref:`${L.default}#navigate_before`})})),e.jsx("span",Object.assign({className:"usa-pagination__link-text"},{children:"Previous"}))]}))})),c>0&&e.jsxs(e.Fragment,{children:[ee(0,a,n,r,l),e.jsx("li",Object.assign({className:"usa-pagination__item usa-pagination__overflow"},{children:e.jsx("span",{children:"…"})}))]}),Z(c,o,(e=>ee(e,a,n,r,l))),o<n-1&&e.jsxs(e.Fragment,{children:[e.jsx("li",Object.assign({className:"usa-pagination__item usa-pagination__overflow"},{children:e.jsx("span",{children:"…"})})),ee(n-1,a,n,r,l)]}),a<n-1&&e.jsx("li",Object.assign({className:"usa-pagination__item usa-pagination__arrow"},{children:e.jsxs("a",Object.assign({href:r(a+1),onClick:e=>l(e,a+1),className:"usa-pagination__link usa-pagination__next-page","aria-label":"Next page"},{children:[e.jsx("span",Object.assign({className:"usa-pagination__link-text"},{children:"Next"})),e.jsx("svg",Object.assign({className:"usa-icon","aria-hidden":"true",role:"img"},{children:e.jsx("use",{xlinkHref:`${L.default}#navigate_next`})}))]}))}))]}))}))},exports.ProcessList=({id:s,steps:a,currentStep:n=0,children:t})=>t||a?e.jsx("ol",Object.assign({id:s,className:"usa-process-list"},{children:null!=t?t:null==a?void 0:a.map(((s,t)=>e.jsx(se,Object.assign({heading:s.heading,isCurrentStep:n===t+1&&n!==a.length,isCompletedStep:n>t+1||n===a.length,isLastStep:t===a.length-1},{children:s.children}),t)))})):e.jsx(e.Fragment,{}),exports.ProcessListStep=se,exports.Prose=s=>{var{id:a,className:n,children:t}=s,i=H(s,["id","className","children"]);const r=D("usa-prose",n);return e.jsx("section",Object.assign({id:a,className:r},i,{children:t}))},exports.RadioButton=ae,exports.RadioButtonGroup=({id:s,name:a,data:n,areTiles:t,onChange:i,onClick:r})=>e.jsx(e.Fragment,{children:n.map(((n,l)=>{const c=`${s}__radio${l}`;return e.jsx(ae,{id:c,name:a,label:n.label,value:n.value,checked:n.checked,isTile:t,onChange:i,onClick:r},c)}))}),exports.RangeSlider=s=>{var{id:a,minValue:n,maxValue:t,step:i="10",defaultValue:r,onChange:l}=s,c=H(s,["id","minValue","maxValue","step","defaultValue","onChange"]);return e.jsx("input",Object.assign({id:a,className:"usa-range",type:"range",min:n,max:t,step:i,defaultValue:r,onChange:l,role:"slider"},c))},exports.Search=s=>{var{id:a,type:n="default",onSearch:t}=s,i=H(s,["id","type","onSearch"]);const r=D("usa-search",{"usa-search--small":"small"===n,"usa-search--big":"big"===n});return e.jsxs("form",Object.assign({id:a,className:r,role:"search",onSubmit:function(e){if(t){const s=e.target;t(e,s.elements.search.value)}}},{children:[e.jsx("label",Object.assign({className:"usa-sr-only",htmlFor:`${a}__search-field`},{children:"Search"})),e.jsx("input",Object.assign({className:"usa-input",id:`${a}__search-field`,type:"search",name:"search"},i)),e.jsxs("button",Object.assign({className:"usa-button",type:"submit"},{children:[e.jsx("span",Object.assign({className:"small"===n?"usa-sr-only":"usa-search__submit-text"},{children:"Search"})),e.jsx("img",{src:F.default,className:"usa-search__submit-icon",alt:"Search icon"})]}))]}))},exports.Select=Y,exports.SelectOption=({value:s,label:a})=>e.jsx("option",Object.assign({value:s},{children:a})),exports.SideNavigation=({id:s,ariaLabel:a,items:n,children:t})=>t||n?e.jsx("nav",Object.assign({id:s,"aria-label":a},{children:e.jsx("ul",Object.assign({className:"usa-sidenav"},{children:null!=t?t:null==n?void 0:n.map(((s,a)=>e.jsx(ne,{items:s.items,anchor:s.anchor},`side-nav-item-${a}`)))}))})):e.jsx(e.Fragment,{}),exports.SideNavigationItem=ne,exports.SiteAlert=({id:s,type:a="Info",heading:n,slim:t=!1,noIcon:i=!1,className:r,children:l})=>{const c=D("usa-site-alert",{"usa-site-alert--emergency":"Emergency"===a,"usa-site-alert--info":"Info"===a,"usa-site-alert--slim":t,"usa-site-alert--no-icon":i},r);return e.jsx("section",Object.assign({id:s,className:c,"aria-label":"Site Alert"},{children:e.jsx("div",Object.assign({className:"usa-alert"},{children:e.jsxs("div",Object.assign({className:"usa-alert__body"},{children:[n&&e.jsx("h3",Object.assign({className:"usa-alert__heading"},{children:n})),l&&e.jsx("p",Object.assign({className:"usa-alert__text"},{children:l}))]}))}))}))},exports.StepIndicator=({id:a,steps:n,currentStep:t,hideLabels:i=!1,showCounters:r=!1,showSmallCounters:l=!1,centerCounters:c=!1,headingLevel:o="h4"})=>{const d=D("usa-step-indicator",{"usa-step-indicator--no-labels":i,"usa-step-indicator--counters":r,"usa-step-indicator--counters-sm":l,"usa-step-indicator--center":c});return e.jsxs("div",Object.assign({id:a,className:d,"aria-label":"progress"},{children:[e.jsx("ol",Object.assign({className:"usa-step-indicator__segments"},{children:n.map(((s,a)=>{const n={key:a,className:"usa-step-indicator__segment"};let i="";return a<t?(n.className+=" usa-step-indicator__segment--complete",i="completed"):a>t?i="not completed":(n.className+=" usa-step-indicator__segment--current",Object.assign(n,{"aria-current":!0})),e.jsx("li",Object.assign({},n,{children:e.jsxs("span",Object.assign({className:"usa-step-indicator__segment-label"},{children:[s,""!==i&&e.jsx("span",Object.assign({className:"usa-sr-only"},{children:i}))]}))}))}))})),e.jsx("div",Object.assign({className:"usa-step-indicator__header"},{children:s.createElement(o,{className:"usa-step-indicator__heading"},e.jsxs(e.Fragment,{children:[e.jsxs("span",Object.assign({className:"usa-step-indicator__heading-counter"},{children:[e.jsx("span",Object.assign({className:"usa-sr-only"},{children:"Step"})),e.jsx("span",Object.assign({className:"usa-step-indicator__current-step"},{children:t+1})),e.jsxs("span",Object.assign({className:"usa-step-indicator__total-steps"},{children:[" of ",n.length]}))]})),e.jsx("span",Object.assign({className:"usa-step-indicator__heading-text"},{children:n[t]}))]}))}))]}))},exports.SummaryBox=({id:s,heading:a,className:n,items:t})=>{const i=D("usa-summary-box",n);return e.jsx("div",Object.assign({className:i,role:"region","aria-labelledby":s},{children:e.jsxs("div",Object.assign({className:"usa-summary-box__body"},{children:[e.jsx("h3",Object.assign({className:"usa-summary-box__heading",id:s},{children:a})),e.jsx("div",Object.assign({className:"usa-summary-box__text"},{children:e.jsx("ul",Object.assign({className:"usa-list"},{children:t.map(((s,a)=>e.jsx("li",{children:s},a)))}))}))]}))}))},exports.Table=({id:a,caption:n,columns:t,data:i,sortable:r=!1,sortIndex:l=0,sortDir:c="ascending",scrollable:o=!1,borderless:d=!1,striped:u=!1,className:m,tabIndex:h=-1})=>{const g=s.useRef(null);return s.useEffect((()=>{const e=g.current;return r&&V.default.on(e),()=>{r&&(V.default.off(e),null==e||e.querySelectorAll(".usa-table__header__button").forEach((e=>e.remove())))}})),e.jsxs("div",Object.assign({id:a,className:D({"usa-table-container":!o},{"usa-table-container--scrollable":o},{"usa-table--borderless":d},{"usa-table--striped":u}),ref:g},{children:[e.jsxs("table",Object.assign({className:D("usa-table",m),tabIndex:h},{children:[e.jsx("caption",Object.assign({hidden:!!n},{children:n})),e.jsx("thead",{children:e.jsx("tr",{children:t.map(((s,a)=>e.jsx("th",Object.assign({id:s.id,"data-sortable":r||null,scope:"col",role:"columnheader","aria-sort":r&&l===a?c:void 0},{children:s.name}),s.id)))})}),e.jsx("tbody",{children:i.map(((s,a)=>{const n=[];for(const e in s)r?n.push({value:s[e].value,sortValue:s[e].sortValue}):n.push({value:s[e].value?s[e].value:s[e]});return e.jsx("tr",{children:n.map(((s,a)=>e.jsx("td",Object.assign({"data-sort-value":r?s.sortValue:s.value},{children:s.value}),`td-${a}`)))},`tr-${a}`)}))})]})),r&&e.jsx("div",{className:"usa-sr-only usa-table__announcement-region","aria-live":"polite"})]}))},exports.Tag=({id:s,children:a,size:n="Default",className:t})=>{const i=D("usa-tag",{"usa-tag--big":"Big"===n},t);return e.jsx("span",Object.assign({id:s,className:i},{children:a}))},exports.TextArea=s=>{var{id:a,name:n,rows:t,className:i,onChange:r}=s,l=H(s,["id","name","rows","className","onChange"]);return e.jsx("textarea",Object.assign({className:D("usa-textarea",i),style:void 0===t?void 0:{height:"unset"},id:a,name:n,rows:t,onChange:r},l))},exports.TextInput=s=>{var{id:a,name:n,className:t,type:i,mask:r,prefix:l,suffix:c,onChange:o}=s,d=H(s,["id","name","className","type","mask","prefix","suffix","onChange"]);const u=D("usa-input",{"usa-masked":r},t),m=e.jsx("input",Object.assign({id:a,name:n,className:u,"data-testid":"input",type:Q(r,i),onChange:o,pattern:W(r,d.pattern),placeholder:K(r,d.placeholder),inputMode:X(r,d.inputMode)},d));return(null!=l?l:c)?e.jsxs("div",Object.assign({className:"usa-input-group"},{children:[l?e.jsx("div",Object.assign({className:"usa-input-prefix","aria-hidden":"true"},{children:l})):void 0,m,c?e.jsx("div",Object.assign({className:"usa-input-suffix","aria-hidden":"true"},{children:c})):void 0]})):m},exports.TimePicker=a=>{var{filter:n,minTime:t,maxTime:i,step:r,onChange:l}=a,c=H(a,["filter","minTime","maxTime","step","onChange"]);const o=s.useRef(null);s.useLayoutEffect((()=>{const e=o.current;q.default.on(e),w.default.on(e);const s=e.querySelector(".usa-combo-box__input");return l&&s.addEventListener("change",l),()=>{l&&s.removeEventListener("change",l),w.default.off(e),q.default.off(e)}}));const d={};return n&&(d["data-filter"]=n),t&&(d["data-min-time"]=t),i&&(d["data-max-time"]=i),r&&(d["data-step"]=r),e.jsx("div",Object.assign({ref:o,className:D("usa-time-picker",c.className)},d,{children:e.jsx("input",Object.assign({className:"usa-input",type:"text"},c))}))},exports.Tooltip=({label:a,position:n="top",children:t})=>{const i=s.useRef(null);return s.useLayoutEffect((()=>{var e;const s=null===(e=i.current)||void 0===e?void 0:e.firstChild;return s&&(s.classList.add("usa-tooltip"),s.title=a,s.setAttribute("data-position",n),T.default.on(s)),()=>T.default.off(s)})),e.jsx("span",Object.assign({ref:i},{children:t}))};
 //# sourceMappingURL=index.js.map

dist/esm/components/alert/alert.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
      */
-    type: 'info' | 'warning' | 'error' | 'success';
+    type: 'info' | 'warning' | 'error' | 'success' | 'emergency';
     /**
@@ -13,0 +13,0 @@ * Whether or not to display the alert

dist/esm/components/index.d.ts

@@ -0,2 +1,49 @@
+export { default as Accordion, AccordionItem } from './accordion';
+export type { AccordionItemProps } from './accordion';
 export { default as Alert } from './alert';
 export { default as Banner } from './banner';
+export { default as Breadcrumb, BreadcrumbItem } from './breadcrumb';
+export type { BreadcrumbItemProps } from './breadcrumb';
+export { default as Button } from './button';
+export { default as ButtonGroup } from './button-group';
+export { default as Card, CardFooter, CardBody, CardHeader } from './card';
+export { default as CharacterCount, CharacterCountContainer } from './character-count';
+export { default as Checkbox, CheckboxGroup } from './checkbox';
+export type { CheckboxData } from './checkbox';
+export { default as ComboBox } from './combo-box';
+export type { ComboBoxOptionProps } from './combo-box';
+export { default as DatePicker } from './date-picker';
+export { default as DateRangePicker } from './date-range-picker';
+export { default as ErrorMessages } from './error-messages';
+export { default as FileInput } from './file-input';
+export { default as Form } from './form';
+export { default as FormGroup } from './form-group';
+export { default as Icon } from './icon';
+export { default as TextInput } from './text-input';
+export { default as Label } from './label';
+export { default as List } from './list';
+export type { ListItem } from './list';
+export { default as MemorableDate } from './memorable-date';
+export { default as Modal } from './modal';
+export { default as Pagination } from './pagination';
+export type { CreatePageUrlHandler, OnPageHandler } from './pagination';
+export { default as ProcessList, ProcessListStep } from './process-list';
+export type { ProcessListStepProps } from './process-list';
+export { default as Prose } from './prose';
+export { default as RadioButton, RadioButtonGroup } from './radio-button';
+export type { RadioButtonData } from './radio-button';
+export { default as RangeSlider } from './range-slider';
+export { default as Search } from './search';
+export { default as Select, SelectOption } from './select';
+export type { SelectOptionProps } from './select';
+export { default as SideNavigation, SideNavigationItem } from './side-navigation';
+export type { SideNavigationItemProps } from './side-navigation';
+export { default as SiteAlert } from './site-alert';
+export { default as StepIndicator } from './step-indicator';
+export { default as SummaryBox } from './summary-box';
+export { default as Table } from './table';
+export type { TableColumn, TableCell } from './table';
+export { default as Tag } from './tag';
+export { default as TextArea } from './text-area';
+export { default as TimePicker } from './time-picker';
+export { default as Tooltip } from './tooltip';

dist/esm/index.js

@@ -1,2 +0,2 @@
-"use client";import{jsx as e,Fragment as a,jsxs as s}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as r}from"react";import t from"@uswds/uswds/js/usa-accordion";import c from"@uswds/uswds/js/usa-banner";import o from"@uswds/uswds/img/us_flag_small.png";import l from"@uswds/uswds/img/icon-https.svg";import d from"@uswds/uswds/img/icon-dot-gov.svg";function u(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var g,b={exports:{}};
+import{jsx as e,Fragment as a,jsxs as s}from"react/jsx-runtime";import n,{useRef as t,useEffect as i,useState as r,Children as l,useLayoutEffect as c,createElement as o}from"react";import d from"@uswds/uswds/js/usa-accordion";import u from"@uswds/uswds/js/usa-banner";import m from"@uswds/uswds/img/us_flag_small.png";import h from"@uswds/uswds/img/icon-https.svg";import g from"@uswds/uswds/img/icon-dot-gov.svg";import b from"@uswds/uswds/js/usa-character-count";import p from"@uswds/uswds/js/usa-combo-box";import _ from"@uswds/uswds/js/usa-date-picker";import f from"@uswds/uswds/js/usa-date-range-picker";import v from"@uswds/uswds/js/usa-file-input";import O from"@uswds/uswds/img/sprite.svg";import j from"@uswds/uswds/js/usa-modal";import N from"@uswds/uswds/img/usa-icons-bg/search--white.svg";import y from"@uswds/uswds/js/usa-table";import x from"@uswds/uswds/js/usa-time-picker";import k from"@uswds/uswds/js/usa-tooltip";function w(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var C,S={exports:{}};
 /*!
@@ -6,3 +6,3 @@ Copyright (c) 2018 Jed Watson.
 	http://jedwatson.github.io/classnames
-*/g=b,function(){var e={}.hasOwnProperty;function a(){for(var e="",a=0;a<arguments.length;a++){var i=arguments[a];i&&(e=n(e,s(i)))}return e}function s(s){if("string"==typeof s||"number"==typeof s)return s;if("object"!=typeof s)return"";if(Array.isArray(s))return a.apply(null,s);if(s.toString!==Object.prototype.toString&&!s.toString.toString().includes("[native code]"))return s.toString();var i="";for(var r in s)e.call(s,r)&&s[r]&&(i=n(i,r));return i}function n(e,a){return a?e?e+" "+a:e+a:e}g.exports?(a.default=a,g.exports=a):window.classNames=a}();var m=u(b.exports);const h=({id:n,type:i,show:r=!0,slim:t,noIcon:c,heading:o,body:l,children:d})=>{const u=m("usa-alert",{"usa-alert--success":"success"===i,"usa-alert--warning":"warning"===i,"usa-alert--error":"error"===i,"usa-alert--info":"info"===i,"usa-alert--slim":t,"usa-alert--no-icon":c});return r?e("div",Object.assign({id:n,className:u},{children:s("div",Object.assign({className:"usa-alert__body"},{children:[o&&e("h4",Object.assign({className:"usa-alert__heading"},{children:o})),null!=l?l:e("p",Object.assign({className:"usa-alert__text"},{children:d}))]}))})):e(a,{})},f={gov:"government",mil:"U.S. Department of Defense"},_=({id:a,type:u="gov"})=>{const[g]=n(!1),b=i(null);return r((()=>{const e=b.current;return c.on(e),t.on(e),()=>{c.off(e),t.off(e)}})),e("section",Object.assign({id:a,className:"usa-banner","aria-label":"Official government website",ref:b},{children:s("div",Object.assign({className:"usa-accordion"},{children:[e("header",Object.assign({className:"usa-banner__header"},{children:s("div",Object.assign({className:"usa-banner__inner"},{children:[e("div",Object.assign({className:"grid-col-auto"},{children:e("img",{className:"usa-banner__header-flag",src:o,alt:"U.S. flag"})})),s("div",Object.assign({className:"grid-col-fill tablet:grid-col-auto"},{children:[e("p",Object.assign({className:"usa-banner__header-text"},{children:"An official website of the United States government"})),e("p",Object.assign({className:"usa-banner__header-action","aria-hidden":"true"},{children:"Here’s how you know"}))]})),e("button",Object.assign({className:"usa-accordion__button usa-banner__button","aria-expanded":"false","aria-controls":"gov-banner-default"},{children:e("span",Object.assign({className:"usa-banner__button-text"},{children:"Here’s how you know"}))}))]}))})),e("div",Object.assign({className:"usa-banner__content usa-accordion__content",id:"gov-banner-default",hidden:!g},{children:s("div",Object.assign({className:"grid-row grid-gap-lg"},{children:[s("div",Object.assign({className:"usa-banner__guidance tablet:grid-col-6"},{children:[e("img",{className:"usa-banner__icon usa-media-block__img",src:d,role:"img",alt:"","aria-hidden":"true"}),e("div",Object.assign({className:"usa-media-block__body"},{children:s("p",{children:[s("strong",{children:[" Official websites use .",u," "]}),e("br",{}),"A ",s("strong",{children:[".",u]})," website belongs to an official"," ",f[u]," organization in the United States."]})}))]})),s("div",Object.assign({className:"usa-banner__guidance tablet:grid-col-6"},{children:[e("img",{className:"usa-banner__icon usa-media-block__img",src:l,role:"img",alt:"","aria-hidden":"true"}),e("div",Object.assign({className:"usa-media-block__body"},{children:s("p",{children:[e("strong",{children:" Secure .gov websites use HTTPS "}),e("br",{}),"A ",e("strong",{children:"lock"})," (",e("span",Object.assign({className:"icon-lock"},{children:s("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"52",height:"64",viewBox:"0 0 52 64",className:"usa-banner__lock-image",role:"img","aria-labelledby":"banner-lock-title-default banner-lock-description-default",focusable:"false"},{children:[e("title",Object.assign({id:"banner-lock-title-default"},{children:"Lock"})),e("desc",Object.assign({id:"banner-lock-description-default"},{children:"A locked padlock"})),e("path",{fill:"#000000",fillRule:"evenodd",d:"M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"})]}))})),") or ",e("strong",{children:"https://"})," means you’ve safely connected to the .",u," ","website. Share sensitive information only on official, secure websites."]})}))]}))]}))}))]}))}))};export{h as Alert,_ as Banner};
+*/C=S,function(){var e={}.hasOwnProperty;function a(){for(var e="",a=0;a<arguments.length;a++){var t=arguments[a];t&&(e=n(e,s(t)))}return e}function s(s){if("string"==typeof s||"number"==typeof s)return s;if("object"!=typeof s)return"";if(Array.isArray(s))return a.apply(null,s);if(s.toString!==Object.prototype.toString&&!s.toString.toString().includes("[native code]"))return s.toString();var t="";for(var i in s)e.call(s,i)&&s[i]&&(t=n(t,i));return t}function n(e,a){return a?e?e+" "+a:e+a:e}C.exports?(a.default=a,C.exports=a):window.classNames=a}();var $=w(S.exports);function V(e,a){void 0===a&&(a={});var s=a.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===s&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}V(".accordion-item {\n  margin: 10px;\n  border: none;\n}\n");const L=({id:s,allowMultiSelect:n=!1,items:r,children:l})=>{if(!l&&!r)return e(a,{});const c=t(null);return i((()=>{const e=c.current;return e&&e.querySelectorAll("button").forEach((e=>{d.on(e)})),()=>{e&&e.querySelectorAll("button").forEach((e=>{d.off(e)}))}})),e("div",Object.assign({id:s,ref:c,className:$("usa-accordion",{"usa-accordion--multiselectable":n}),"data-allow-multiple":!!n||void 0},{children:null!=l?l:null==r?void 0:r.map(((a,s)=>e(M,Object.assign({id:a.id,label:a.label,expanded:a.expanded},{children:a.children}),`accordion-item-${s}`)))}))},M=({id:a,label:n,expanded:t,children:i})=>s("div",Object.assign({className:"accordion-item","data-testid":"accordion-item"},{children:[e("h4",Object.assign({className:"usa-accordion__heading"},{children:e("button",Object.assign({type:"button",className:"usa-accordion__button","data-testid":"accordion-button","aria-expanded":t,"aria-controls":a},{children:n}))})),e("div",Object.assign({id:a,className:"usa-accordion__content usa-prose text-left","data-testid":"accordion-content",hidden:!t},{children:i}))]})),D=({id:n,type:t,show:i=!0,slim:r,noIcon:l,heading:c,body:o,children:d})=>{const u=$("usa-alert",{"usa-alert--success":"success"===t,"usa-alert--warning":"warning"===t,"usa-alert--error":"error"===t,"usa-alert--emergency":"emergency"===t,"usa-alert--info":"info"===t,"usa-alert--slim":r,"usa-alert--no-icon":l});return i?e("div",Object.assign({id:n,className:u},{children:s("div",Object.assign({className:"usa-alert__body"},{children:[c&&e("h4",Object.assign({className:"usa-alert__heading"},{children:c})),null!=o?o:e("p",Object.assign({className:"usa-alert__text"},{children:d}))]}))})):e(a,{})},T={gov:"government",mil:"U.S. Department of Defense"},E=({id:a,type:n="gov"})=>{const[l]=r(!1),c=t(null);return i((()=>{const e=c.current;return u.on(e),d.on(e),()=>{u.off(e),d.off(e)}})),e("section",Object.assign({id:a,className:"usa-banner","aria-label":"Official government website",ref:c},{children:s("div",Object.assign({className:"usa-accordion"},{children:[e("header",Object.assign({className:"usa-banner__header"},{children:s("div",Object.assign({className:"usa-banner__inner"},{children:[e("div",Object.assign({className:"grid-col-auto"},{children:e("img",{className:"usa-banner__header-flag",src:m,alt:"U.S. flag"})})),s("div",Object.assign({className:"grid-col-fill tablet:grid-col-auto"},{children:[e("p",Object.assign({className:"usa-banner__header-text"},{children:"An official website of the United States government"})),e("p",Object.assign({className:"usa-banner__header-action","aria-hidden":"true"},{children:"Here’s how you know"}))]})),e("button",Object.assign({className:"usa-accordion__button usa-banner__button","aria-expanded":"false","aria-controls":"gov-banner-default"},{children:e("span",Object.assign({className:"usa-banner__button-text"},{children:"Here’s how you know"}))}))]}))})),e("div",Object.assign({className:"usa-banner__content usa-accordion__content",id:"gov-banner-default",hidden:!l},{children:s("div",Object.assign({className:"grid-row grid-gap-lg"},{children:[s("div",Object.assign({className:"usa-banner__guidance tablet:grid-col-6"},{children:[e("img",{className:"usa-banner__icon usa-media-block__img",src:g,role:"img",alt:"","aria-hidden":"true"}),e("div",Object.assign({className:"usa-media-block__body"},{children:s("p",{children:[s("strong",{children:[" Official websites use .",n," "]}),e("br",{}),"A ",s("strong",{children:[".",n]})," website belongs to an official"," ",T[n]," organization in the United States."]})}))]})),s("div",Object.assign({className:"usa-banner__guidance tablet:grid-col-6"},{children:[e("img",{className:"usa-banner__icon usa-media-block__img",src:h,role:"img",alt:"","aria-hidden":"true"}),e("div",Object.assign({className:"usa-media-block__body"},{children:s("p",{children:[e("strong",{children:" Secure .gov websites use HTTPS "}),e("br",{}),"A ",e("strong",{children:"lock"})," (",e("span",Object.assign({className:"icon-lock"},{children:s("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"52",height:"64",viewBox:"0 0 52 64",className:"usa-banner__lock-image",role:"img","aria-labelledby":"banner-lock-title-default banner-lock-description-default",focusable:"false"},{children:[e("title",Object.assign({id:"banner-lock-title-default"},{children:"Lock"})),e("desc",Object.assign({id:"banner-lock-description-default"},{children:"A locked padlock"})),e("path",{fill:"#000000",fillRule:"evenodd",d:"M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"})]}))})),") or ",e("strong",{children:"https://"})," means you’ve safely connected to the .",n," ","website. Share sensitive information only on official, secure websites."]})}))]}))]}))}))]}))}))},P=({id:n,current:t,action:i,items:r,children:l})=>l||r?e("nav",Object.assign({className:"usa-breadcrumb breadcrumb","aria-label":"Breadcrumbs,,",id:n},{children:s("ol",Object.assign({className:"usa-breadcrumb__list"},{children:[null!=l?l:null==r?void 0:r.map(((a,s)=>e(A,{path:a.path,name:a.name,action:i},`breadcrumb-${s}`))),t?e("li",Object.assign({className:"usa-breadcrumb__list-item usa-current","aria-current":"true"},{children:e("span",{children:t})})):e(a,{})]}))})):e(a,{}),A=({path:a,name:s,action:n})=>e("li",Object.assign({className:"usa-breadcrumb__list-item"},{children:e("span",Object.assign({className:"usa-breadcrumb__link span-link","data-testid":"breadcrumb-link",onClick:()=>!!n&&n(a)},{children:e("span",{children:s})}))}));function z(e,a){var s={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&a.indexOf(n)<0&&(s[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(n=Object.getOwnPropertySymbols(e);t<n.length;t++)a.indexOf(n[t])<0&&Object.prototype.propertyIsEnumerable.call(e,n[t])&&(s[n[t]]=e[n[t]])}return s}"function"==typeof SuppressedError&&SuppressedError;const I=a=>{var{id:s,type:n="button",variant:t="default",className:i,children:r}=a,l=z(a,["id","type","variant","className","children"]);const c=$("usa-button",{"usa-button--secondary":"secondary"===t,"usa-button--accent-cool":"accent-cool"===t,"usa-button--accent-warm":"accent-warm"===t,"usa-button--base":"base"===t,"usa-button--outline":"outline"===t,"usa-button--outline usa-button--inverse":"outline-inverse"===t,"usa-button--big":"big"===t,"usa-button--unstyled":"unstyled"===t},i);return e("button",Object.assign({id:s,type:n,className:c,"data-testid":"button"},l,{children:r}))},F=({id:a,type:s="default",className:n,children:t})=>{const i=$("usa-button-group",{"usa-button-group--segmented":"segmented"===s},n);return e("ul",Object.assign({id:a,className:i},{children:l.map(t,((a,s)=>e("li",Object.assign({className:"usa-button-group__item"},{children:a}),s)))}))},H=({id:a,className:s,children:n})=>{const t=$("usa-card__container",s);return e("div",Object.assign({className:"usa-card",id:a},{children:e("div",Object.assign({className:t},{children:n}))}))},q=({children:a})=>e("div",Object.assign({className:"usa-card__body"},{children:a})),B=({children:a})=>e("div",Object.assign({className:"usa-card__header"},{children:e("h2",Object.assign({className:"usa-card__heading text-primary-dark"},{children:a}))})),U=({children:a})=>e("div",Object.assign({className:"usa-card__footer"},{children:a})),Y=a=>{var{className:s}=a,n=z(a,["className"]);const r=t(null);return i((()=>{const e=r.current;return b.on(e),()=>b.off(e)})),e("div",Object.assign({ref:r,className:$("usa-character-count",s)},n,{children:n.children}))},R=a=>{var{id:s}=a,n=z(a,["id"]);return e("span",Object.assign({id:s,className:$("usa-hint","usa-character-count__message",n.className),"aria-live":"polite"},{children:n.children}))},J=a=>{var{id:n,name:t,label:i,value:r,checked:l,isTile:c,onChange:o,onClick:d}=a,u=z(a,["id","name","label","value","checked","isTile","onChange","onClick"]);const m=`${n}__usa-checkbox__input`,h=$("usa-checkbox__input",{"usa-checkbox__input--tile":c});return s("div",Object.assign({id:n,className:"usa-checkbox"},{children:[e("input",Object.assign({className:h,id:m,type:"checkbox",name:t,defaultValue:r,defaultChecked:l,onChange:o,onClick:d},u)),e("label",Object.assign({className:"usa-checkbox__label",htmlFor:m},{children:i}))]}))},W=({id:s,name:n,data:t,areTiles:i,onChange:r,onClick:l})=>e(a,{children:t.map(((a,t)=>{const c=`${s}__checkbox${t}`;return e(J,{id:c,name:n,label:a.label,value:a.value,checked:a.checked,isTile:i,onChange:r,onClick:l},c)}))}),G=n=>{var{defaultOption:t={value:"",label:"- Select -"},options:i,onChange:r,className:l,children:c}=n,o=z(n,["defaultOption","options","onChange","className","children"]);return c||i?s("select",Object.assign({className:$("usa-select",l),onChange:r},o,{children:[Q(t,-1),null!=c?c:null==i?void 0:i.map(Q)]})):e(a,{})},K=({value:a,label:s})=>e("option",Object.assign({value:a},{children:s})),Q=(a,s)=>a&&e("option",Object.assign({value:a.value},{children:a.label}),s),X=a=>{var{placeholder:s}=a,n=z(a,["placeholder"]);const i=t(null);c((()=>{const e=i.current;return p.on(e),()=>p.off(e)}));const r={className:"usa-combo-box",ref:i};return s&&(r["data-placeholder"]=s),n.defaultValue&&(r["data-default-value"]=n.defaultValue),e("div",Object.assign({},r,{children:e(G,Object.assign({},n))}))},Z=a=>{var{minDate:s,maxDate:n,dateRange:i,defaultValue:r,onChange:l}=a,o=z(a,["minDate","maxDate","dateRange","defaultValue","onChange"]);const d=t(null);c((()=>{const e=d.current,a=e.querySelector(".usa-date-picker__wrapper");a||_.on(e);const s=_.getDatePickerContext(e).externalInputEl;return l&&s.addEventListener("change",l),()=>{l&&s.removeEventListener("change",l),a&&_.off(e)}}),[]);const u={};return s&&(u["data-min-date"]=ee(s)),n&&(u["data-max-date"]=ee(n)),i&&(u["data-range-date"]=ee(i)),r&&(u["data-default-value"]=ee(r)),e("div",Object.assign({ref:d,className:"usa-date-picker"},u,{children:e("input",Object.assign({className:"usa-input",type:"text"},o))}))};function ee(e){if("string"==typeof e){return new Date(e).toISOString().substring(0,10)}return e.toISOString().substring(0,10)}const ae=({id:a,children:s})=>{const n=t(null);return c((()=>{const e=n.current;return f.on(e),()=>f.off(e)})),e("div",Object.assign({id:a,ref:n,className:"usa-date-range-picker"},{children:s}))},se=({id:s,errors:n,children:t})=>e(a,t||n?{children:null!=t?t:null==n?void 0:n.map(((a,n)=>e("span",Object.assign({id:`${s}-${n}`,className:"usa-error-message"},{children:a}),n)))}:{}),ne=a=>{const s=t(null);return c((()=>{const e=s.current;return v.on(e),()=>v.off(e)}),[]),e("input",Object.assign({className:"usa-file-input",type:"file",ref:s},a))},te=a=>{var{id:s,isLarge:n=!1,className:t,children:i}=a,r=z(a,["id","isLarge","className","children"]);return e("form",Object.assign({id:s,className:$("usa-form",{"usa-form--large":n},t),style:{maxWidth:"unset"}},r,{children:i}))},ie=({id:a,errors:s,className:n,children:t})=>{const i=!!(s&&s.length>0),r=$("usa-form-group",{"usa-form-group--error":i},n);return e("div",Object.assign({id:a,className:r},{children:t}))},re=({id:a,type:s,size:n="size-3",className:t="text-base-darkest"})=>{const i=$("usa-icon",`usa-icon--${n}`,t);return e("svg",Object.assign({id:a,className:i,"aria-hidden":"true",focusable:"false",role:"img"},{children:e("use",{xlinkHref:`${O}#${s}`})}))},le=(e,a)=>{let s=null!=a?a:void 0;switch(e){case"ssn":s="^(?!(000|666|9))d{3} (?!00)d{2} (?!0000)d{4}$";break;case"phone_number":s="d{3}-d{3}-d{4}";break;case"zip_5_digit":s="\\d{5}";break;case"zip_9_digit":s="^[0-9]{5}(?:-[0-9]{4})?$"}return s},ce=(e,a)=>{let s=null!=a?a:void 0;switch(e){case"ssn":s="___ __ ____";break;case"phone_number":s="___-___-____";break;case"zip_5_digit":s="_____";break;case"zip_9_digit":s="_____-____"}return s},oe=(e,a)=>{let s=null!=a?a:"text";if("phone_number"===e)s="tel";return s},de=(e,a)=>{let s=null!=a?a:"text";switch(e){case"ssn":case"phone_number":case"zip_5_digit":case"zip_9_digit":s="numeric"}return s},ue=a=>{var{id:n,name:t,className:i,type:r,mask:l,prefix:c,suffix:o,onChange:d}=a,u=z(a,["id","name","className","type","mask","prefix","suffix","onChange"]);const m=$("usa-input",{"usa-masked":l},i),h=e("input",Object.assign({id:n,name:t,className:m,"data-testid":"input",type:oe(l,r),onChange:d,pattern:le(l,u.pattern),placeholder:ce(l,u.placeholder),inputMode:de(l,u.inputMode)},u));return(null!=c?c:o)?s("div",Object.assign({className:"usa-input-group"},{children:[c?e("div",Object.assign({className:"usa-input-prefix","aria-hidden":"true"},{children:c})):void 0,h,o?e("div",Object.assign({className:"usa-input-suffix","aria-hidden":"true"},{children:o})):void 0]})):h},me=a=>{var{htmlFor:n,required:t,children:i}=a,r=z(a,["htmlFor","required","children"]);return s("label",Object.assign({className:"usa-label",htmlFor:n},r,{children:[i,t&&e("span",Object.assign({className:"text-red"},{children:" *"}))]}))},he=a=>{var{id:s,type:n="unordered",variant:t="default",className:i,items:r}=a,l=z(a,["id","type","variant","className","items"]);const c=$("usa-list",{"usa-list--unstyled":"unstyled"===t},i),o=a=>a.map((a=>e("li",Object.assign({id:a.id},{children:a.value}),a.id)));return e("unordered"===n?"ul":"ol",Object.assign({id:s,className:c},l,{children:o(r)}))},ge=a=>{var{id:n,defaultMonthValue:t,defaultDayValue:i,defaultYearValue:r,onMonthChange:l,onDayChange:c,onYearChange:o}=a,d=z(a,["id","defaultMonthValue","defaultDayValue","defaultYearValue","onMonthChange","onDayChange","onYearChange"]);return s("div",Object.assign({id:`memorable-date-${n}`,className:"usa-memorable-date","data-testid":"memorable-date"},d,{children:[s("div",Object.assign({className:"usa-form-group usa-form-group--month usa-form-group--select"},{children:[e("label",Object.assign({className:"usa-label",htmlFor:`memorable-date-month-${n}`},{children:"Month"})),s("select",Object.assign({className:"usa-select",id:`memorable-date-month-${n}`,name:`memorable-date-month-${n}`,defaultValue:t,onChange:l},{children:[e("option",Object.assign({value:""},{children:"- Select -"})),e("option",Object.assign({value:1},{children:"01 - January"})),e("option",Object.assign({value:2},{children:"02 - February"})),e("option",Object.assign({value:3},{children:"03 - March"})),e("option",Object.assign({value:4},{children:"04 - April"})),e("option",Object.assign({value:5},{children:"05 - May"})),e("option",Object.assign({value:6},{children:"06 - June"})),e("option",Object.assign({value:7},{children:"07 - July"})),e("option",Object.assign({value:8},{children:"08 - August"})),e("option",Object.assign({value:9},{children:"09 - September"})),e("option",Object.assign({value:10},{children:"10 - October"})),e("option",Object.assign({value:11},{children:"11 - November"})),e("option",Object.assign({value:12},{children:"12 - December"}))]}))]})),s("div",Object.assign({className:"usa-form-group usa-form-group--day"},{children:[e("label",Object.assign({className:"usa-label",htmlFor:`memorable-date-day-${n}`},{children:"Day"})),e("input",{className:"usa-input",id:`memorable-date-day-${n}`,name:`memorable-date-day-${n}`,minLength:1,maxLength:2,pattern:"[0-9]*",inputMode:"numeric",defaultValue:i,onChange:c})]})),s("div",Object.assign({className:"usa-form-group usa-form-group--year"},{children:[e("label",Object.assign({className:"usa-label",htmlFor:`memorable-date-year-${n}`},{children:"Year"})),e("input",{className:"usa-input",id:`memorable-date-year-${n}`,name:`memorable-date-year-${n}`,minLength:4,maxLength:4,pattern:"[0-9]*",inputMode:"numeric",defaultValue:r,onChange:o})]}))]}))},be=({id:a,heading:n,size:i="small",footer:r,children:l})=>{const o=t(null);c((()=>{const e=o.current;return j.on(e),()=>j.off(e)}));const d=$("usa-modal",{"usa-modal--lg":"large"===i});return e("div",Object.assign({ref:o,className:d,id:a,"aria-labelledby":`${a}-heading`,"aria-describedby":`${a}-description`},{children:s("div",Object.assign({className:"usa-modal__content"},{children:[s("div",Object.assign({className:"usa-modal__main"},{children:[e("h2",Object.assign({className:"usa-modal__heading",id:`${a}-heading`},{children:n})),l,e("div",Object.assign({className:"usa-modal__footer"},{children:r}))]})),e("button",Object.assign({className:"usa-button usa-modal__close","aria-label":"Close this window","data-close-modal":!0},{children:e("svg",Object.assign({className:"usa-icon","aria-hidden":"true",focusable:"false",role:"img"},{children:e("use",{xlinkHref:`${O}#close`})}))}))]}))}))},pe=({id:n,currentPage:t,amountOfPages:i,amountOfVisiblePageItems:r=3,ariaLabel:l,createPageUrl:c=(()=>"#"),onPage:o=(()=>{})})=>{i<=7&&(r=7);let d=Math.max(0,t-Math.floor(r/2));const u=Math.min(i,d+r)-1;return u===i-1&&(d=Math.max(0,u-r+1)),e("nav",Object.assign({id:n,"aria-label":l,className:"usa-pagination"},{children:s("ul",Object.assign({className:"usa-pagination__list"},{children:[t>0&&e("li",Object.assign({className:"usa-pagination__item usa-pagination__arrow"},{children:s("a",Object.assign({href:c(t-1),onClick:e=>o(e,t-1),className:"usa-pagination__link usa-pagination__previous-page","aria-label":"Previous page"},{children:[e("svg",Object.assign({className:"usa-icon","aria-hidden":"true",role:"img"},{children:e("use",{xlinkHref:`${O}#navigate_before`})})),e("span",Object.assign({className:"usa-pagination__link-text"},{children:"Previous"}))]}))})),d>0&&s(a,{children:[fe(0,t,i,c,o),e("li",Object.assign({className:"usa-pagination__item usa-pagination__overflow"},{children:e("span",{children:"…"})}))]}),_e(d,u,(e=>fe(e,t,i,c,o))),u<i-1&&s(a,{children:[e("li",Object.assign({className:"usa-pagination__item usa-pagination__overflow"},{children:e("span",{children:"…"})})),fe(i-1,t,i,c,o)]}),t<i-1&&e("li",Object.assign({className:"usa-pagination__item usa-pagination__arrow"},{children:s("a",Object.assign({href:c(t+1),onClick:e=>o(e,t+1),className:"usa-pagination__link usa-pagination__next-page","aria-label":"Next page"},{children:[e("span",Object.assign({className:"usa-pagination__link-text"},{children:"Next"})),e("svg",Object.assign({className:"usa-icon","aria-hidden":"true",role:"img"},{children:e("use",{xlinkHref:`${O}#navigate_next`})}))]}))}))]}))}))};function _e(e,a,s){const n=[];for(;e<=a;e++)n.push(s(e));return n}function fe(a,s,n,t,i){const r=a===s,l=n-1===a?`last page, page ${a+1}`:`page ${a+1}`;return e("li",Object.assign({className:"usa-pagination__item usa-pagination__page-no"},{children:e("a",Object.assign({href:t(a),onClick:e=>i(e,a),className:$("usa-pagination__button",{"usa-current":r}),"aria-label":l,"aria-current":r?"page":void 0},{children:`${a+1}`}))}),a)}V(".current.usa-process-list__item::before {\n  border: 0.25rem solid #005ea2;\n  background-color: #005ea2;\n  color: #fff;\n}\n\n.current.usa-process-list__item {\n  border-left: 0.5rem solid #005ea2;\n}\n\n.current.usa-process-list__heading {\n  color: #005ea2;\n}\n\n.completed.usa-process-list__item::before {\n  border: 0.25rem solid #162e51;\n  background-color: #162e51;\n  color: #fff;\n}\n\n.completed.usa-process-list__item:not(.last) {\n  border-left: 0.5rem solid #162e51;\n}\n\n.completed.usa-process-list__heading {\n  color: #162e51;\n}\n");const ve=({id:s,steps:n,currentStep:t=0,children:i})=>i||n?e("ol",Object.assign({id:s,className:"usa-process-list"},{children:null!=i?i:null==n?void 0:n.map(((a,s)=>e(Oe,Object.assign({heading:a.heading,isCurrentStep:t===s+1&&t!==n.length,isCompletedStep:t>s+1||t===n.length,isLastStep:s===n.length-1},{children:a.children}),s)))})):e(a,{}),Oe=({heading:e,headingClassName:a,headingElementName:t="h4",isCurrentStep:i,isCompletedStep:r,isLastStep:l,children:c})=>{const o=$("usa-process-list__item",{current:i&&!r,completed:r,last:l}),d=$("usa-process-list__heading",{current:i&&!r,completed:r,last:l},a);return s("li",Object.assign({className:o},{children:[n.createElement(t,{className:d},e),c]}))},je=a=>{var{id:s,className:n,children:t}=a,i=z(a,["id","className","children"]);const r=$("usa-prose",n);return e("section",Object.assign({id:s,className:r},i,{children:t}))},Ne=a=>{var{id:n,name:t,label:i,value:r,checked:l,isTile:c,onChange:o,onClick:d}=a,u=z(a,["id","name","label","value","checked","isTile","onChange","onClick"]);const m=`${n}__usa-radio__input`,h=$("usa-radio__input",{"usa-radio__input--tile":c});return s("div",Object.assign({id:n,className:"usa-radio"},{children:[e("input",Object.assign({className:h,id:m,type:"radio",name:t,defaultValue:r,defaultChecked:l,onChange:o,onClick:d},u)),e("label",Object.assign({className:"usa-radio__label",htmlFor:m},{children:i}))]}))},ye=({id:s,name:n,data:t,areTiles:i,onChange:r,onClick:l})=>e(a,{children:t.map(((a,t)=>{const c=`${s}__radio${t}`;return e(Ne,{id:c,name:n,label:a.label,value:a.value,checked:a.checked,isTile:i,onChange:r,onClick:l},c)}))}),xe=a=>{var{id:s,minValue:n,maxValue:t,step:i="10",defaultValue:r,onChange:l}=a,c=z(a,["id","minValue","maxValue","step","defaultValue","onChange"]);return e("input",Object.assign({id:s,className:"usa-range",type:"range",min:n,max:t,step:i,defaultValue:r,onChange:l,role:"slider"},c))},ke=a=>{var{id:n,type:t="default",onSearch:i}=a,r=z(a,["id","type","onSearch"]);const l=$("usa-search",{"usa-search--small":"small"===t,"usa-search--big":"big"===t});return s("form",Object.assign({id:n,className:l,role:"search",onSubmit:function(e){if(i){const a=e.target;i(e,a.elements.search.value)}}},{children:[e("label",Object.assign({className:"usa-sr-only",htmlFor:`${n}__search-field`},{children:"Search"})),e("input",Object.assign({className:"usa-input",id:`${n}__search-field`,type:"search",name:"search"},r)),s("button",Object.assign({className:"usa-button",type:"submit"},{children:[e("span",Object.assign({className:"small"===t?"usa-sr-only":"usa-search__submit-text"},{children:"Search"})),e("img",{src:N,className:"usa-search__submit-icon",alt:"Search icon"})]}))]}))},we=({id:s,ariaLabel:n,items:t,children:i})=>i||t?e("nav",Object.assign({id:s,"aria-label":n},{children:e("ul",Object.assign({className:"usa-sidenav"},{children:null!=i?i:null==t?void 0:t.map(((a,s)=>e(Ce,{items:a.items,anchor:a.anchor},`side-nav-item-${s}`)))}))})):e(a,{}),Ce=({items:a,anchor:n})=>s("li",Object.assign({className:"usa-sidenav__item"},{children:[n,a&&a.length>0&&e("ul",Object.assign({className:"usa-sidenav__sublist"},{children:a.map(((a,s)=>e(Ce,{items:a.items,anchor:a.anchor},`side-nav-item-sublist-${s}`)))}))]})),Se=({id:a,type:n="Info",heading:t,slim:i=!1,noIcon:r=!1,className:l,children:c})=>{const o=$("usa-site-alert",{"usa-site-alert--emergency":"Emergency"===n,"usa-site-alert--info":"Info"===n,"usa-site-alert--slim":i,"usa-site-alert--no-icon":r},l);return e("section",Object.assign({id:a,className:o,"aria-label":"Site Alert"},{children:e("div",Object.assign({className:"usa-alert"},{children:s("div",Object.assign({className:"usa-alert__body"},{children:[t&&e("h3",Object.assign({className:"usa-alert__heading"},{children:t})),c&&e("p",Object.assign({className:"usa-alert__text"},{children:c}))]}))}))}))},$e=({id:n,steps:t,currentStep:i,hideLabels:r=!1,showCounters:l=!1,showSmallCounters:c=!1,centerCounters:d=!1,headingLevel:u="h4"})=>{const m=$("usa-step-indicator",{"usa-step-indicator--no-labels":r,"usa-step-indicator--counters":l,"usa-step-indicator--counters-sm":c,"usa-step-indicator--center":d});return s("div",Object.assign({id:n,className:m,"aria-label":"progress"},{children:[e("ol",Object.assign({className:"usa-step-indicator__segments"},{children:t.map(((a,n)=>{const t={key:n,className:"usa-step-indicator__segment"};let r="";return n<i?(t.className+=" usa-step-indicator__segment--complete",r="completed"):n>i?r="not completed":(t.className+=" usa-step-indicator__segment--current",Object.assign(t,{"aria-current":!0})),e("li",Object.assign({},t,{children:s("span",Object.assign({className:"usa-step-indicator__segment-label"},{children:[a,""!==r&&e("span",Object.assign({className:"usa-sr-only"},{children:r}))]}))}))}))})),e("div",Object.assign({className:"usa-step-indicator__header"},{children:o(u,{className:"usa-step-indicator__heading"},s(a,{children:[s("span",Object.assign({className:"usa-step-indicator__heading-counter"},{children:[e("span",Object.assign({className:"usa-sr-only"},{children:"Step"})),e("span",Object.assign({className:"usa-step-indicator__current-step"},{children:i+1})),s("span",Object.assign({className:"usa-step-indicator__total-steps"},{children:[" of ",t.length]}))]})),e("span",Object.assign({className:"usa-step-indicator__heading-text"},{children:t[i]}))]}))}))]}))},Ve=({id:a,heading:n,className:t,items:i})=>{const r=$("usa-summary-box",t);return e("div",Object.assign({className:r,role:"region","aria-labelledby":a},{children:s("div",Object.assign({className:"usa-summary-box__body"},{children:[e("h3",Object.assign({className:"usa-summary-box__heading",id:a},{children:n})),e("div",Object.assign({className:"usa-summary-box__text"},{children:e("ul",Object.assign({className:"usa-list"},{children:i.map(((a,s)=>e("li",{children:a},s)))}))}))]}))}))},Le=({id:a,caption:n,columns:r,data:l,sortable:c=!1,sortIndex:o=0,sortDir:d="ascending",scrollable:u=!1,borderless:m=!1,striped:h=!1,className:g,tabIndex:b=-1})=>{const p=t(null);return i((()=>{const e=p.current;return c&&y.on(e),()=>{c&&(y.off(e),null==e||e.querySelectorAll(".usa-table__header__button").forEach((e=>e.remove())))}})),s("div",Object.assign({id:a,className:$({"usa-table-container":!u},{"usa-table-container--scrollable":u},{"usa-table--borderless":m},{"usa-table--striped":h}),ref:p},{children:[s("table",Object.assign({className:$("usa-table",g),tabIndex:b},{children:[e("caption",Object.assign({hidden:!!n},{children:n})),e("thead",{children:e("tr",{children:r.map(((a,s)=>e("th",Object.assign({id:a.id,"data-sortable":c||null,scope:"col",role:"columnheader","aria-sort":c&&o===s?d:void 0},{children:a.name}),a.id)))})}),e("tbody",{children:l.map(((a,s)=>{const n=[];for(const e in a)c?n.push({value:a[e].value,sortValue:a[e].sortValue}):n.push({value:a[e].value?a[e].value:a[e]});return e("tr",{children:n.map(((a,s)=>e("td",Object.assign({"data-sort-value":c?a.sortValue:a.value},{children:a.value}),`td-${s}`)))},`tr-${s}`)}))})]})),c&&e("div",{className:"usa-sr-only usa-table__announcement-region","aria-live":"polite"})]}))},Me=({id:a,children:s,size:n="Default",className:t})=>{const i=$("usa-tag",{"usa-tag--big":"Big"===n},t);return e("span",Object.assign({id:a,className:i},{children:s}))},De=a=>{var{id:s,name:n,rows:t,className:i,onChange:r}=a,l=z(a,["id","name","rows","className","onChange"]);return e("textarea",Object.assign({className:$("usa-textarea",i),style:void 0===t?void 0:{height:"unset"},id:s,name:n,rows:t,onChange:r},l))},Te=a=>{var{filter:s,minTime:n,maxTime:i,step:r,onChange:l}=a,o=z(a,["filter","minTime","maxTime","step","onChange"]);const d=t(null);c((()=>{const e=d.current;x.on(e),p.on(e);const a=e.querySelector(".usa-combo-box__input");return l&&a.addEventListener("change",l),()=>{l&&a.removeEventListener("change",l),p.off(e),x.off(e)}}));const u={};return s&&(u["data-filter"]=s),n&&(u["data-min-time"]=n),i&&(u["data-max-time"]=i),r&&(u["data-step"]=r),e("div",Object.assign({ref:d,className:$("usa-time-picker",o.className)},u,{children:e("input",Object.assign({className:"usa-input",type:"text"},o))}))},Ee=({label:a,position:s="top",children:n})=>{const i=t(null);return c((()=>{var e;const n=null===(e=i.current)||void 0===e?void 0:e.firstChild;return n&&(n.classList.add("usa-tooltip"),n.title=a,n.setAttribute("data-position",s),k.on(n)),()=>k.off(n)})),e("span",Object.assign({ref:i},{children:n}))};export{L as Accordion,M as AccordionItem,D as Alert,E as Banner,P as Breadcrumb,A as BreadcrumbItem,I as Button,F as ButtonGroup,H as Card,q as CardBody,U as CardFooter,B as CardHeader,R as CharacterCount,Y as CharacterCountContainer,J as Checkbox,W as CheckboxGroup,X as ComboBox,Z as DatePicker,ae as DateRangePicker,se as ErrorMessages,ne as FileInput,te as Form,ie as FormGroup,re as Icon,me as Label,he as List,ge as MemorableDate,be as Modal,pe as Pagination,ve as ProcessList,Oe as ProcessListStep,je as Prose,Ne as RadioButton,ye as RadioButtonGroup,xe as RangeSlider,ke as Search,G as Select,K as SelectOption,we as SideNavigation,Ce as SideNavigationItem,Se as SiteAlert,$e as StepIndicator,Ve as SummaryBox,Le as Table,Me as Tag,De as TextArea,ue as TextInput,Te as TimePicker,Ee as Tooltip};
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -1,3 +0,45 @@
-import React from 'react';
+import React, { ReactNode, ReactElement, SyntheticEvent, PropsWithChildren, ChangeEventHandler, MouseEventHandler, FormEvent } from 'react';
 
+interface AccordionItemProps {
+    /**
+     * The unique identifier for the accordion item
+     */
+    id: string;
+    /**
+     * The label value for the accordion item
+     */
+    label: string;
+    /**
+     * Whether or not the accordion item is expanded
+     */
+    expanded: boolean;
+    /**
+     * The body of the accordion item
+     */
+    children: ReactNode;
+}
+interface AccordionProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * Whether or not to allow multiple items to be expanded at once
+     */
+    allowMultiSelect?: boolean;
+    /**
+     * An array of AccordionItem objects, used to build the accordion
+     */
+    items?: AccordionItemProps[];
+    /**
+     * AccordionItem components to display as children
+     */
+    children?: ReactElement<AccordionItemProps> | Array<ReactElement<AccordionItemProps>>;
+}
+/**
+ * An accordion is a list of headers that hide or reveal additional content when selected.
+ */
+declare const Accordion: ({ id, allowMultiSelect, items, children, }: AccordionProps) => ReactElement;
+declare const AccordionItem: ({ id, label, expanded, children, }: AccordionItemProps) => ReactElement;
+
 interface AlertProps {
@@ -11,3 +53,3 @@ /**
      */
-    type: 'info' | 'warning' | 'error' | 'success';
+    type: 'info' | 'warning' | 'error' | 'success' | 'emergency';
     /**
@@ -58,2 +100,1078 @@ * Whether or not to display the alert
 
-export { Alert, Banner };
+interface BreadcrumbItemProps {
+    /**
+     * The intended url path for the item
+     */
+    path: string;
+    /**
+     * The display value for this bread crumb item
+     */
+    name: string;
+    /**
+     * Custom callback for when breadcrumb item is clicked
+     */
+    action?: Function;
+}
+interface BreadcrumbProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * Custom callback for when breadcrumb item is clicked
+     */
+    action: Function;
+    /**
+     * Custom value to display as the current location
+     */
+    current?: string;
+    /**
+     * An array of bread crumb items to display
+     */
+    items?: BreadcrumbItemProps[];
+    /**
+     * BreadcrumbItem components to display as children
+     */
+    children?: ReactElement<BreadcrumbItemProps> | Array<ReactElement<BreadcrumbItemProps>>;
+}
+/**
+ * Breadcrumbs provide secondary navigation to help users understand where they are in a website.
+ */
+declare const Breadcrumb: ({ id, current, action, items, children, }: BreadcrumbProps) => ReactElement;
+declare const BreadcrumbItem: ({ path, name, action }: BreadcrumbItemProps) => ReactElement;
+
+interface ButtonProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The type of button to display
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * The style variant of button to display
+     */
+    variant?: 'default' | 'secondary' | 'accent-cool' | 'accent-warm' | 'base' | 'outline' | 'outline-inverse' | 'big' | 'unstyled';
+    /**
+     * A custom class to apply to the component
+     */
+    className?: string;
+    /**
+     * Custom callback for when button is clicked
+     */
+    onClick?: (param: SyntheticEvent) => void;
+    /**
+     * The contents of the button
+     */
+    children?: ReactNode;
+}
+/**
+ * A button draws attention to important actions with a large selectable surface.
+ */
+declare const Button: ({ id, type, variant, className, children, ...props }: ButtonProps & JSX.IntrinsicElements['button']) => React.ReactElement;
+
+interface ButtonGroupProps {
+    /**
+     * The unique identifier for this component
+     */
+    id?: string;
+    /**
+     * The type of button group to display
+     */
+    type?: 'default' | 'segmented';
+    /**
+     * A custom class to apply to the component
+     */
+    className?: string;
+    /**
+     * The contents of the label
+     */
+    children?: ReactNode;
+}
+/**
+ * A button group collects similar or related actions.
+ */
+declare const ButtonGroup: ({ id, type, className, children, }: ButtonGroupProps) => React.ReactElement;
+
+interface CardProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * A custom class to apply to the component
+     */
+    className?: string;
+    /**
+     * The body of the card
+     */
+    children: ReactNode;
+}
+/**
+ * Cards contain content and actions about a single subject.
+ */
+declare const Card: ({ id, className, children }: CardProps) => React.ReactElement;
+declare const CardBody: React.FC<PropsWithChildren>;
+declare const CardHeader: React.FC<PropsWithChildren>;
+declare const CardFooter: React.FC<PropsWithChildren>;
+
+declare const CharacterCountContainer: ({ className, ...divProps }: JSX.IntrinsicElements['div']) => React.ReactElement;
+interface CharacterCountProps {
+    /**
+     * The unique identifier for the character count span
+     */
+    id: string;
+}
+/**
+ * Character count helps users know how much text they can enter when there is a limit on the number of characters.
+ */
+declare const CharacterCount: ({ id, ...spanProps }: CharacterCountProps & JSX.IntrinsicElements['span']) => React.ReactElement;
+
+interface CheckboxData {
+    /**
+     * The text inside of the checkbox
+     */
+    label: string;
+    /**
+     * Default value of the checkbox
+     */
+    value?: string | readonly string[] | number;
+    /**
+     * Whether the checkbox is checked by default
+     */
+    checked?: boolean;
+}
+interface CheckboxProps extends CheckboxData {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The name for the checkbox input field
+     */
+    name?: string;
+    /**
+     * Whether the component is rendered as a tile
+     */
+    isTile?: boolean;
+    /**
+     * Event handler will be triggered when the checkbox value changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Event handler will be triggered when the checkbox is clicked
+     */
+    onClick?: MouseEventHandler<HTMLInputElement>;
+}
+/**
+ * Checkboxes allow users to select one or more options from a list.
+ */
+declare const Checkbox: ({ id, name, label, value, checked, isTile, onChange, onClick, ...inputProps }: CheckboxProps & JSX.IntrinsicElements['input']) => React.ReactElement;
+
+interface CheckboxGroupProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The name for all checkbox input fields
+     */
+    name: string;
+    /**
+     * Array of checkbox data for the input fields
+     */
+    data: CheckboxData[];
+    /**
+     * Whether the components are rendered as a tile
+     */
+    areTiles?: boolean;
+    /**
+     * Event handler will be triggered when the checkbox value changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Event handler will be triggered when the checkbox is clicked
+     */
+    onClick?: MouseEventHandler<HTMLInputElement>;
+}
+declare const CheckboxGroup: ({ id, name, data, areTiles, onChange, onClick, }: CheckboxGroupProps) => React.ReactElement;
+
+interface SelectOptionProps {
+    /**
+     * The value for the option
+     */
+    value: string | readonly string[] | number;
+    /**
+     * The label for the option
+     */
+    label: string;
+}
+interface SelectProps {
+    /**
+     * The unique identifier for the select
+     */
+    id: string;
+    /**
+     * The name of the select
+     */
+    name?: string;
+    /**
+     * The default option of the select
+     */
+    defaultOption?: SelectOptionProps | null;
+    /**
+     * The options of the select
+     */
+    options?: SelectOptionProps[];
+    /**
+     * SelectOption components to display as children
+     */
+    children?: ReactElement<SelectOptionProps> | Array<ReactElement<SelectOptionProps>>;
+    /**
+     * Event handler for when value of the select is changed
+     */
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+}
+/**
+ * A select component allows users to choose one option from a temporary modal menu.
+ */
+declare const Select: ({ defaultOption, options, onChange, className, children, ...selectProps }: SelectProps & JSX.IntrinsicElements['select']) => ReactElement;
+declare const SelectOption: ({ value, label }: SelectOptionProps) => ReactElement;
+
+type ComboBoxOptionProps = SelectOptionProps;
+type ComboBoxProps = {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The name for the combo box input field
+     */
+    name?: string;
+    /**
+     * The placeholder value to display in the control
+     */
+    placeholder?: string;
+} & SelectProps & JSX.IntrinsicElements['select'];
+/**
+ * A combo box helps users select an item from a large list of options.
+ */
+declare const ComboBox: ({ placeholder, ...comboBoxProps }: ComboBoxProps) => React.ReactElement;
+
+interface DatePickerProps {
+    /**
+     * The unique identifier for the input field
+     */
+    id: string;
+    /**
+     * The name of the input field
+     */
+    name?: string;
+    /**
+     * The date picker will not allow a date selection before this date. The date should be in the format YYYY-MM-DD. Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default.
+     */
+    minDate?: Date | string;
+    /**
+     * The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in an later date will cause native form validation error. There is no default maximum date.
+     */
+    maxDate?: Date | string;
+    /**
+     * The date picker will show a range selection from the range date. The date should be in the format YYYY-MM-DD.
+     */
+    dateRange?: Date | string;
+    /**
+     * The date picker input will set this value if it is a valid date. The date should be in the format YYYY-MM-DD.
+     */
+    defaultValue?: string;
+    /**
+     * Event handler will be triggered when the date-picker value changes
+     */
+    onChange?: (this: HTMLInputElement, event: Event) => void;
+}
+/**
+ * A date picker helps users select a single date.
+ */
+declare const DatePicker: ({ minDate, maxDate, dateRange, defaultValue, onChange, ...inputProps }: DatePickerProps & JSX.IntrinsicElements['input']) => React.ReactElement;
+
+interface DateRangePickerProps {
+    /**
+     * The unique identifier for the date range picker field
+     */
+    id?: string;
+}
+/**
+ * A date range picker helps users select a range between two dates.
+ */
+declare const DateRangePickerContainer: ({ id, children, }: DateRangePickerProps & PropsWithChildren<unknown>) => React.ReactElement;
+
+interface ErrorMessagesProps {
+    /**
+     * The unique identifier for this component
+     */
+    id?: string;
+    /**
+     * An array of error strings to display
+     */
+    errors?: string[];
+    /**
+     * ReactNode components to display as children
+     */
+    children?: ReactNode;
+}
+/**
+ * Outputs a list of error messages as HTML.
+ */
+declare const ErrorMessages: ({ id, errors, children, }: ErrorMessagesProps) => React.ReactElement;
+
+interface FileInputProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The name for the file input field
+     */
+    name?: string;
+}
+/**
+ * File input allows users to attach one or multiple files.
+ */
+declare const FileInput: (inputProps: FileInputProps & JSX.IntrinsicElements['input']) => React.ReactElement;
+
+interface FormProps {
+    /**
+     * The unique identifier for the dropdown
+     */
+    id: string;
+    /**
+     * Whether to render a large form
+     */
+    isLarge?: boolean;
+}
+/**
+ * A form allows users to enter information into a page.
+ */
+declare const Form: ({ id, isLarge, className, children, ...formProps }: FormProps & JSX.IntrinsicElements['form']) => React.ReactElement;
+
+interface FormGroupProps {
+    /**
+     * The unique identifier for this component
+     */
+    id?: string;
+    /**
+     * An array of string error messages
+     */
+    errors?: string[];
+    /**
+     * Additional class name for the form group
+     */
+    className?: string;
+    /**
+     * The contents of the form group
+     */
+    children: ReactNode;
+}
+/**
+ * A wrapper for form elements used to provide validation formatting.
+ */
+declare const FormGroup: ({ id, errors, className, children, }: FormGroupProps) => React.ReactElement;
+
+interface IconProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The type of icon to display
+     */
+    type?: 'accessibility_new' | 'accessible_forward' | 'account_balance' | 'account_box' | 'account_circle' | 'add' | 'add_circle' | 'add_circle_outline' | 'alarm' | 'alernate_email' | 'announcement' | 'arrow_back' | 'arrow_downward' | 'arrow_drop_down' | 'arrow_drop_up' | 'arrow_forward' | 'arrow_upward' | 'api' | 'assessment' | 'attach_file' | 'attach_money' | 'autorenew' | 'backpack' | 'bathtub' | 'bedding' | 'bookmark' | 'bug_report' | 'build' | 'calendar_today' | 'campaign' | 'camping' | 'cancel' | 'chat' | 'check' | 'check_box_outline_blank' | 'check_circle' | 'check_circle_outline' | 'checkroom' | 'clean_hands' | 'clothes' | 'close' | 'closed_caption' | 'cloud' | 'code' | 'comment' | 'connect_without_contact' | 'construction' | 'construction_worker' | 'contact_page' | 'content_copy' | 'coronavirus' | 'credit_card' | 'deck' | 'delete' | 'device_thermostat' | 'directions' | 'directions_bike' | 'directions_bus' | 'directions_car' | 'directions_walk' | 'do_not_disturb' | 'do_not_touch' | 'drag_handle' | 'eco' | 'edit' | 'electrical_services' | 'emoji_events' | 'error' | 'error_outline' | 'event' | 'expand_less' | 'expand_more' | 'facebook' | 'fast_forward' | 'fast_rewind' | 'favorite' | 'favorite_border' | 'file_download' | 'file_present' | 'file_upload' | 'filter_alt' | 'filter_list' | 'fingerprint' | 'first_page' | 'flag' | 'flickr' | 'flight' | 'flooding' | 'folder' | 'folder_open' | 'format_quote' | 'format_size' | 'forum' | 'github' | 'grid_view' | 'group_add' | 'groups' | 'hearing' | 'help' | 'help_outline' | 'highlight_off' | 'history' | 'home' | 'hospital' | 'hotel' | 'hourglass_empty' | 'hurricane' | 'identification' | 'image' | 'info' | 'info_outline' | 'insights' | 'instagram' | 'keyboard' | 'label' | 'language' | 'last_page' | 'launch' | 'lightbulb' | 'lightbulb_outline' | 'link' | 'link_off' | 'list' | 'local_cafe' | 'local_fire_department' | 'local_gas_station' | 'local_grocery_store' | 'local_hospital' | 'local_laundry_servie' | 'local_library' | 'local_offer' | 'local_parking' | 'local_pharmacy' | 'local_police' | 'local_taxi' | 'location_city' | 'lock' | 'lock_open' | 'lock_outline' | 'login' | 'logout' | 'loop' | 'mail' | 'mail_outline' | 'map' | 'masks' | 'medical_services' | 'menu' | 'military_tech' | 'more_horiz' | 'more_vert' | 'my_location' | 'navigate_before' | 'navigate_next' | 'navigate_far_before' | 'navigate_far_next' | 'near_me' | 'notifications' | 'notifications_active' | 'notifications_none' | 'park' | 'people' | 'person' | 'pets' | 'phone' | 'photo_camera' | 'print' | 'priority_high' | 'public' | 'push_pin' | 'radio_button_unchecked' | 'rain' | 'reduce_capacity' | 'remove' | 'report' | 'restaurant' | 'rss_feed' | 'safety_divider' | 'sanitizer' | 'save_alt' | 'severe_weather' | 'schedule' | 'school' | 'science' | 'search' | 'security' | 'send' | 'sentiment_dissatisfied' | 'sentiment_neutral' | 'sentiment_satisfied' | 'sentiment_satisfied_alt' | 'sentiment_very_dissatisfied' | 'settings' | 'share' | 'shield' | 'shopping_basket' | 'snow' | 'soap' | 'social_distance' | 'sort_arrow' | 'spellcheck' | 'star' | 'star_half' | 'star_outline' | 'store' | 'support' | 'support_agent' | 'text_fields' | 'thumb_down_alt' | 'thumb_up_alt' | 'timer' | 'toggle_off' | 'toggle_on' | 'topic' | 'tornado' | 'translate' | 'trending_down' | 'trending_up' | 'twitter' | 'undo' | 'unfold_less' | 'unfold_more' | 'update' | 'upload_file' | 'verified' | 'verified_user' | 'visibility' | 'visibility_off' | 'volume_off' | 'warning' | 'wash' | 'wifi' | 'work' | 'youtube' | 'zoom_in' | 'zoom_out_map' | 'zoom_out';
+    /**
+     * The size of the icon
+     */
+    size?: 'size-3' | 'size-4' | 'size-5' | 'size-6' | 'size-7' | 'size-8' | 'size-9';
+    /**
+     * A custom class to apply to the component
+     */
+    className?: string;
+}
+/**
+ * Icons help communicate meaning, actions, status, or feedback.
+ */
+declare const Icon: ({ id, type, size, className, }: IconProps) => React.ReactElement;
+
+interface TextInputProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The name of the text input
+     */
+    name?: string;
+    /**
+     * The type of input to display
+     */
+    type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
+    /**
+     * The type of mask to apply to the input
+     */
+    mask?: 'ssn' | 'phone_number' | 'zip_5_digit' | 'zip_9_digit';
+    /**
+     * Custom element to display before the input
+     */
+    prefix?: ReactNode;
+    /**
+     * Custom element to display after the input
+     */
+    suffix?: ReactNode;
+    /**
+     * Custom callback for when input is changed
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+/**
+ * A text input allows users to enter any combination of letters, numbers, or symbols.
+ */
+declare const TextInput: ({ id, name, className, type, mask, prefix, suffix, onChange, ...props }: TextInputProps & Omit<JSX.IntrinsicElements['input'], 'prefix' | 'suffix'>) => React.ReactElement;
+
+interface LabelProps {
+    /**
+     * The HTML element that this is labeling
+     */
+    htmlFor?: string;
+    /**
+     * A boolean indicating whether or not the field is required
+     */
+    required?: boolean;
+    /**
+     * The contents of the label
+     */
+    children: ReactNode;
+}
+/**
+ * Defines a label for an HTML element.
+ */
+declare const Label: ({ htmlFor, required, children, ...labelProps }: LabelProps & JSX.IntrinsicElements['label']) => React.ReactElement;
+
+interface ListItem {
+    id: string;
+    value: ReactNode;
+}
+interface ListProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The type of list to display
+     */
+    type?: 'ordered' | 'unordered';
+    /**
+     * The style variant of list to display
+     */
+    variant?: 'default' | 'unstyled';
+    /**
+     * A custom class to apply to the component
+     */
+    className?: string;
+    /**
+     * The list of items to display
+     */
+    items: ListItem[];
+}
+/**
+ * A list organizes information into discrete sequential sections.
+ */
+declare const List: ({ id, type, variant, className, items, ...listProps }: ListProps) => React.ReactElement;
+
+interface MemorableDateProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The default value for the day field
+     */
+    defaultDayValue?: number;
+    /**
+     * The default value for the year field
+     */
+    defaultMonthValue?: number;
+    /**
+     * The default value for the year field
+     */
+    defaultYearValue?: number;
+    /**
+     * Event handler will be triggered when a month value changes
+     */
+    onMonthChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Event handler will be triggered when a day value changes
+     */
+    onDayChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Event handler will be triggered when a year value changes
+     */
+    onYearChange?: ChangeEventHandler<HTMLInputElement>;
+}
+/**
+ * A memorable date splits a date into three fields.
+ */
+declare const MemorableDate: ({ id, defaultMonthValue, defaultDayValue, defaultYearValue, onMonthChange, onDayChange, onYearChange, ...props }: MemorableDateProps) => React.ReactElement;
+
+interface ModalProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The type of modal to display
+     */
+    size?: 'small' | 'large';
+    /**
+     * The heading for the alert
+     */
+    heading: string;
+    /**
+     * The footer for the alert
+     */
+    footer?: ReactNode;
+    /**
+     * The contents of the alert
+     */
+    children: ReactNode;
+}
+/**
+ * A modal disables page content and focuses the user’s attention on a single task or message.
+ */
+declare const Modal: ({ id, heading, size, footer, children, }: ModalProps) => React.ReactElement;
+
+type CreatePageUrlHandler = (page: number) => string | undefined;
+type OnPageHandler = (event: SyntheticEvent<Element, Event>, page: number) => void;
+interface PaginationProps {
+    /**
+     * The unique identifier for the pagination
+     */
+    id: string;
+    /**
+     * The current page (0 indexed)
+     */
+    currentPage: number;
+    /**
+     * The amount of pages
+     */
+    amountOfPages: number;
+    /**
+     * The amount of page items to show
+     */
+    amountOfVisiblePageItems?: number;
+    /**
+     * Defines a string value that labels the current element.
+     */
+    ariaLabel: string;
+    /**
+     * Pass a function in to create href URLs
+     */
+    createPageUrl?: CreatePageUrlHandler;
+    /**
+     * Event handler for when a pagination item is clicked
+     */
+    onPage?: OnPageHandler;
+}
+/**
+ * Pagination is navigation for paginated content.
+ */
+declare const Pagination: ({ id, currentPage, amountOfPages: pageSize, amountOfVisiblePageItems, ariaLabel, createPageUrl, onPage, }: PaginationProps) => React.ReactElement;
+
+interface ProcessListStepProps {
+    /**
+     * The heading for the step
+     */
+    heading: string;
+    /**
+     * The level of the headings
+     */
+    headingElementName?: string;
+    /**
+     * Whether the step is the current step
+     */
+    isCurrentStep?: boolean;
+    /**
+     * Whether the step is a completed step
+     */
+    isCompletedStep?: boolean;
+    /**
+     * Whether the step is the last step
+     */
+    isLastStep?: boolean;
+    /**
+     * Additional class names for the heading element
+     */
+    headingClassName?: string;
+    /**
+     * The body of the step
+     */
+    children: ReactNode;
+}
+interface ProcessListProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The level of the headings
+     */
+    steps?: ProcessListStepProps[];
+    /**
+     * The current step (1 based index)
+     */
+    currentStep?: number;
+    /**
+     * ProcessListStep components to display as children
+     */
+    children?: ReactElement<ProcessListStepProps> | Array<ReactElement<ProcessListStepProps>>;
+}
+/**
+ * A process list displays the steps or stages of important instructions or processes.
+ */
+declare const ProcessList: ({ id, steps, currentStep, children, }: ProcessListProps) => ReactElement;
+declare const ProcessListStep: ({ heading, headingClassName, headingElementName, isCurrentStep, isCompletedStep, isLastStep, children, }: ProcessListStepProps) => ReactElement;
+
+interface ProseProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * A custom class to apply to the component
+     */
+    className?: string;
+    /**
+     * The contents of the prose
+     */
+    children?: ReactNode;
+}
+/**
+ * Format a block of running text.
+ */
+declare const Prose: ({ id, className, children, ...props }: ProseProps & JSX.IntrinsicElements['section']) => React.ReactElement;
+
+interface RadioButtonData {
+    /**
+     * The text inside of the radioButton
+     */
+    label: string;
+    /**
+     * Default value of the radioButton
+     */
+    value?: string | readonly string[] | number;
+    /**
+     * Whether the radioButton is checked by default
+     */
+    checked?: boolean;
+}
+interface RadioButtonProps extends RadioButtonData {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The name for the radioButton input field
+     */
+    name?: string;
+    /**
+     * Whether the component is rendered as a tile
+     */
+    isTile?: boolean;
+    /**
+     * Event handler will be triggered when the radioButton value changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Event handler will be triggered when the radioButton is clicked
+     */
+    onClick?: MouseEventHandler<HTMLInputElement>;
+}
+/**
+ * Radio buttons allow users to select exactly one choice from a group.
+ */
+declare const RadioButton: ({ id, name, label, value, checked, isTile, onChange, onClick, ...inputProps }: RadioButtonProps & JSX.IntrinsicElements['input']) => React.ReactElement;
+
+interface RadioButtonGroupProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The name for all radioButton input fields
+     */
+    name: string;
+    /**
+     * Array of radioButton data for the input fields
+     */
+    data: RadioButtonData[];
+    /**
+     * Whether the components are rendered as a tile
+     */
+    areTiles?: boolean;
+    /**
+     * Event handler will be triggered when the radioButton value changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Event handler will be triggered when the radioButton is clicked
+     */
+    onClick?: MouseEventHandler<HTMLInputElement>;
+}
+declare const RadioButtonGroup: ({ id, name, data, areTiles, onChange, onClick, }: RadioButtonGroupProps) => React.ReactElement;
+
+interface RangeSliderProps {
+    /**
+     * The unique identifier for the input field
+     */
+    id: string;
+    /**
+     * The name of the input field
+     */
+    name: string;
+    /**
+     * A minimum value allowed for the slider
+     */
+    minValue?: string;
+    /**
+     * A maximum value allowed for the slider
+     */
+    maxValue?: string;
+    /**
+     * The value to increment the slider by as it is changed
+     */
+    step?: string;
+    /**
+     * The default value to apply to the range slider
+     */
+    defaultValue?: string;
+    /**
+     * Event handler will be triggered when the range slider value changes
+     */
+    onChange?: (this: HTMLInputElement, event: Event) => void;
+}
+/**
+ * A range slider allows users to choose an approximate number from a range.
+ */
+declare const RangeSlider: ({ id, minValue, maxValue, step, defaultValue, onChange, ...inputProps }: RangeSliderProps & Omit<JSX.IntrinsicElements['input'], 'min' | 'max'>) => React.ReactElement;
+
+interface SearchProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The size of the search
+     */
+    type?: 'default' | 'small' | 'big';
+    /**
+     * Custom callback for when a search is performed
+     */
+    onSearch?: (event: FormEvent<HTMLFormElement>, searchText: string) => void;
+}
+/**
+ * Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation
+ */
+declare const Search: ({ id, type, onSearch, ...props }: SearchProps & JSX.IntrinsicElements['input']) => React.ReactElement;
+
+interface SideNavigationItemProps {
+    /**
+     * Anchor to render for current SideNavigationItem
+     */
+    anchor: ReactNode;
+    /**
+     * Items of the navigation
+     */
+    items?: SideNavigationItemProps[];
+}
+interface SideNavigationProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The aria-label for the navigation element
+     */
+    ariaLabel: string;
+    /**
+     * Items of the navigation
+     */
+    items?: SideNavigationItemProps[];
+    /**
+     * SideNavigationItem components to display as children
+     */
+    children?: ReactElement<SideNavigationItemProps> | Array<ReactElement<SideNavigationItemProps>>;
+}
+/**
+ * Hierarchical, vertical navigation to place at the side of a page.
+ */
+declare const SideNavigation: ({ id, ariaLabel, items, children, }: SideNavigationProps) => ReactElement;
+declare const SideNavigationItem: ({ items, anchor }: SideNavigationItemProps) => JSX.Element;
+
+interface SiteAlertProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The type of alert to display
+     */
+    type?: 'Info' | 'Emergency';
+    /**
+     * The heading for the alert
+     */
+    heading?: string;
+    /**
+     * A boolean indicating whether or not the alert should be slim
+     */
+    slim?: boolean;
+    /**
+     * A boolean indicating whether or not to show the applicable icon
+     */
+    noIcon?: boolean;
+    /**
+     * A custom class to apply to the component
+     */
+    className?: string;
+    /**
+     * The contents of the alert
+     */
+    children: ReactNode;
+}
+/**
+ * A site alert communicates urgent sitewide information.
+ */
+declare const SiteAlert: ({ id, type, heading, slim, noIcon, className, children, }: SiteAlertProps) => React.ReactElement;
+
+interface StepIndicatorProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * Array of labels for the steps. Length of array will be used as step count.
+     */
+    steps: string[];
+    /**
+     * Step that is currently active. (0-based index)
+     */
+    currentStep: number;
+    /**
+     * Hides labels of step indicator if set to true. Defaults to false.
+     */
+    hideLabels?: boolean;
+    /**
+     * Shows step number in step indicator if set to true. Defaults to false.
+     */
+    showCounters?: boolean;
+    /**
+     * Shows small step number in step indicator if set to true. Defaults to false.
+     */
+    showSmallCounters?: boolean;
+    /**
+     * Centers label and counter if set to true. Defaults to false.
+     */
+    centerCounters?: boolean;
+    /**
+     * Level of the heading (h1, h2, h3, h4, h5, h6). Defaults to h4
+     */
+    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+/**
+ * A step indicator updates users on their progress through a multi-step process.
+ */
+declare const StepIndicator: ({ id, steps, currentStep, hideLabels, showCounters, showSmallCounters, centerCounters, headingLevel, }: StepIndicatorProps) => React.ReactElement;
+
+interface SummaryBoxProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The heading for the summary box
+     */
+    heading: string;
+    /**
+     * A custom class to apply to the component
+     */
+    className?: string;
+    /**
+     * An array of string messages to display in the summary box
+     */
+    items: string[];
+}
+/**
+ * A summary box highlights key information from a longer page or displays next steps.
+ */
+declare const SummaryBox: ({ id, heading, className, items, }: SummaryBoxProps) => React.ReactElement;
+
+interface TableProps<T = any> {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The table header details for the table
+     */
+    columns: TableColumn[];
+    /**
+     * The data to display in the table rows
+     */
+    data: T[];
+    /**
+     * An optional caption to display above the table
+     */
+    caption?: string;
+    /**
+     * A boolean indicating if the table is sortable or not
+     */
+    sortable?: boolean;
+    /**
+     * The column index to set as the default sort
+     */
+    sortIndex?: number;
+    /**
+     * The default sort direction if sortIndex is provided
+     */
+    sortDir?: 'ascending' | 'descending';
+    /**
+     * A boolean indicating if the table is scrollable or not
+     */
+    scrollable?: boolean;
+    /**
+     * A boolean indicating if the table is borderless or not
+     */
+    borderless?: boolean;
+    /**
+     * A boolean indicating if the table is striped or not
+     */
+    striped?: boolean;
+    /**
+     * Additional class names for the table
+     */
+    className?: string;
+    /**
+     * Used primarily to make table focusable
+     */
+    tabIndex?: number;
+}
+interface TableColumn {
+    id: string;
+    name: string;
+}
+interface TableCell {
+    value: string;
+    sortValue?: string;
+}
+/**
+ * A table shows information in columns and rows.
+ */
+declare const Table: ({ id, caption, columns, data, sortable, sortIndex, sortDir, scrollable, borderless, striped, className, tabIndex, }: TableProps) => React.ReactElement;
+
+interface TagProps {
+    /**
+     * The unique identifier for this component
+     */
+    id: string;
+    /**
+     * The children of the tag
+     */
+    children: ReactNode;
+    /**
+     * The size of the tag
+     */
+    size?: 'Default' | 'Big';
+    /**
+     * Any additional CSS classes will be added to the tag
+     */
+    className?: string;
+}
+/**
+ * A tag draws attention to new or categorized content elements.
+ */
+declare const Tag: ({ id, children, size, className, }: TagProps) => React.ReactElement;
+
+interface TextAreaProps {
+    /**
+     * The unique identifier for the textarea
+     */
+    id: string;
+    /**
+     * The name of the textarea
+     */
+    name?: string;
+    /**
+     * The number of rows to render for the textarea
+     */
+    rows?: number;
+    /**
+     * Event handler for when value of textarea is changes
+     */
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+}
+/**
+ * A text area allows users to enter any combination of letters, numbers, or symbols.
+ */
+declare const TextArea: ({ id, name, rows, className, onChange, ...textAreaProps }: TextAreaProps & JSX.IntrinsicElements['textarea']) => React.ReactElement;
+
+interface TimePickerProps {
+    /**
+     * The unique identifier for the input
+     */
+    id: string;
+    /**
+     * The name of the input
+     */
+    name?: string;
+    /**
+     * The time picker will use this regular expression to filter the time picker options.
+     */
+    filter?: string;
+    /**
+     * The start time used in the time picker in hh:mm 24-hour format. The default is 00:00.
+     */
+    minTime?: string;
+    /**
+     * The end time used for the time picker in hh:mm 24-hour format. The default is 23:59.
+     */
+    maxTime?: string;
+    /**
+     * The number of minutes between options. The minimum is 1 minute and the default is 30 minutes.
+     */
+    step?: number;
+    /**
+     * Event handler will be triggered when the time-picker value changes
+     */
+    onChange?: (this: HTMLInputElement, event: Event) => void;
+}
+/**
+ * A time picker helps users select a specific time.
+ */
+declare const TimePicker: ({ filter, minTime, maxTime, step, onChange, ...inputProps }: TimePickerProps & JSX.IntrinsicElements['input']) => React.ReactElement;
+
+interface TooltipProps {
+    /**
+     * The text value to display in the tooltip
+     */
+    label: string;
+    /**
+     * Where the tooltip will display in reference to its child
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The contents of the tooltip
+     */
+    children: ReactNode;
+}
+/**
+ * A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.
+ */
+declare const Tooltip: ({ label, position, children, }: TooltipProps) => React.ReactElement;
+
+export { Accordion, AccordionItem, AccordionItemProps, Alert, Banner, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, Button, ButtonGroup, Card, CardBody, CardFooter, CardHeader, CharacterCount, CharacterCountContainer, Checkbox, CheckboxData, CheckboxGroup, ComboBox, ComboBoxOptionProps, CreatePageUrlHandler, DatePicker, DateRangePickerContainer as DateRangePicker, ErrorMessages, FileInput, Form, FormGroup, Icon, Label, List, ListItem, MemorableDate, Modal, OnPageHandler, Pagination, ProcessList, ProcessListStep, ProcessListStepProps, Prose, RadioButton, RadioButtonData, RadioButtonGroup, RangeSlider, Search, Select, SelectOption, SelectOptionProps, SideNavigation, SideNavigationItem, SideNavigationItemProps, SiteAlert, StepIndicator, SummaryBox, Table, TableCell, TableColumn, Tag, TextArea, TextInput, TimePicker, Tooltip };

package.json

 {
   "name": "@metrostar/comet-uswds",
-  "version": "2.2.0-beta-0",
+  "version": "2.2.0",
   "description": "React with TypeScript Component Library based on USWDS 3.0.",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

299700

increased by174.27%

Lines of code

4055

increased by52.21%

Number of low quality alerts

2

decreased by-33.33%

No dependency changes