@genesislcap/rapid-design-system 14.127.2

package/dist/esm/flyout/flyout.styles.js

@@ -0,0 +1,51 @@
+import { foundationFlyoutStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidFlyoutStyles = css `
+  ${foundationFlyoutStyles}
+  div.flyout {
+    background-color: var(--neutral-layer-2);
+    border-color: var(--neutral-fill-hover);
+    color: var(--neutral-foreground-rest);
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  div.background {
+    padding: calc(var(--design-unit) * 4px) 0;
+  }
+
+  :host {
+    font-size: var(--type-ramp-base-font-size);
+    font-family: var(--body-font);
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  :host([position='left']) div.flyout {
+    border-right-style: solid;
+    border-right-width: calc(var(--stroke-width) * 1px);
+  }
+
+  :host([position='right']) div.flyout {
+    border-left-style: solid;
+    border-left-width: calc(var(--stroke-width) * 1px);
+  }
+
+  div.exit {
+    cursor: pointer;
+    width: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    height: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  div.header,
+  div.content,
+  div.footer {
+    padding: 0 0 calc(var(--design-unit) * 2px);
+  }
+
+  div.exit:hover {
+    background-color: var(--neutral-fill-hover);
+    border-radius: calc(var(--stroke-width) * 3px);
+  }
+`;

package/dist/esm/flyout/flyout.template.js

@@ -0,0 +1,5 @@
+import { getPrefixedFlyout } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+export const rapidFlyoutTemplate = html `
+  ${getPrefixedFlyout('rapid')}
+`;

package/dist/esm/flyout/index.js

@@ -0,0 +1,3 @@
+export * from './flyout';
+export * from './flyout.styles';
+export * from './flyout.template';

package/dist/esm/grid-layout/grid-layout.js

@@ -0,0 +1,10 @@
+import { foundationGridLayout } from '@genesislcap/foundation-ui';
+import { getExports } from '../utils';
+// eslint-disable-next-line prettier/prettier
+const { defaultConfig, shadowOptions, styles, template } = getExports(foundationGridLayout);
+export const rapidGridLayout = () => foundationGridLayout();
+export { GridLayout } from '@genesislcap/foundation-ui';
+export const defaultGridLayoutConfig = defaultConfig;
+export const rapidGridLayoutTemplate = template;
+export const rapidGridLayoutStyles = styles;
+export const rapidGridLayoutShadowOptions = shadowOptions;

package/dist/esm/grid-layout/index.js

@@ -0,0 +1 @@
+export * from './grid-layout';

package/dist/esm/grid-layout-item/grid-layout-item.js

@@ -0,0 +1,10 @@
+import { foundationGridLayoutItem } from '@genesislcap/foundation-ui';
+import { getExports } from '../utils';
+// eslint-disable-next-line prettier/prettier
+const { defaultConfig, shadowOptions, styles, template } = getExports(foundationGridLayoutItem);
+export const rapidGridLayoutItem = () => foundationGridLayoutItem();
+export { GridLayoutItem } from '@genesislcap/foundation-ui';
+export const defaultGridLayoutItemConfig = defaultConfig;
+export const rapidGridLayoutItemTemplate = template;
+export const rapidGridLayoutItemStyles = styles;
+export const rapidGridLayoutItemShadowOptions = shadowOptions;

package/dist/esm/grid-layout-item/index.js

@@ -0,0 +1 @@
+export * from './grid-layout-item';

package/dist/esm/horizontal-scroll/horizontal-scroll.js

@@ -0,0 +1,26 @@
+import { HorizontalScroll as FoundationHorizontalScroll, foundationHorizontalScrollShadowOptions, } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+import { rapidHorizontalScrollStyles as styles } from './horizontal-scroll.styles';
+import { rapidHorizontalScrollTemplate as template } from './horizontal-scroll.template';
+/**
+ * @tagname %%prefix%%-horizontal-scroll
+ */
+export class HorizontalScroll extends FoundationHorizontalScroll {
+}
+export const defaultHorizontalScrollConfig = {
+    nextFlipper: html `
+    <rapid-flipper
+      @click="${(x) => x.scrollToNext()}"
+      aria-hidden="${(x) => x.flippersHiddenFromAT}"
+    ></rapid-flipper>
+  `,
+    previousFlipper: html `
+    <rapid-flipper
+      @click="${(x) => x.scrollToPrevious()}"
+      direction="previous"
+      aria-hidden="${(x) => x.flippersHiddenFromAT}"
+    ></rapid-flipper>
+  `,
+};
+export const rapidHorizontalScroll = HorizontalScroll.compose(Object.assign({ baseName: 'horizontal-scroll', template,
+    styles, shadowOptions: foundationHorizontalScrollShadowOptions }, defaultHorizontalScrollConfig));

package/dist/esm/horizontal-scroll/horizontal-scroll.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit-html';
+import { repeat } from 'lit-html/directives/repeat.js';
+const meta = {
+    title: 'Horizontal Scroll',
+    component: 'rapid-horizontal-scroll',
+};
+export default meta;
+const horizontalScrollStyle = 'width: 400px;padding-left: 16px;';
+const cardStyle = 'padding: 10px;';
+const cards = Array.from({ length: 8 }, (_, i) => i + 1);
+export const Primary = {
+    render: () => html `
+    <rapid-horizontal-scroll style=${horizontalScrollStyle}>
+      ${repeat(cards, (item) => item, (item) => html `
+          <rapid-card style=${cardStyle}>
+            Card number ${item}
+            <rapid-button>A button</rapid-button>
+          </rapid-card>
+        `)}
+    </rapid-horizontal-scroll>
+  `,
+};

package/dist/esm/horizontal-scroll/horizontal-scroll.styles.js

@@ -0,0 +1,5 @@
+import { foundationHorizontalScrollStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidHorizontalScrollStyles = (context, definition) => css `
+  ${foundationHorizontalScrollStyles(context, definition)}
+`;

package/dist/esm/horizontal-scroll/horizontal-scroll.template.js

@@ -0,0 +1,2 @@
+import { foundationHorizontalScrollTemplate } from '@genesislcap/foundation-ui';
+export const rapidHorizontalScrollTemplate = (context, definition) => foundationHorizontalScrollTemplate(context, definition);

package/dist/esm/horizontal-scroll/index.js

@@ -0,0 +1,3 @@
+export * from './horizontal-scroll';
+export * from './horizontal-scroll.styles';
+export * from './horizontal-scroll.template';

package/dist/esm/icon/icon.js

@@ -0,0 +1,11 @@
+import { Icon as FoundationIcon, defaultIconConfig as foundationIconConfig, foundationIconTemplate as template, foundationIconShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidIconStyles as styles } from './icon.styles';
+/**
+ * @tagname %%prefix%%-icon
+ */
+export class Icon extends FoundationIcon {
+}
+export const defaultIconConfig = foundationIconConfig;
+export const rapidIconShadowOptions = foundationIconShadowOptions;
+export const rapidIcon = Icon.compose(Object.assign({ baseName: 'icon', template,
+    styles, shadowOptions: rapidIconShadowOptions }, defaultIconConfig));

package/dist/esm/icon/icon.stories.js

@@ -0,0 +1,67 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Icon',
+    component: 'rapid-icon',
+};
+export default meta;
+const wrapperStyle = 'display: flex; width: 50%; justify-content: space-between;color: white;';
+export const Default = {
+    argTypes: {
+        size: {
+            control: 'select',
+            options: [
+                '2xs',
+                'xs',
+                'sm',
+                'lg',
+                'xl',
+                '2xl',
+                '1x',
+                '2x',
+                '3x',
+                '4x',
+                '5x',
+                '6x',
+                '7x',
+                '8x',
+                '9x',
+                '10x',
+            ],
+        },
+        variant: {
+            control: 'select',
+            options: ['solid', 'regular', 'brand'],
+        },
+    },
+    args: {
+        name: 'glasses',
+        size: 'lg',
+        variant: 'solid',
+    },
+    render: ({ name, size, variant }) => html `
+    <rapid-icon
+      style="color: white;"
+      name="${name}"
+      size="${size}"
+      variant="${variant}"
+    ></rapid-icon>
+  `,
+};
+export const Multiple = {
+    render: () => html `
+    <div style="${wrapperStyle}">
+      <rapid-icon name="glasses" size="1x"></rapid-icon>
+      <rapid-icon name="amazon" size="2x" variant="brand"></rapid-icon>
+      <rapid-icon name="amazon-pay" size="3x" variant="brand"></rapid-icon>
+      <rapid-icon name="apple" size="4x" variant="brand"></rapid-icon>
+      <rapid-icon name="chrome" size="5x" variant="brand"></rapid-icon>
+      <rapid-icon name="ambulance" size="xs"></rapid-icon>
+      <rapid-icon name="angry" size="1x"></rapid-icon>
+      <rapid-icon variant="regular" name="angry" size="sm"></rapid-icon>
+      <rapid-icon name="address-book" size="lg"></rapid-icon>
+      <rapid-icon variant="regular" name="address-book" size="xl"></rapid-icon>
+      <rapid-icon name="bookmark" size="2xl;"></rapid-icon>
+      <rapid-icon variant="regular" name="bookmark" size="2xs"></rapid-icon>
+    </div>
+  `,
+};

package/dist/esm/icon/icon.styles.js

@@ -0,0 +1,5 @@
+import { foundationIconStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidIconStyles = (context, definition) => css `
+  ${foundationIconStyles(context, definition)}
+`;

package/dist/esm/icon/index.js

@@ -0,0 +1,2 @@
+export * from './icon';
+export * from './icon.styles';

package/dist/esm/index.js

@@ -0,0 +1,76 @@
+import { baseComponents } from './base-components';
+import { provideDesignSystem } from './provide-design-system';
+export { baseComponents, provideDesignSystem };
+export const registerRapidDesignSystem = () => provideDesignSystem().register(baseComponents);
+export * from './_common';
+export * from './_config';
+export * from './accordion';
+export * from './accordion-item';
+export * from './actions-menu';
+export * from './anchor';
+export * from './anchored-region';
+export * from './avatar';
+export * from './badge';
+export * from './banner';
+export * from './breadcrumb';
+export * from './breadcrumb-item';
+export * from './button';
+export * from './calendar';
+export * from './card';
+export * from './checkbox';
+export * from './combobox';
+export * from './connection-indicator';
+export * from './data-grid';
+export * from './data-grid-cell';
+export * from './data-grid-row';
+export * from './date-picker';
+export * from './dialog';
+export * from './disclosure';
+export * from './divider';
+export * from './dropdown-menu';
+export * from './error-boundary';
+export * from './file-upload';
+export * from './filter';
+export * from './filter-bar';
+export * from './flex-layout';
+export * from './flipper';
+export * from './flyout';
+export * from './grid-layout';
+export * from './grid-layout-item';
+export * from './horizontal-scroll';
+export * from './icon';
+export * from './listbox';
+export * from './listbox-option';
+export * from './menu';
+export * from './menu-item';
+export * from './modal';
+export * from './multiselect';
+export * from './number-field';
+export * from './progress';
+export * from './progress-ring';
+export * from './radio';
+export * from './radio-group';
+export * from './segmented-control';
+export * from './segmented-item';
+export * from './select';
+export * from './skeleton';
+export * from './slider';
+export * from './slider-label';
+export * from './snackbar';
+export * from './stepper';
+export * from './stepper-tab';
+export * from './stepper-tab-panel';
+export * from './switch';
+export * from './tab';
+export * from './tab-panel';
+export * from './tabs';
+export * from './text-area';
+export * from './text-field';
+export * from './toast';
+export * from './toolbar';
+export * from './tooltip';
+export * from './tree-item';
+export * from './tree-view';
+export * from './url-input';
+export * from './_common';
+export * from './_config';

package/dist/esm/listbox/index.js

@@ -0,0 +1,3 @@
+export * from './listbox.template';
+export * from './listbox.styles';
+export * from './listbox';

package/dist/esm/listbox/listbox.js

@@ -0,0 +1,10 @@
+import { defaultListboxConfig, foundationListboxShadowOptions, Listbox as FoundationListbox, } from '@genesislcap/foundation-ui';
+import { rapidListboxStyles as styles } from './listbox.styles';
+import { rapidListboxTemplate as template } from './listbox.template';
+/**
+ * @tagname %%prefix%%-listbox
+ */
+export class Listbox extends FoundationListbox {
+}
+export const rapidListbox = Listbox.compose(Object.assign({ baseName: 'listbox', template,
+    styles, shadowOptions: foundationListboxShadowOptions }, defaultListboxConfig));

package/dist/esm/listbox/listbox.stories.js

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Listbox',
+    component: 'rapid-listbox',
+};
+export default meta;
+export const Primary = {
+    render: () => html `
+    <rapid-listbox>
+      <rapid-option>Option 1</rapid-option>
+      <rapid-option>Option 2</rapid-option>
+      <rapid-option>Option 3</rapid-option>
+    </rapid-listbox>
+  `,
+};

package/dist/esm/listbox/listbox.styles.js

@@ -0,0 +1,15 @@
+import { foundationListboxStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidListboxStyles = (context, definition) => css `
+  ${foundationListboxStyles(context, definition)}
+
+  :host {
+    padding: 0;
+    max-width: 300px; /** if removed max-width will be fit-content */
+  }
+
+  ::slotted(*:last-child) {
+    border-bottom: none;
+  }
+`;
+// TODO: adjust width

package/dist/esm/listbox/listbox.template.js

@@ -0,0 +1,2 @@
+import { foundationListboxTemplate } from '@genesislcap/foundation-ui';
+export const rapidListboxTemplate = (context, definition) => foundationListboxTemplate(context, definition);

package/dist/esm/listbox-option/index.js

@@ -0,0 +1,3 @@
+export * from './listbox-option';
+export * from './listbox-option.styles';
+export * from './listbox-option.template';

package/dist/esm/listbox-option/listbox-option.js

@@ -0,0 +1,10 @@
+import { defaultListboxOptionConfig, foundationListboxOptionShadowOptions, ListboxOption as FoundationListboxOption, } from '@genesislcap/foundation-ui';
+import { rapidListboxOptionStyles as styles } from './listbox-option.styles';
+import { rapidListboxOptionTemplate as template } from './listbox-option.template';
+/**
+ * @tagname %%prefix%%-option
+ */
+export class ListboxOption extends FoundationListboxOption {
+}
+export const rapidListboxOption = ListboxOption.compose(Object.assign({ baseName: 'option', template,
+    styles, shadowOptions: foundationListboxOptionShadowOptions }, defaultListboxOptionConfig));

package/dist/esm/listbox-option/listbox-option.styles.js

@@ -0,0 +1,21 @@
+import { foundationListboxOptionStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidListboxOptionStyles = (context, definition) => css `
+  ${foundationListboxOptionStyles(context, definition)}
+  :host {
+    border-radius: 0;
+    padding: 0 calc(var(--design-unit) * 4px);
+    height: calc(
+      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px
+    );
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+  }
+
+  :host(.selected),
+  :host(:not([disabled])[aria-selected='true']:active),
+  :host(:not([disabled])[aria-selected='true']:hover) {
+    background: var(--neutral-layer-4);
+    color: var(--accent-fill-rest);
+  }
+`;
+// TODO: adjust margin on host

package/dist/esm/listbox-option/listbox-option.template.js

@@ -0,0 +1,2 @@
+import { foundationListboxOptionTemplate } from '@genesislcap/foundation-ui';
+export const rapidListboxOptionTemplate = (context, definition) => foundationListboxOptionTemplate(context, definition);

package/dist/esm/menu/index.js

@@ -0,0 +1,3 @@
+export * from './menu';
+export * from './menu.styles';
+export * from './menu.template';

package/dist/esm/menu/menu.js

@@ -0,0 +1,10 @@
+import { Menu as FoundationMenu, defaultMenuConfig, foundationMenuShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidMenuStyles as styles } from './menu.styles';
+import { rapidMenuTemplate as template } from './menu.template';
+/**
+ * @tagname %%prefix%%-menu
+ */
+export class Menu extends FoundationMenu {
+}
+export const rapidMenu = Menu.compose(Object.assign({ baseName: 'menu', template,
+    styles, shadowOptions: foundationMenuShadowOptions }, defaultMenuConfig));

package/dist/esm/menu/menu.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Menu',
+    component: 'rapid-menu',
+};
+export default meta;
+export const Primary = {
+    render: () => html `
+    <rapid-menu>
+      <rapid-menu-item>
+        Menu item 1
+        <rapid-menu slot="submenu">
+          <rapid-menu-item>Menu item 1</rapid-menu-item>
+          <rapid-menu-item>Menu item 2</rapid-menu-item>
+          <rapid-menu-item>Menu item 3</rapid-menu-item>
+        </rapid-menu>
+      </rapid-menu-item>
+      <rapid-menu-item>Menu item 2</rapid-menu-item>
+      <rapid-menu-item>Menu item 3</rapid-menu-item>
+    </rapid-menu>
+  `,
+};

package/dist/esm/menu/menu.styles.js

@@ -0,0 +1,22 @@
+import { foundationMenuStyles } from '@genesislcap/foundation-ui';
+import { neutralFillStealthHover } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidMenuStyles = (context, definition) => css `
+  ${foundationMenuStyles(context, definition)}
+  :host {
+    border: calc(var(--focus-stroke-width) * 1px) solid
+      color-mix(in srgb, ${neutralFillStealthHover}, transparent 15%);
+    padding: 0;
+  }
+`;
+/*
+    background: var(--neutral-fill-rest);
+    border: solid 1px #2E3339;
+    padding: calc(var(--design-unit) * 1px) 0;
+    the default value UX team wants
+    background: ${neutralFillStealthHover}
+    --neutral-fill-stealth-rest: #2e3339;
+    */
+// background: none;
+// background: var(--neutral-fill-rest);
+// background: var(--layer-fill-fixed-plus-1);

package/dist/esm/menu/menu.template.js

@@ -0,0 +1,2 @@
+import { foundationMenuTemplate } from '@genesislcap/foundation-ui';
+export const rapidMenuTemplate = (context, definition) => foundationMenuTemplate(context, definition);

package/dist/esm/menu-item/index.js

@@ -0,0 +1,3 @@
+export * from './menu-item';
+export * from './menu-item.styles';
+export * from './menu-item.template';

package/dist/esm/menu-item/menu-item.js

@@ -0,0 +1,11 @@
+import { MenuItem as FoundationMenuItem, defaultMenuItemConfig, foundationMenuItemShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidMenuItemStyles as styles } from './menu-item.styles';
+import { rapidMenuItemTemplate as template } from './menu-item.template';
+/**
+ * @tagname %%prefix%%-menu
+ */
+export const rapidMenuItemShadowOptions = foundationMenuItemShadowOptions;
+export class MenuItem extends FoundationMenuItem {
+}
+export const rapidMenuItem = MenuItem.compose(Object.assign({ baseName: 'menu-item', template,
+    styles, shadowOptions: rapidMenuItemShadowOptions }, defaultMenuItemConfig));

package/dist/esm/menu-item/menu-item.styles.js

@@ -0,0 +1,40 @@
+import { foundationMenuItemStyles } from '@genesislcap/foundation-ui';
+import { neutralFillStealthHover, neutralForegroundRest } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidMenuItemStyles = (context, definition) => css `
+  ${foundationMenuItemStyles(context, definition)}
+  :host {
+    margin: 0;
+
+    --control-corner-radius: 0;
+
+    background: var(--neutral-fill-stealth-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  :host(:hover) {
+    background: color-mix(in srgb, ${neutralFillStealthHover}, transparent 15%);
+    border: calc(var(--focus-stroke-width) * 1px) solid
+      color-mix(in srgb, ${neutralFillStealthHover}, transparent 15%);
+  }
+
+  :host(:focus) {
+    background: var(--neutral-fill-stealth-hover);
+  }
+
+  :host(.indent-0) {
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-stealth-hover);
+  }
+
+  /*
+    UX team wants
+    border: solid 1px #2E3339;
+    background: #2E3339
+    */
+
+  /* 
+      tokens being used by fast
+        background: ${neutralFillStealthHover}
+        color: ${neutralForegroundRest}
+    */
+`;

package/dist/esm/menu-item/menu-item.template.js

@@ -0,0 +1,2 @@
+import { foundationMenuItemTemplate } from '@genesislcap/foundation-ui';
+export const rapidMenuItemTemplate = (context, definition) => foundationMenuItemTemplate(context, definition);

package/dist/esm/modal/index.js

@@ -0,0 +1,3 @@
+export * from './modal';
+export * from './modal.styles';
+export { foundationModalTemplate as zeroModalTemplate } from '@genesislcap/foundation-ui';

package/dist/esm/modal/modal.js

@@ -0,0 +1,18 @@
+import { Modal as FoundationModal, foundationModalTemplate, foundationModalShadowOptions, defaultModalConfig as foundationConfig, } from '@genesislcap/foundation-ui';
+import { rapidModalStyles } from './modal.styles';
+export const defaultModalConfig = foundationConfig;
+export const rapidModalTemplate = foundationModalTemplate;
+export const rapidModalShadowOptions = foundationModalShadowOptions;
+/**
+ * @tagname %%prefix%%-modal
+ */
+export class Modal extends FoundationModal {
+}
+/**
+ * The Rapid Modal
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-modal\>
+ */
+export const rapidModal = Modal.compose(Object.assign({ baseName: 'modal', shadowOptions: rapidModalShadowOptions, styles: rapidModalStyles, template: rapidModalTemplate }, defaultModalConfig));

package/dist/esm/modal/modal.stories.js

@@ -0,0 +1,39 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Modal',
+    component: 'rapid-modal',
+};
+export default meta;
+const showModal = (e) => {
+    const modal = document.querySelector('rapid-modal');
+    modal.show();
+};
+const closeModal = (e) => {
+    const modal = document.querySelector('rapid-modal');
+    modal.close();
+};
+export const Primary = {
+    args: {
+        dialogMaxWidth: '557px',
+        modalTitle: 'Modal title',
+        modalInitialText: 'Some text in a Zero Dialog',
+        modalMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed
+      voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae
+      at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum
+      temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,
+      voluptas illo? Voluptatum, atque quidem?`,
+        modalCloseButtonText: 'Close this modal',
+    },
+    render: ({ dialogMaxWidth, modalTitle, modalInitialText, modalMainText, modalCloseButtonText, }) => html `
+    <rapid-button @click="${showModal}">Show Rapid Modal</rapid-button>
+    <rapid-modal style="--dialog-max-width: ${dialogMaxWidth};">
+      <h5 slot="top">${modalTitle}</h5>
+      <p>${modalInitialText}</p>
+      <p>${modalMainText}</p>
+      <rapid-divider slot="bottom"></rapid-divider>
+      <rapid-button appearance="primary" slot="bottom" @click="${closeModal}">
+        ${modalCloseButtonText}
+      </rapid-button>
+    </rapid-modal>
+  `,
+};

package/dist/esm/modal/modal.styles.js

@@ -0,0 +1,5 @@
+import { css } from '@microsoft/fast-element';
+import { rapidDialogStyles } from '../dialog/dialog.styles';
+export const rapidModalStyles = css `
+  ${rapidDialogStyles}
+`;

package/dist/esm/multiselect/index.js

@@ -0,0 +1,3 @@
+export * from './multiselect';
+export * from './multiselect.styles';
+export * from './multiselect.template';

package/dist/esm/multiselect/multiselect.js

@@ -0,0 +1,12 @@
+import { Multiselect as FoundationMultiselect, defaultMultiselectConfig as foundationMultiselectConfig, foundationMultiselectShadowOptions, } from '@genesislcap/foundation-ui';
+import { multiselectStyles as styles } from './multiselect.styles';
+import { multiselectTemplate as template } from './multiselect.template';
+/**
+ * @tagname %%prefix%%-multiselect
+ */
+export class Multiselect extends FoundationMultiselect {
+}
+export const defaultMultiselectConfig = foundationMultiselectConfig;
+export const rapidMultiselectShadowOptions = foundationMultiselectShadowOptions;
+export const rapidMultiselect = Multiselect.compose(Object.assign({ baseName: 'multiselect', template,
+    styles, shadowOptions: rapidMultiselectShadowOptions }, defaultMultiselectConfig));