@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/CopyButton/index.js

@@ -0,0 +1,37 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import useClipboard from "react-use-clipboard";
+import { Button } from "../Button/index.js";
+const COPY_DURATION = 2500;
+const CopyButton = ({
+  size = "small",
+  value,
+  copyText = "Copy",
+  copiedText = "Copied!",
+  sentiment = "primary",
+  noBorder,
+  bordered,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const [isCopied, setCopied] = useClipboard(value, {
+    successDuration: COPY_DURATION
+  });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      onClick: setCopied,
+      size,
+      sentiment,
+      variant: noBorder || !bordered ? "ghost" : "outlined",
+      className,
+      "data-testid": dataTestId,
+      "aria-label": "Copy",
+      icon: isCopied ? "check" : "copy-content",
+      tooltip: isCopied ? copiedText : copyText
+    }
+  );
+};
+export {
+  CopyButton
+};

package/dist/components/DateInput/datepicker.css.js

@@ -0,0 +1,4 @@
+const style = '.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon::before{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{margin-left:-4px;position:absolute;width:0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{box-sizing:content-box;position:absolute;border:8px solid rgba(0,0,0,0);height:0;width:1px;content:"";z-index:-1;border-width:8px;left:-8px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before{border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{top:0;margin-top:-8px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{border-top:none;border-bottom-color:#f0f0f0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{top:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before{top:-1px;border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{bottom:0;margin-bottom:-8px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after{border-bottom:none;border-top-color:#fff}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after{bottom:0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before{bottom:-1px;border-top-color:#aeaeae}.react-datepicker-wrapper{display:inline-block;padding:0;border:0}.react-datepicker{font-family:"Helvetica Neue",helvetica,arial,sans-serif;font-size:.8rem;background-color:#fff;color:#000;border:1px solid #aeaeae;border-radius:.3rem;display:inline-block;position:relative}.react-datepicker--time-only .react-datepicker__triangle{left:35px}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__triangle{position:absolute;left:50px}.react-datepicker-popper{z-index:1}.react-datepicker-popper[data-placement^=bottom]{padding-top:10px}.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle,.react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle{left:auto;right:50px}.react-datepicker-popper[data-placement^=top]{padding-bottom:10px}.react-datepicker-popper[data-placement^=right]{padding-left:8px}.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle{left:auto;right:42px}.react-datepicker-popper[data-placement^=left]{padding-right:8px}.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle{left:42px;right:auto}.react-datepicker__header{text-align:center;background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 15px}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:#000;font-weight:bold;font-size:.944rem}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:2px;padding:0;border:none;z-index:1;height:32px;width:32px;text-indent:-999em;overflow:hidden}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover *::before{border-color:#a6a6a6}.react-datepicker__navigation-icon{position:relative;top:-1px;font-size:20px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next::before{transform:rotate(45deg);left:-7px}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous::before{transform:rotate(225deg);right:-7px}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:5px 0 10px 15px;text-align:left}.react-datepicker__input-time-container .react-datepicker-time__caption{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:5px;display:inline-block}.react-datepicker__time-container{float:right;border-left:1px solid #aeaeae;width:85px}.react-datepicker__time-container--with-today-button{display:inline;border:1px solid #aeaeae;border-radius:.3rem;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{position:relative;background:#fff;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:85px;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(195px + 1.7rem/2);overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:#f0f0f0}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:bold}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:rgba(0,0,0,0)}.react-datepicker__week-number{color:#ccc;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,.react-datepicker__week-number--keyboard-selected):hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__week-number--selected{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__week-number--keyboard-selected{border-radius:.3rem;background-color:#2a87d0;color:#fff}.react-datepicker__week-number--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day-names{white-space:nowrap;margin-bottom:-8px}.react-datepicker__week{white-space:nowrap}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:#000;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:bold}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{border-radius:.3rem;background-color:#3dcc4a;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{position:relative;border-radius:.3rem;background-color:#ff6803;color:#fff}.react-datepicker__day--holidays .holiday-overlay,.react-datepicker__month-text--holidays .holiday-overlay,.react-datepicker__quarter-text--holidays .holiday-overlay,.react-datepicker__year-text--holidays .holiday-overlay{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s ease-in-out}.react-datepicker__day--holidays:hover,.react-datepicker__month-text--holidays:hover,.react-datepicker__quarter-text--holidays:hover,.react-datepicker__year-text--holidays:hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .holiday-overlay,.react-datepicker__month-text--holidays:hover .holiday-overlay,.react-datepicker__quarter-text--holidays:hover .holiday-overlay,.react-datepicker__year-text--holidays:hover .holiday-overlay{visibility:visible;opacity:1}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__day--selected:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--in-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__year-text--selected:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--in-range:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{border-radius:.3rem;background-color:#bad9f1;color:#000}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:#ccc}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:rgba(0,0,0,0)}.react-datepicker__input-container{position:relative;display:inline-block;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{position:absolute;padding:.5rem;box-sizing:content-box}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid rgba(0,0,0,0);border-radius:.3rem;position:relative}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{transform:rotate(135deg);right:-16px;top:0}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:#f0f0f0;position:absolute;width:50%;left:25%;top:30px;z-index:1;text-align:center;border-radius:.3rem;border:1px solid #aeaeae}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:20px;width:100%;display:block;margin-left:auto;margin-right:auto}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:15px}.react-datepicker__close-icon{cursor:pointer;background-color:rgba(0,0,0,0);border:0;outline:0;padding:0 6px 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle}.react-datepicker__close-icon::after{cursor:pointer;background-color:#216ba5;color:#fff;border-radius:50%;height:16px;width:16px;padding:2px;font-size:12px;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:"×"}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled::after{cursor:default;background-color:#ccc}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;cursor:pointer;text-align:center;font-weight:bold;padding:5px 0;clear:left}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:rgba(0,0,0,.8);left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem}@media(max-width: 400px),(max-height: 550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem}.react-datepicker__children-container{width:13.8rem;margin:.4rem;padding-right:.2rem;padding-left:.2rem;height:auto}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap}.react-datepicker__calendar-icon{width:1em;height:1em;vertical-align:-0.125em}';
+export {
+  style as default
+};

package/dist/components/DateInput/index.d.ts

@@ -0,0 +1,38 @@
+import type { FocusEvent, ReactNode } from 'react';
+import type { ReactDatePickerProps } from 'react-datepicker';
+type DateInputProps = Pick<ReactDatePickerProps<string, boolean>, 'locale' | 'onChange'> & {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    maxDate?: Date | null;
+    minDate?: Date | null;
+    name?: string;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    error?: string;
+    required?: boolean;
+    format?: (value?: Date | string) => string | undefined;
+    /**
+     * Label of the field
+     */
+    label?: string;
+    value?: Date | string | [Date | null, Date | null];
+    className?: string;
+    'data-testid'?: string;
+    selectsRange?: boolean;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    excludeDates?: Date[];
+    id?: string;
+    labelDescription?: ReactNode;
+    success?: string | boolean;
+    helper?: string;
+    size?: 'small' | 'medium' | 'large';
+    readOnly?: boolean;
+    tooltip?: string;
+};
+/**
+ * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
+ * See https://reactdatepicker.com/ for more information.
+ */
+export declare const DateInput: ({ autoFocus, disabled, error, format, label, labelDescription, locale, maxDate, minDate, startDate, endDate, name, onBlur, onChange, onFocus, required, excludeDates, value, selectsRange, className, id, success, helper, size, readOnly, tooltip, "data-testid": dataTestId, }: DateInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateInput/index.js

@@ -0,0 +1,301 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { Global } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { useId } from "react";
+import DatePicker, { registerLocale } from "react-datepicker";
+import { Button } from "../Button/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { TextInputV2 } from "../TextInputV2/index.js";
+import style from "./datepicker.css.js";
+const PREFIX = ".react-datepicker";
+const StyledWrapper = styled.div`
+  width: 100%;
+
+  div${PREFIX}-wrapper {
+    display: block;
+  }
+  div${PREFIX}__input-container {
+    display: block;
+  }
+  div${PREFIX}__triangle {
+    display: none;
+  }
+
+  div${PREFIX}__month-container {
+    padding: 16px;
+  }
+
+  ${PREFIX}-popper {
+    z-index: 1000;
+  }
+  .calendar {
+    font-family: ${({ theme }) => theme.typography.body.fontFamily};
+    border-color: ${({ theme }) => theme.colors.neutral.borderWeak};
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundWeakElevated};
+
+    ${PREFIX}__header {
+      color: ${({ theme }) => theme.colors.neutral.text};
+      background-color: ${({ theme }) => theme.colors.neutral.backgroundWeakElevated};
+      border-bottom: none;
+      text-align: inherit;
+      display: block;
+      padding-top: 0;
+      position: inherit;
+    }
+
+    ${PREFIX}__triangle {
+      border-bottom-color: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+    }
+    ${PREFIX}__month {
+      margin: 0;
+    }
+
+    ${PREFIX}__day-names {
+      margin-top: 8px;
+    }
+
+    ${PREFIX}__day-name {
+      font-family: ${({ theme }) => theme.typography.bodySmallStrong.fontFamily};
+      color: ${({ theme }) => theme.colors.neutral.text};
+      font-weight: ${({ theme }) => theme.typography.bodySmallStrong.weight};
+      font-size: ${({ theme }) => theme.typography.bodySmallStrong.fontSize};
+      line-height: ${({ theme }) => theme.typography.bodySmallStrong.lineHeight};
+      text-align: center;
+      margin: 3px;
+      text-transform: capitalize;
+    }
+
+    ${PREFIX}__day {
+      color: ${({ theme }) => theme.colors.neutral.textWeak};
+      font-weight: ${({ theme }) => theme.typography.bodyStrong.weight};
+      font-size: ${({ theme }) => theme.typography.bodyStrong.fontSize};
+      width: 26px;
+      height: 26px;
+      margin-left: 3px;
+      margin-right: 3px;
+    }
+
+    ${PREFIX}__day--outside-month {
+      color: ${({ theme }) => theme.colors.neutral.textDisabled};
+      font-weight: ${({ theme }) => theme.typography.bodyStrong.weight};
+      font-size: ${({ theme }) => theme.typography.bodyStrong.fontSize};
+    }
+
+    ${PREFIX}__day--selected {
+      color: ${({ theme }) => theme.colors.primary.textStrong};
+      background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
+
+      &[aria-disabled='true'],
+      &:disabled {
+        color: ${({ theme }) => theme.colors.primary.textStrongDisabled};
+        background-color: ${({ theme }) => theme.colors.primary.backgroundStrongDisabled};
+      }
+    }
+
+    ${PREFIX}__day--in-selecting-range {
+      color: ${({ theme }) => theme.colors.primary.text};
+      background-color: ${({ theme }) => theme.colors.primary.background};
+
+      &[aria-disabled='true'],
+      &:disabled {
+        color: ${({ theme }) => theme.colors.primary.textDisabled};
+        background-color: ${({ theme }) => theme.colors.primary.backgroundDisabled};
+      }
+    }
+
+    ${PREFIX}__day--in-range {
+      color: ${({ theme }) => theme.colors.primary.text};
+      background-color: ${({ theme }) => theme.colors.primary.background};
+
+      &[aria-disabled='true'],
+      &:disabled {
+        color: ${({ theme }) => theme.colors.primary.textDisabled};
+        background-color: ${({ theme }) => theme.colors.primary.backgroundDisabled};
+      }
+    }
+
+    ${PREFIX}__day--range-start {
+      color: ${({ theme }) => theme.colors.primary.textStrong};
+      background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
+
+      &[aria-disabled='true'],
+      &:disabled {
+        color: ${({ theme }) => theme.colors.primary.textStrongDisabled};
+        background-color: ${({ theme }) => theme.colors.primary.backgroundStrongDisabled};
+      }
+    }
+
+    ${PREFIX}__day--range-end {
+      color: ${({ theme }) => theme.colors.primary.textStrong};
+      background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
+
+      &[aria-disabled='true'],
+      &:disabled {
+        color: ${({ theme }) => theme.colors.primary.textStrongDisabled};
+        background-color: ${({ theme }) => theme.colors.primary.backgroundStrongDisabled};
+      }
+    }
+
+    ${PREFIX}__day--keyboard-selected {
+      color: ${({ theme }) => theme.colors.primary.textStrong};
+      background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
+    }
+
+    ${PREFIX}__day:hover {
+      color: ${({ theme }) => theme.colors.neutral.textHover};
+      background-color: ${({ theme }) => theme.colors.neutral.backgroundHover};
+    }
+
+    ${PREFIX}__day--disabled {
+      color: ${({ theme }) => theme.colors.neutral.textDisabled};
+    }
+
+    ${PREFIX}__day--disabled:hover {
+      color: ${({ theme }) => theme.colors.neutral.textDisabled};
+      background-color: transparent;
+    }
+  }
+`;
+const StyledText = styled(Text)`
+  text-transform: capitalize;
+`;
+const DEFAULT_FORMAT = (value) => value instanceof Date ? value.toISOString() : value;
+const DateInput = ({
+  autoFocus = false,
+  disabled = false,
+  error,
+  format = DEFAULT_FORMAT,
+  label,
+  labelDescription,
+  locale,
+  maxDate,
+  minDate,
+  startDate,
+  endDate,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  required = false,
+  excludeDates,
+  value,
+  selectsRange,
+  className,
+  id,
+  success,
+  helper,
+  size = "large",
+  readOnly = false,
+  tooltip,
+  "data-testid": dataTestId
+}) => {
+  const uniqueId = useId();
+  const localId = id ?? uniqueId;
+  const ReactDatePicker = DatePicker.default ?? DatePicker;
+  const localeCode = (typeof locale === "string" ? locale : locale?.code) ?? "en-GB";
+  if (typeof locale === "object") {
+    registerLocale(localeCode, locale);
+  }
+  const valueStart = `${startDate !== void 0 && startDate !== null ? `${format(startDate)} -` : ""}`;
+  const valueEnd = `${endDate !== void 0 && endDate !== null ? format(endDate) : ""}`;
+  const valueFormat = selectsRange ? `${valueStart} ${valueEnd}` : format(value);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Global, { styles: style }),
+    /* @__PURE__ */ jsx(StyledWrapper, { children: /* @__PURE__ */ jsx(
+      ReactDatePicker,
+      {
+        required,
+        "data-testid": dataTestId,
+        className,
+        autoFocus,
+        fixedHeight: true,
+        name,
+        locale: localeCode,
+        onBlur,
+        onChange,
+        onFocus,
+        selected: value && !selectsRange ? new Date(value) : void 0,
+        selectsRange,
+        excludeDates,
+        customInput: /* @__PURE__ */ jsx(
+          TextInputV2,
+          {
+            error,
+            success,
+            helper,
+            id: localId,
+            label,
+            labelDescription,
+            value: valueFormat || "",
+            disabled,
+            size,
+            suffix: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "calendar-range",
+                color: "neutral",
+                disabled
+              }
+            ),
+            readOnly,
+            tooltip
+          }
+        ),
+        disabled,
+        calendarClassName: "calendar",
+        minDate,
+        maxDate,
+        startDate,
+        endDate,
+        renderCustomHeader: ({
+          date,
+          decreaseMonth,
+          increaseMonth,
+          prevMonthButtonDisabled,
+          nextMonthButtonDisabled
+        }) => /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 3,
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  icon: "arrow-left",
+                  sentiment: "neutral",
+                  variant: "ghost",
+                  onClick: decreaseMonth,
+                  disabled: prevMonthButtonDisabled
+                }
+              ),
+              /* @__PURE__ */ jsx(StyledText, { variant: "bodyStrong", as: "p", children: new Date(date).toLocaleString(localeCode, {
+                month: "long",
+                year: "numeric"
+              }) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  icon: "arrow-right",
+                  sentiment: "neutral",
+                  variant: "ghost",
+                  onClick: increaseMonth,
+                  disabled: nextMonthButtonDisabled
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  DateInput
+};

package/dist/components/Dialog/Context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { DialogSentiment } from './constants';
+export type DialogContextType = {
+    sentiment: DialogSentiment;
+};
+export declare const DialogContext: import("react").Context<DialogContextType | undefined>;
+export declare const useDialogContext: () => DialogContextType;

package/dist/components/Dialog/Context.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+const DialogContext = createContext(
+  void 0
+);
+const useDialogContext = () => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error("Dialog context can only be used inside a Dialog component");
+  }
+  return context;
+};
+export {
+  DialogContext,
+  useDialogContext
+};

package/dist/components/Dialog/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DIALOG_SENTIMENTS: ("primary" | "success" | "danger" | "warning")[];
+export type DialogSentiment = (typeof DIALOG_SENTIMENTS)[number];

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,87 @@
+import { type ComponentProps } from 'react';
+import { Modal } from '../Modal';
+import type { DialogContextType } from './Context';
+import type { DialogSentiment } from './constants';
+type DialogProps = Pick<ComponentProps<typeof Modal>, 'ariaLabel' | 'children' | 'className' | 'data-testid' | 'disclosure' | 'hideOnClickOutside' | 'hideOnEsc' | 'id' | 'isClosable' | 'onBeforeClose' | 'onClose' | 'open' | 'placement'> & {
+    title: string;
+    sentiment: DialogSentiment;
+};
+export declare const BaseDialog: ({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, }: DialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * The Dialog component is used to show content on top of an overlay that requires user interaction.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export declare const Dialog: (({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, }: DialogProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    Buttons: ({ secondaryButton, primaryButton, }: {
+        secondaryButton: import("react").ReactNode;
+        primaryButton: import("react").ReactNode;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Button: ({ children, onClick, disabled, tooltip, }: {
+        children: import("react").ReactNode;
+    } & Pick<({
+        type?: "button" | "reset" | "submit" | undefined;
+        autoFocus?: boolean | undefined;
+        variant?: "filled" | "outlined" | "ghost" | undefined;
+        role?: import("react").AriaRole | undefined;
+        size?: "large" | "small" | "xsmall" | "medium" | undefined;
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+        sentiment?: "primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info" | undefined;
+        disabled?: boolean | undefined;
+        iconPosition?: "left" | "right" | undefined;
+        iconVariant?: "filled" | "outlined" | undefined;
+        fullWidth?: boolean | undefined;
+        isLoading?: boolean | undefined;
+        'aria-label'?: string | undefined;
+        'aria-current'?: boolean | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-expanded'?: boolean | undefined;
+        'aria-haspopup'?: boolean | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+        tooltip?: string | undefined;
+        tabIndex?: number | undefined;
+        onMouseDown?: import("react").MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    } & ({
+        children: import("react").ReactNode;
+        icon?: "address" | "search" | "filter" | "view" | "id" | "alert" | "x" | "anchor" | "cancel" | "close" | "sort" | "download" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "check" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "open-in-new" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "south" | "switch_orga" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+        name?: string | undefined;
+        href?: undefined;
+        target?: undefined;
+        download?: undefined;
+    } | {
+        children?: undefined;
+        icon: "address" | "search" | "filter" | "view" | "id" | "alert" | "x" | "anchor" | "cancel" | "close" | "sort" | "download" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "check" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "open-in-new" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "south" | "switch_orga" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+        name?: string | undefined;
+        href?: undefined;
+        target?: undefined;
+        download?: undefined;
+    } | {
+        children: import("react").ReactNode;
+        icon?: "address" | "search" | "filter" | "view" | "id" | "alert" | "x" | "anchor" | "cancel" | "close" | "sort" | "download" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "check" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "open-in-new" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "south" | "switch_orga" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+        name?: undefined;
+        href: string;
+        target?: string | undefined;
+        download?: string | undefined;
+    } | {
+        children?: undefined;
+        icon: "address" | "search" | "filter" | "view" | "id" | "alert" | "x" | "anchor" | "cancel" | "close" | "sort" | "download" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "check" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "open-in-new" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "south" | "switch_orga" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+        name?: undefined;
+        href: string;
+        target?: string | undefined;
+        download?: string | undefined;
+    })) & import("react").RefAttributes<Element>, "tooltip" | "onClick" | "disabled">) => import("@emotion/react/jsx-runtime").JSX.Element;
+    CancelButton: ({ children, onClick, }: {
+        children: import("react").ReactNode;
+        onClick: import("react").MouseEventHandler<HTMLElement> | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Stack: ({ children }: {
+        children: import("react").ReactNode;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Text: ({ children }: {
+        children: import("react").ReactNode;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    useDialogContext: () => DialogContextType;
+};
+export {};

package/dist/components/Dialog/index.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useMemo } from "react";
+import { Bullet } from "../Bullet/index.js";
+import { Modal } from "../Modal/index.js";
+import { Text } from "../Text/index.js";
+import { useDialogContext, DialogContext } from "./Context.js";
+import { DialogButton } from "./subComponents/Button.js";
+import { DialogButtons } from "./subComponents/Buttons.js";
+import { DialogCancelButton } from "./subComponents/CancelButton.js";
+import { DialogStack } from "./subComponents/Stack.js";
+import { DialogText } from "./subComponents/Text.js";
+const StyledTextTitle = styled(Text)`
+  margin-top: ${({ theme }) => theme.space["2"]};
+  margin-bottom: ${({ theme }) => theme.space["1"]};
+`;
+const BaseDialog = ({
+  ariaLabel,
+  className,
+  children,
+  "data-testid": dataTestId,
+  disclosure,
+  hideOnClickOutside,
+  hideOnEsc,
+  id,
+  isClosable,
+  onBeforeClose,
+  onClose,
+  open,
+  placement,
+  sentiment,
+  title
+}) => {
+  const headerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Bullet,
+      {
+        sentiment,
+        icon: sentiment === "warning" || sentiment === "danger" ? "information-outline" : "check"
+      }
+    ),
+    /* @__PURE__ */ jsx(StyledTextTitle, { as: "h2", variant: "headingSmallStronger", children: title })
+  ] });
+  const contextValue = useMemo(
+    () => ({
+      sentiment
+    }),
+    [sentiment]
+  );
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      ariaLabel,
+      className,
+      "data-testid": dataTestId,
+      disclosure,
+      hideOnClickOutside,
+      hideOnEsc,
+      id,
+      isClosable,
+      onBeforeClose,
+      onClose,
+      open,
+      placement,
+      size: "xsmall",
+      children: typeof children === "function" ? (modalProps) => /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
+        headerContent,
+        children(modalProps)
+      ] }) : /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
+        headerContent,
+        children
+      ] })
+    }
+  );
+};
+const Dialog = Object.assign(BaseDialog, {
+  Buttons: DialogButtons,
+  Button: DialogButton,
+  CancelButton: DialogCancelButton,
+  Stack: DialogStack,
+  Text: DialogText,
+  useDialogContext
+});
+export {
+  BaseDialog,
+  Dialog
+};

package/dist/components/Dialog/subComponents/Button.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Button } from '../../Button';
+type DialogButtonProps = {
+    children: ReactNode;
+} & Pick<ComponentProps<typeof Button>, 'onClick' | 'disabled' | 'tooltip'>;
+export declare const DialogButton: ({ children, onClick, disabled, tooltip, }: DialogButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};