@hyphen/hyphen-components 2.18.0 → 2.19.0

package/dist/components/Modal/Modal.stories.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Modal } from './Modal';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Modal>;
 export default meta;
+type Story = StoryObj<typeof Modal>;
 export declare const BasicUsage: () => React.JSX.Element;
+export declare const OpenModal: Story;
 export declare const BodyAndFooter: () => React.JSX.Element;
 export declare const CloseButton: () => React.JSX.Element;
 export declare const WithoutHeader: () => React.JSX.Element;

package/dist/components/Modal/components/ModalFooter/ModalFooter.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
 import { BoxProps } from '../../../Box/Box';
-export type ModalFooterProps = Omit<BoxProps, 'as' | 'background' | 'borderColor' | 'borderWidth' | 'radius'>;
+export type ModalFooterProps = Omit<BoxProps, 'as' | 'radius'>;
 export declare const ModalFooter: FC<ModalFooterProps>;

package/dist/css/index.css

@@ -25,9 +25,9 @@
 .Toggle-module_thumb-size-sm__GeodE{height:calc(var(--size-spacing-2xl) - 4px);width:calc(var(--size-spacing-2xl) - 4px)}.Toggle-module_thumb-size-md__hZP-v{height:calc(var(--size-spacing-3xl) - 4px);width:calc(var(--size-spacing-3xl) - 4px)}.Toggle-module_thumb-size-lg__vTfiF{height:calc(var(--size-spacing-4xl) - 4px);width:calc(var(--size-spacing-4xl) - 4px)}.Toggle-module_track-size-sm__9H8xR{height:var(--size-spacing-2xl);min-width:2rem;width:2rem}.Toggle-module_track-size-md__7tLlO{height:var(--size-spacing-3xl);min-width:2.5rem;width:2.5rem}.Toggle-module_track-size-lg__9drMt{height:var(--size-spacing-4xl);min-width:3.5rem;width:3.5rem}@media (min-width:680px){.Toggle-module_thumb-size-sm-tablet__pbksf{height:calc(var(--size-spacing-2xl) - 4px);width:calc(var(--size-spacing-2xl) - 4px)}.Toggle-module_thumb-size-md-tablet__-TDJj{height:calc(var(--size-spacing-3xl) - 4px);width:calc(var(--size-spacing-3xl) - 4px)}.Toggle-module_thumb-size-lg-tablet__Q0isC{height:calc(var(--size-spacing-4xl) - 4px);width:calc(var(--size-spacing-4xl) - 4px)}.Toggle-module_track-size-sm-tablet__vpDN9{height:var(--size-spacing-2xl);min-width:2rem;width:2rem}.Toggle-module_track-size-md-tablet__jBAOT{height:var(--size-spacing-3xl);min-width:2.5rem;width:2.5rem}.Toggle-module_track-size-lg-tablet__MLRv2{height:var(--size-spacing-4xl);min-width:3.5rem;width:3.5rem}}@media (min-width:992px){.Toggle-module_thumb-size-sm-desktop__8a93z{height:calc(var(--size-spacing-2xl) - 4px);width:calc(var(--size-spacing-2xl) - 4px)}.Toggle-module_thumb-size-md-desktop__VaAlw{height:calc(var(--size-spacing-3xl) - 4px);width:calc(var(--size-spacing-3xl) - 4px)}.Toggle-module_thumb-size-lg-desktop__c9vh7{height:calc(var(--size-spacing-4xl) - 4px);width:calc(var(--size-spacing-4xl) - 4px)}.Toggle-module_track-size-sm-desktop__LqFN-{height:var(--size-spacing-2xl);min-width:2rem;width:2rem}.Toggle-module_track-size-md-desktop__3ClrR{height:var(--size-spacing-3xl);min-width:2.5rem;width:2.5rem}.Toggle-module_track-size-lg-desktop__ruWSF{height:var(--size-spacing-4xl);min-width:3.5rem;width:3.5rem}}@media (min-width:1280px){.Toggle-module_thumb-size-sm-hd__m5Lwq{height:calc(var(--size-spacing-2xl) - 4px);width:calc(var(--size-spacing-2xl) - 4px)}.Toggle-module_thumb-size-md-hd__4VcAY{height:calc(var(--size-spacing-3xl) - 4px);width:calc(var(--size-spacing-3xl) - 4px)}.Toggle-module_thumb-size-lg-hd__L-oay{height:calc(var(--size-spacing-4xl) - 4px);width:calc(var(--size-spacing-4xl) - 4px)}.Toggle-module_track-size-sm-hd__0m-1g{height:var(--size-spacing-2xl);min-width:2rem;width:2rem}.Toggle-module_track-size-md-hd__S19uj{height:var(--size-spacing-3xl);min-width:2.5rem;width:2.5rem}.Toggle-module_track-size-lg-hd__Go0mj{height:var(--size-spacing-4xl);min-width:3.5rem;width:3.5rem}}.Toggle-module_disabled__sxlCk{cursor:not-allowed;opacity:.4}.Toggle-module_toggle-thumb__6hl8Y{background-color:var(--color-base-white);border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,.45);display:block;transition:transform .25s ease}.Toggle-module_toggle-track__Jv1qD{background-color:var(--toggle-background-color,var(--color-base-grey-200));border-radius:9999em;cursor:pointer;display:block;padding:2px;transition:background-color .25s ease}.Toggle-module_toggle-track__Jv1qD.Toggle-module_error__f1tIX{background-color:var(--toggle-background-color-error,var(--color-base-red-500))}.Toggle-module_toggle-input__sNnss{position:absolute;clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD{background-color:var(--toggle-background-color-checked,var(--color-base-green-500))}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD.Toggle-module_error__f1tIX{background-color:var(--toggle-background-color-error,var(--color-base-red-500))}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-sm__GeodE{transform:translateX(.75rem)}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-md__hZP-v{transform:translateX(1rem)}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-lg__vTfiF{transform:translateX(1.5rem)}@media (min-width:680px){.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-sm-tablet__pbksf{transform:translateX(.5rem)}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-md-tablet__-TDJj{transform:translateX(1rem)}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-lg-tablet__Q0isC{transform:translateX(1.5rem)}}@media (min-width:992px){.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-sm-desktop__8a93z{transform:translateX(.5rem)}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-md-desktop__VaAlw{transform:translateX(1rem)}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-lg-desktop__c9vh7{transform:translateX(1.5rem)}}@media (min-width:1280px){.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-sm-hd__m5Lwq{transform:translateX(.5rem)}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-md-hd__4VcAY{transform:translateX(1rem)}.Toggle-module_toggle-input__sNnss:checked+.Toggle-module_toggle-track__Jv1qD .Toggle-module_toggle-thumb__6hl8Y.Toggle-module_thumb-size-lg-hd__L-oay{transform:translateX(1.5rem)}}.Toggle-module_toggle-input__sNnss:focus+.Toggle-module_toggle-track__Jv1qD{box-shadow:var(--form-control-box-shadow-focus,var(--INTERNAL_form-control-box-shadow-focus));outline:0}.Toggle-module_toggle-input__sNnss:focus-visible+.Toggle-module_toggle-track__Jv1qD{box-shadow:var(--form-control-box-shadow-focus,var(--INTERNAL_form-control-box-shadow-focus));outline:0}.Toggle-module_toggle-input__sNnss:focus:not(:focus-visible)+.Toggle-module_toggle-track__Jv1qD{box-shadow:none;outline:0}
 .Modal-module_modal-close__1YmMa{background:transparent;border:none;border-radius:var(--size-border-radius-sm);cursor:pointer;line-height:var(--size-line-height-base);padding:var(--size-spacing-xs)}.Modal-module_modal-close__1YmMa,.Modal-module_modal-close__1YmMa:hover{color:var(--color-font-secondary)}.Modal-module_modal-close__1YmMa:focus-visible{box-shadow:var(--modal-close-button-box-shadow-focus,0 0 0 4px var(--color-base-grey-200));outline:0}.Modal-module_modal-close__1YmMa:focus:not(:focus-visible){box-shadow:none;outline:0}.Modal-module_modal__yNG-7{align-items:flex-end;animation:fadeIn .2s;background:rgba(0,0,0,.33);background-color:rgba(0,0,0,.6);bottom:0;display:flex;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:var(--size-z-index-overlay)}.Modal-module_modal__yNG-7 .Modal-module_modal-content__GMtBm{animation:slideInUp .3s;background-color:var(--color-background-primary);border-radius:var(--size-border-radius-md) var(--size-border-radius-md) 0 0;bottom:0;display:flex;flex-direction:column;grid-column:1;grid-row:1;margin:0;padding:0;position:absolute;width:100%;z-index:var(--size-z-index-modal)}@media (min-width:680px){.Modal-module_modal__yNG-7 .Modal-module_modal-content__GMtBm{animation:fadeInUp .2s ease-out;border-radius:var(--size-border-radius-md);box-shadow:var(--modal-box-shadow,var(--size-box-shadow-md));grid-column:2;grid-row:2;margin:auto;max-height:calc(100vh - 80px);min-height:unset;outline:none;position:static;width:70vw}}@media (min-width:992px){.Modal-module_modal__yNG-7 .Modal-module_modal-content__GMtBm{width:50vw}}.fullscreen .Modal-module_modal-content__GMtBm{border-radius:0;bottom:env(safe-area-inset-bottom,0);left:env(safe-area-inset-left,0);position:fixed;right:env(safe-area-inset-right,0);top:env(safe-area-inset-top,0)}@media (min-width:680px){.fullscreen{align-items:center;display:grid;grid-template-columns:var(--size-spacing-2xl) auto var(--size-spacing-2xl);grid-template-rows:minmax(var(--size-spacing-2xl),1fr) auto minmax(var(--size-spacing-2xl),1fr);overflow:hidden}.fullscreen .Modal-module_modal-content__GMtBm{animation:fadeInUp .2s ease-out;border-radius:var(--size-border-radius-md);box-shadow:var(--size-box-shadow-md);grid-column:2;grid-row:2;margin:auto;max-height:calc(100vh - 80px);min-height:unset;outline:none;position:unset;width:70vw}}@media (min-width:680px) and (min-width:992px){.fullscreen .Modal-module_modal-content__GMtBm{width:50vw}}
 .RangeInput-module_slider__Z6D68{-moz-appearance:none;appearance:none;-webkit-appearance:none;background-color:var(--color-base-grey-700);border:none;border-radius:2.5rem;height:var(--size-spacing-sm);overflow:visible;padding:0!important}.RangeInput-module_slider__Z6D68::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--color-base-white);border:.125rem solid #0f172a;border-radius:var(--size-percentage-50);cursor:pointer;height:var(--size-spacing-2xl);width:var(--size-spacing-2xl)}.RangeInput-module_disabled__gyu72{cursor:not-allowed;opacity:.5}
-.Table-module_container__BsXT7{position:relative}.Table-module_container__BsXT7 .Table-module_loading-mask__qoRPG{align-items:center;background:hsla(0,0%,100%,.5);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T .Table-module_table__-ZPCW{background-color:var(--color-background-primary);border-collapse:separate;border-spacing:0;cursor:default;margin-top:1px;white-space:normal;width:100%}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T .Table-module_table__-ZPCW.Table-module_auto__1R8wm{table-layout:auto}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T .Table-module_table__-ZPCW.Table-module_fixed__T-EXg{table-layout:fixed}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T .Table-module_borderless__BbsqE{border:none}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T.Table-module_scrollable__Apjbs{display:block;-webkit-overflow-scrolling:touch}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T.Table-module_scrollable__Apjbs.Table-module_scrollable-x__mguJX{overflow-x:auto}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T.Table-module_scrollable__Apjbs.Table-module_scrollable-y__292qB{height:100%;overflow-y:auto}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T.Table-module_scrollable__Apjbs>.Table-module_table-bordered__wM9u-{border:0}.Table-module_container__BsXT7.Table-module_full-height__MlrSg{height:100%}
+.Table-module_container__BsXT7{position:relative}.Table-module_container__BsXT7 .Table-module_loading-mask__qoRPG{align-items:center;background:var(--color-background-primary);bottom:0;display:flex;justify-content:center;left:0;opacity:.5;position:absolute;right:0;top:0}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T .Table-module_table__-ZPCW{background-color:var(--color-background-primary);border-collapse:separate;border-spacing:0;cursor:default;margin-top:1px;white-space:normal;width:100%}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T .Table-module_table__-ZPCW.Table-module_auto__1R8wm{table-layout:auto}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T .Table-module_table__-ZPCW.Table-module_fixed__T-EXg{table-layout:fixed}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T .Table-module_borderless__BbsqE{border:none}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T.Table-module_scrollable__Apjbs{display:block;-webkit-overflow-scrolling:touch}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T.Table-module_scrollable__Apjbs.Table-module_scrollable-x__mguJX{overflow-x:auto}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T.Table-module_scrollable__Apjbs.Table-module_scrollable-y__292qB{height:100%;overflow-y:auto}.Table-module_container__BsXT7 .Table-module_scroll-container__5WV5T.Table-module_scrollable__Apjbs>.Table-module_table-bordered__wM9u-{border:0}.Table-module_container__BsXT7.Table-module_full-height__MlrSg{height:100%}
 .TableBody-module_table-body__Y5WbD.TableBody-module_hover__2CRgY tr:hover td,.TableBody-module_table-body__Y5WbD.TableBody-module_hover__2CRgY tr:hover th,.TableBody-module_table-body__Y5WbD.TableBody-module_striped__5MlEr tr:nth-of-type(odd) td,.TableBody-module_table-body__Y5WbD.TableBody-module_striped__5MlEr tr:nth-of-type(odd) th{background-color:var(--color-background-secondary)}
 .TableRow-module_table-row__-Y9FQ.TableRow-module_hoverable__53-l9{background-color:var(--table-row-hover-background)}
 .TableBodyCell-module_table-cell__pKl29{border-bottom-style:solid;border-color:var(--color-border-default);border-width:0 0 var(--size-border-width-sm) 0;color:var(--color-font-base);padding:var(--size-spacing-md) var(--size-spacing-lg)}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_borderless__qwKQA{border-width:0}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_compact__zfdBf{padding:var(--size-spacing-sm) var(--size-spacing-md)}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_truncated__4YtPF{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_sticky-column-left__tKIGW{background-color:var(--color-background-primary);left:0}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_sticky-column-right__680hS{background-color:var(--color-background-primary);right:0}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_sticky-column__QpEbV{background-color:var(--color-background-primary);box-shadow:5px 0 5px -2px rgba(0,0,0,.1),-5px 0 5px -2px rgba(0,0,0,.1);position:sticky;z-index:calc(var(--size-z-index-sticky) - 1)}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_align-right__j-VqN{text-align:right}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_align-center__saqzC{text-align:center}
-.TableHeaderCell-module_table-header-cell__aufSm{background-color:var(--color-background-primary);border-bottom-style:solid;border-color:var(--color-border-default);border-width:0 0 var(--size-border-width-sm) 0;color:var(--color-font-primary);font-size:var(--size-font-size-sm);font-weight:var(--size-font-weight-bold);letter-spacing:.05em;padding:var(--size-spacing-md) var(--size-spacing-lg);text-align:left;text-transform:uppercase;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sortable__qjrkY{cursor:pointer}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_borderless__uos2k{border-width:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_truncated__wmNfw{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_compact__ujtrZ{padding:var(--size-spacing-sm) var(--size-spacing-md)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-header__PEP9t{position:sticky;top:0;z-index:var(--size-z-index-sticky)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-left__t8qIz{left:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-right__6D8-X{right:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column__g9ybV{background-color:var(--color-background-primary);box-shadow:5px 0 5px -2px rgba(0,0,0,.1),-5px 0 5px -2px rgba(0,0,0,.1);position:sticky;z-index:calc(var(--size-z-index-sticky) + 1)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-right__Qw0YQ{text-align:right}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-center__1RmCS{text-align:center}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT{white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT .TableHeaderCell-module_sort-icon__SHgic{margin-left:var(--size-spacing-xs)}
+.TableHeaderCell-module_table-header-cell__aufSm{background-color:var(--color-background-primary);border-bottom-style:solid;border-color:var(--color-border-default);border-width:0 0 var(--size-border-width-sm) 0;color:var(--color-font-secondary);font-size:var(--size-font-size-sm);font-weight:var(--size-font-weight-bold);letter-spacing:.05em;padding:var(--size-spacing-md) var(--size-spacing-lg);text-align:left;text-transform:uppercase;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sortable__qjrkY{cursor:pointer}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_borderless__uos2k{border-width:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_truncated__wmNfw{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_compact__ujtrZ{padding:var(--size-spacing-sm) var(--size-spacing-md)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-header__PEP9t{position:sticky;top:0;z-index:var(--size-z-index-sticky)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-left__t8qIz{left:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-right__6D8-X{right:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column__g9ybV{background-color:var(--color-background-primary);box-shadow:5px 0 5px -2px rgba(0,0,0,.1),-5px 0 5px -2px rgba(0,0,0,.1);position:sticky;z-index:calc(var(--size-z-index-sticky) + 1)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-right__Qw0YQ{text-align:right}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-center__1RmCS{text-align:center}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT{white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT .TableHeaderCell-module_sort-icon__SHgic{margin-left:var(--size-spacing-xs)}
 .ToastNotification-module_toast-notification__2xiTW{background-color:var(--color-background-toast);border:1px solid var(--color-border-toast);border-radius:var(--size-border-radius-lg);box-shadow:var(--size-box-shadow-md);color:var(--color-font-toast);font-size:var(--size-font-size-sm);pointer-events:auto;will-change:transform}.ToastNotification-module_toast-error__4ArAY{background-color:var(--color-background-toast-error);border-color:var(--color-border-toast-error);color:var(--color-font-white)}.ToastNotification-module_toast-error__4ArAY .ToastNotification-module_toast-dismiss__xxmkb{color:var(--color-font-white)}.ToastNotification-module_toast-dismiss__xxmkb{color:var(--color-font-toast)}.ToastNotification-module_toast-notification-enter-top__ZZDCr{animation:enterTop .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-exit-top__fOIkZ{animation:exitTop .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-enter-bottom__So3w7{animation:enterBottom .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-exit-bottom__DDthi{animation:exitBottom .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-exit-left__Fh1hC{animation:exitLeft .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-exit-right__C1jQ9{animation:exitRight .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-fade-in__JlSGi{animation:fadeIn .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-fade-out__r6q4Q{animation:fadeOut .3s cubic-bezier(.06,.71,.55,1) forwards}

package/dist/hyphen-components.cjs.development.js

@@ -3240,31 +3240,25 @@ var FormikToggle = function FormikToggle(_ref) {
   }, props));
 };
 
-var _excluded$5 = ["children", "padding", "direction", "alignItems", "justifyContent", "background", "gap", "style"];
+var _excluded$5 = ["children", "padding", "direction", "alignItems", "justifyContent", "gap", "style"];
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 'xl' : _ref$padding,
+    padding = _ref.padding,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     _ref$alignItems = _ref.alignItems,
     alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
     _ref$justifyContent = _ref.justifyContent,
     justifyContent = _ref$justifyContent === void 0 ? 'flex-end' : _ref$justifyContent,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? 'secondary' : _ref$background,
     _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? 'sm' : _ref$gap,
+    gap = _ref$gap === void 0 ? 'md' : _ref$gap,
     style = _ref.style,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return React.createElement(Box, _extends({
-    background: background,
     padding: padding,
     direction: direction,
     alignItems: alignItems,
     justifyContent: justifyContent,
-    borderWidth: "sm 0 0 0",
-    borderColor: "default",
     gap: gap,
     style: _extends({
       flexShrink: 0
@@ -3272,8 +3266,6 @@ var ModalFooter = function ModalFooter(_ref) {
   }, restProps), children);
 };
 
-var styles$7 = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
-
 var ModalHeader = function ModalHeader(_ref) {
   var id = _ref.id,
     onDismiss = _ref.onDismiss,
@@ -3281,12 +3273,10 @@ var ModalHeader = function ModalHeader(_ref) {
     title = _ref$title === void 0 ? undefined : _ref$title;
   var justifyContentValue = title === undefined && onDismiss ? 'flex-end' : 'space-between';
   return React.createElement(Box, {
-    padding: "xl",
     direction: "row",
     alignItems: "center",
     justifyContent: justifyContentValue,
-    borderWidth: "0 0 sm 0",
-    borderColor: "default",
+    gap: "3xl",
     style: {
       flexShrink: 0
     }
@@ -3297,30 +3287,26 @@ var ModalHeader = function ModalHeader(_ref) {
       tablet: 'lg'
     },
     id: id
-  }, title), onDismiss && React.createElement("button", {
+  }, title), onDismiss && React.createElement(Button, {
     "aria-label": "close",
-    type: "button",
-    className: styles$7['modal-close'],
-    onClick: onDismiss
-  }, React.createElement(Icon, {
-    name: "remove"
-  })));
+    variant: "tertiary",
+    onClick: onDismiss,
+    iconPrefix: "remove",
+    size: "sm"
+  }));
 };
 
-var _excluded$4 = ["children", "flex", "padding", "overflow", "height"];
+var _excluded$4 = ["children", "flex", "overflow", "height"];
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children,
     _ref$flex = _ref.flex,
     flex = _ref$flex === void 0 ? 'auto' : _ref$flex,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 'xl' : _ref$padding,
     _ref$overflow = _ref.overflow,
     overflow = _ref$overflow === void 0 ? 'auto' : _ref$overflow,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '100' : _ref$height,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return React.createElement(Box, _extends({
-    padding: padding,
     flex: flex,
     overflow: overflow,
     height: height,
@@ -3330,6 +3316,8 @@ var ModalBody = function ModalBody(_ref) {
   }, restProps), children);
 };
 
+var styles$7 = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
+
 var _excluded$3 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow"];
 var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
@@ -3363,6 +3351,7 @@ var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fullscreen: fullScreenMobile
   });
   var contentClassnames = classNames(styles$7['modal-content'], className, maxWidthCss.classes, (_classNames = {}, _classNames["overflow-" + overflow] = overflow, _classNames));
+  if (!isOpen) return null;
   var parentElement = containerRef != null && containerRef.current ? containerRef.current : undefined;
   return React.createElement(FocusLock, {
     autoFocus: true,
@@ -3383,12 +3372,19 @@ var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ariaHideApp: false,
     parentSelector: parentElement ? function () {
       return parentElement;
-    } : undefined
+    } : undefined,
+    style: {
+      content: _extends({}, maxWidthCss.styles)
+    }
   }, restProps), React.createElement(Box, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    style: _extends({}, maxWidthCss.styles),
-    height: "100"
+    height: "100",
+    padding: {
+      base: '2xl',
+      tablet: '4xl'
+    },
+    gap: "3xl"
   }, children)))));
 });
 // Actual component is wrapped in an IIFE for the export