@genesislcap/rapid-design-system 14.127.2

package/dist/esm/radio-group/radio-group.stories.js

@@ -0,0 +1,45 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Radio Group',
+    component: 'rapid-radio-group',
+};
+export default meta;
+const labelStyle = 'font-family: var(--body-font);color: var(--neutral-foreground-rest);';
+export const Default = {
+    args: {
+        orientation: 'horizontal',
+    },
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+        },
+    },
+    render: ({ orientation }) => html `
+    <rapid-radio-group orientation="${orientation}">
+      <label slot="label" style=${labelStyle}>Rapid Radio Group (label slot)</label>
+      <rapid-radio>Rapid label 1</rapid-radio>
+      <rapid-radio>Rapid label 2</rapid-radio>
+      <rapid-radio>Rapid label 3</rapid-radio>
+    </rapid-radio-group>
+  `,
+};
+export const Vertical = {
+    args: {
+        orientation: 'vertical',
+    },
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+        },
+    },
+    render: ({ orientation }) => html `
+    <rapid-radio-group orientation="${orientation}">
+      <label slot="label" style=${labelStyle}>Rapid Radio Group (label slot)</label>
+      <rapid-radio>Rapid label 1</rapid-radio>
+      <rapid-radio>Rapid label 2</rapid-radio>
+      <rapid-radio>Rapid label 3</rapid-radio>
+    </rapid-radio-group>
+  `,
+};

package/dist/esm/radio-group/radio-group.styles.js

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

package/dist/esm/radio-group/radio-group.template.js

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

package/dist/esm/router/index.js

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

package/dist/esm/router/router.js

@@ -0,0 +1,30 @@
+import { __awaiter, __decorate } from "tslib";
+import { customElement, DOM, FASTElement } from '@microsoft/fast-element';
+import { Router } from '@microsoft/fast-router';
+const routerProperty = '$router';
+/**
+ * @beta
+ * @privateRemarks
+ * Created to patch an issue and act as a placeholder to improve the api ahead of upgrading to the latest. Depending on
+ * how much we build on this, we may want to promote it to its own package.
+ */
+let RapidRouter = class RapidRouter extends Router.from(FASTElement) {
+    connectedCallback() {
+        super.connectedCallback();
+        /**
+         * Tactical patch for Safari 16
+         * {@link https://genesisglobal.atlassian.net/browse/PA-226}
+         *
+         * Explicitly set the config on the $router property when we connect to the DOM.
+         */
+        DOM.queueUpdate(() => __awaiter(this, void 0, void 0, function* () {
+            this[routerProperty].config = this.config;
+        }));
+    }
+};
+RapidRouter = __decorate([
+    customElement({
+        name: 'rapid-router',
+    })
+], RapidRouter);
+export { RapidRouter };

package/dist/esm/segmented-control/index.js

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

package/dist/esm/segmented-control/segmented-control.js

@@ -0,0 +1,20 @@
+import { SegmentedControl as FoundationSegmentedControl } from '@genesislcap/foundation-ui';
+import { rapidSegmentedControlStyles as styles } from './segmented-control.styles';
+import { rapidSegmentedControlTemplate as template } from './segmented-control.template';
+/**
+ * @tagname %%prefix%%-segmented-control
+ */
+export class SegmentedControl extends FoundationSegmentedControl {
+}
+// explicitly declaring for extensibility
+export const rapidSegmentedControlShadowOptions = undefined;
+export const defaultSegmentedControlConfig = {};
+/**
+ * The Rapid Segmented Control
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-segmented-control\>
+ */
+export const rapidSegmentedControl = SegmentedControl.compose(Object.assign({ baseName: 'segmented-control', template,
+    styles, shadowOptions: rapidSegmentedControlShadowOptions }, defaultSegmentedControlConfig));

package/dist/esm/segmented-control/segmented-control.stories.js

@@ -0,0 +1,49 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Segmented Control',
+    component: 'rapid-segmented-control',
+};
+export default meta;
+const wrapperStyle = 'display: flex; flex-direction: column;';
+export const Neutral = {
+    args: {
+        appearance: 'neutral',
+    },
+    argTypes: {
+        appearance: {
+            control: 'select',
+            options: ['primary', 'neutral'],
+        },
+    },
+    render: ({ appearance }) => html `
+    <div style="${wrapperStyle}">
+      <rapid-segmented-control appearance="${appearance}">
+        <label slot="label">Neutral Segment Control (label slot)</label>
+        <rapid-segmented-item>Segmented Item</rapid-segmented-item>
+        <rapid-segmented-item>Segmented Item</rapid-segmented-item>
+        <rapid-segmented-item>Segmented Item</rapid-segmented-item>
+      </rapid-segmented-control>
+    </div>
+  `,
+};
+export const Primary = {
+    args: {
+        appearance: 'primary',
+    },
+    argTypes: {
+        appearance: {
+            control: 'select',
+            options: ['primary', 'neutral'],
+        },
+    },
+    render: ({ appearance }) => html `
+    <div style="${wrapperStyle}">
+      <rapid-segmented-control appearance="${appearance}">
+        <label slot="label">Primary Segment Control (label slot)</label>
+        <rapid-segmented-item>Segmented Item</rapid-segmented-item>
+        <rapid-segmented-item>Segmented Item</rapid-segmented-item>
+        <rapid-segmented-item>Segmented Item</rapid-segmented-item>
+      </rapid-segmented-control>
+    </div>
+  `,
+};

package/dist/esm/segmented-control/segmented-control.styles.js

@@ -0,0 +1,39 @@
+import { foundationSegmentedControlStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidSegmentedControlStyles = (context, definition) => css `
+  ${foundationSegmentedControlStyles(context, definition)}
+  :host {
+    font-family: var(--body-font);
+  }
+
+  :host ::slotted(*) {
+    transition: color 0.4s ease 0s;
+  }
+
+  :host ::slotted(label) {
+    color: var(--neutral-foreground-rest);
+  }
+
+  :host ::slotted(rapid-segmented-item:first-of-type) {
+    border-radius: calc(var(--control-corner-radius) * 1px) 0 0
+      calc(var(--control-corner-radius) * 1px);
+    border-right-width: 0;
+  }
+
+  :host ::slotted(rapid-segmented-item:last-of-type) {
+    border-radius: 0 calc(var(--control-corner-radius) * 1px)
+      calc(var(--control-corner-radius) * 1px) 0;
+    border-left-width: 0;
+  }
+
+  :host ::slotted(*[aria-checked='true']) {
+    background: var(--neutral-fill-strong-rest);
+    box-shadow: 2px 1000px 1px rgb(0 0 0 / 50%) inset;
+  }
+
+  :host([appearance='primary']) ::slotted(*[aria-checked='true']) {
+    background: var(--accent-fill-rest);
+    border-color: transparent;
+    box-shadow: 2px 1000px 1px rgb(0 0 0 / 50%) inset;
+  }
+`;

package/dist/esm/segmented-control/segmented-control.template.js

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

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

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

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

@@ -0,0 +1,17 @@
+import { Radio as FoundationFoundationRadio } from '@genesislcap/foundation-ui';
+import { rapidSegmentedItemStyles as styles } from './segmented-item.styles';
+import { rapidSegmentedItemTemplate as template } from './segmented-item.template';
+export class SegmentedItem extends FoundationFoundationRadio {
+}
+// explicitly declaring for extensibility
+export const rapidSegmentedItemShadowOptions = undefined;
+export const defaultSegmentedItemConfig = {};
+/**
+ * The Rapid Segmented item
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-segmented-item\>
+ */
+export const rapidSegmentedItem = SegmentedItem.compose(Object.assign({ baseName: 'segmented-item', template,
+    styles, shadowOptions: rapidSegmentedItemShadowOptions }, defaultSegmentedItemConfig));

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

@@ -0,0 +1,15 @@
+import { foundationSegmentedItemStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidSegmentedItemStyles = (context, definition) => css `
+  ${foundationSegmentedItemStyles(context, definition)}
+  :host {
+    color: var(--neutral-fill-strong-rest);
+    font-size: var(--type-ramp-minus-2-font-size);
+    font-weight: 500;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+  }
+
+  :host([aria-checked='true']) {
+    color: color-mix(in srgb, white, transparent 10%);
+  }
+`;

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

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

package/dist/esm/select/index.js

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

package/dist/esm/select/select.js

@@ -0,0 +1,10 @@
+import { defaultSelectConfig, foundationSelectShadowOptions, Select as FoundationSelect, } from '@genesislcap/foundation-ui';
+import { rapidSelectStyles as styles } from './select.styles';
+import { rapidSelectTemplate as template } from './select.template';
+/**
+ * @tagname %%prefix%%-select
+ */
+export class Select extends FoundationSelect {
+}
+export const rapidSelect = Select.compose(Object.assign({ baseName: 'select', template,
+    styles, shadowOptions: foundationSelectShadowOptions }, defaultSelectConfig));

package/dist/esm/select/select.stories.js

@@ -0,0 +1,20 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Select',
+    component: 'rapid-select',
+};
+export default meta;
+export const Primary = {
+    args: {
+        disabled: false,
+    },
+    render: ({ disabled }) => html `
+    <div style="min-height: 300px;">
+      <rapid-select .disabled="${disabled}">
+        <rapid-option value="1">Rapid Option 1</rapid-option>
+        <rapid-option value="2">Rapid Option 2</rapid-option>
+        <rapid-option value="3">Rapid Option 3</rapid-option>
+      </rapid-select>
+    </div>
+  `,
+};

package/dist/esm/select/select.styles.js

@@ -0,0 +1,76 @@
+import { foundationSelectStyles } from '@genesislcap/foundation-ui';
+import { designUnit } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidSelectStyles = (context, definition) => css `
+  ${foundationSelectStyles(context, definition)}
+  :host {
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    background-color: color-mix(in srgb, var(--neutral-fill-input-rest), transparent 94%);
+    height: calc(
+      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px
+    );
+  }
+
+  :host(:focus-within:not([disabled])) {
+    background-color: var(--neutral-layer-4);
+    border: 1px solid var(--accent-fill-rest);
+  }
+
+  :host(:hover:not([disabled]):not(.open)) {
+    border-color: var(--neutral-stroke-hover);
+    background: none;
+  }
+
+  :host([open][position='below']) .listbox {
+    padding: 0;
+    margin-top: calc(${designUnit} * 1px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  .control {
+    padding: 0 calc((var(--design-unit) - 1) * 1px) 0 calc(var(--design-unit) * 2px);
+  }
+
+  :host(:not([disabled])) .control:active {
+    background: none;
+  }
+
+  .indicator {
+    width: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    height: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    background-color: var(--neutral-fill-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .select-indicator {
+    width: 1em;
+    height: 1em;
+    transition: all 0.35s;
+  }
+
+  .selected-value {
+    display: flex;
+    align-items: center;
+    height: calc(100% - (var(--design-unit) * 1px));
+    padding: 0;
+    margin: 0;
+  }
+
+  :host(:focus-within:not([disabled])) .indicator {
+    background-color: transparent;
+  }
+
+  :host([open]) .select-indicator {
+    transition: all 0.35s;
+    transform: rotate(180deg);
+  }
+
+  ::slotted([role='option']) {
+    margin: 0;
+  }
+`;

package/dist/esm/select/select.template.js

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

package/dist/esm/skeleton/index.js

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

package/dist/esm/skeleton/skeleton.js

@@ -0,0 +1,10 @@
+import { defaultSkeletonConfig, foundationSkeletonShadowOptions, Skeleton as FoundationSkeleton, } from '@genesislcap/foundation-ui';
+import { rapidSkeletonStyles as styles } from './skeleton.styles';
+import { rapidSkeletonTemplate as template } from './skeleton.template';
+/**
+ * @tagname %%prefix%%-skeleton
+ */
+export class Skeleton extends FoundationSkeleton {
+}
+export const rapidSkeleton = Skeleton.compose(Object.assign({ baseName: 'skeleton', template,
+    styles, shadowOptions: foundationSkeletonShadowOptions }, defaultSkeletonConfig));

package/dist/esm/skeleton/skeleton.stories.js

@@ -0,0 +1,30 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Skeleton',
+    component: 'rapid-skeleton',
+};
+export default meta;
+export const Primary = {
+    render: () => html `
+    <rapid-card style="padding:20px;">
+      <h3>Skeleton</h3>
+      <rapid-skeleton style="width: 50px; height: 50px;" shape="circle"></rapid-skeleton>
+      <rapid-skeleton
+        style="border-radius: 4px; margin-top: 10px; height: 10px;"
+        shape="rect"
+      ></rapid-skeleton>
+      <rapid-skeleton
+        style="border-radius: 4px; margin-top: 10px; height: 10px;"
+        shape="rect"
+      ></rapid-skeleton>
+      <rapid-skeleton
+        style="border-radius: 4px; margin-top: 10px; height: 10px;"
+        shape="rect"
+      ></rapid-skeleton>
+      <rapid-skeleton
+        style="border-radius: 4px;width: 75px;height: 30px;margin-top: 20px;margin-bottom: 10px;"
+        shape="rect"
+      ></rapid-skeleton>
+    </rapid-card>
+  `,
+};

package/dist/esm/skeleton/skeleton.styles.js

@@ -0,0 +1,10 @@
+import { foundationSkeletonStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidSkeletonStyles = (context, definition) => css `
+  ${foundationSkeletonStyles(context, definition)}
+  :host {
+    --skeleton-fill: var(
+      --neutral-fill-stealth-rest
+    ); /** value in ux doc rgba(242 242 242 / 0.1) */
+  }
+`;

package/dist/esm/skeleton/skeleton.template.js

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

package/dist/esm/slider/index.js

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

package/dist/esm/slider/slider.js

@@ -0,0 +1,10 @@
+import { defaultSliderConfig, foundationSliderShadowOptions, Slider as FoundationSlider, } from '@genesislcap/foundation-ui';
+import { rapidSliderStyles as styles } from './slider.styles';
+import { rapidSliderTemplate as template } from './slider.template';
+/**
+ * @tagname %%prefix%%-slider
+ */
+export class Slider extends FoundationSlider {
+}
+export const rapidSlider = Slider.compose(Object.assign({ baseName: 'slider', template,
+    styles, shadowOptions: foundationSliderShadowOptions }, defaultSliderConfig));

package/dist/esm/slider/slider.stories.js

@@ -0,0 +1,44 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Slider',
+    component: 'rapid-slider',
+};
+export default meta;
+export const Default = {
+    args: {
+        value: '70',
+        min: '0',
+        max: '100',
+        step: '10',
+        orientation: 'horizontal',
+    },
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+        },
+    },
+    render: ({ value, min, max, step, orientation }) => html `
+    <div style="min-height: 300px; width: 100%; color: white;">
+      <rapid-slider
+        min="${min}"
+        max="${max}"
+        step="${step}"
+        value="${value}"
+        orientation="${orientation}"
+      ></rapid-slider>
+    </div>
+  `,
+};
+export const WithLabels = {
+    render: () => html `
+    <div style="min-height: 300px; width: 100%; margin: 20px;">
+      <rapid-slider min="0" max="100" step="10" value="70">
+        <rapid-slider-label position="0">0%</rapid-slider-label>
+        <rapid-slider-label position="10">10%</rapid-slider-label>
+        <rapid-slider-label position="90">90%</rapid-slider-label>
+        <rapid-slider-label position="100">100%</rapid-slider-label>
+      </rapid-slider>
+    </div>
+  `,
+};

package/dist/esm/slider/slider.styles.js

@@ -0,0 +1,63 @@
+import { foundationSliderStyles } from '@genesislcap/foundation-ui';
+import { accentFillRest } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidSliderStyles = (context, definition) => css `
+  ${foundationSliderStyles(context, definition)}
+
+  .thumb-cursor {
+    background: var(--accent-fill-rest);
+    border-radius: calc(var(--control-corner-radius) * 2px);
+  }
+
+  .thumb-cursor:hover,
+  .thumb-cursor:focus,
+  .thumb-cursor:active {
+    background: var(--accent-fill-rest);
+    border-radius: transparent;
+  }
+
+  :host(:focus-visible) .thumb-cursor {
+    box-shadow: 0 0 0 0;
+  }
+
+  .thumb-cursor:hover::after,
+  .thumb-cursor:focus::after,
+  .thumb-cursor:active::after {
+    content: '';
+    height: calc(var(--thumb-size) * 2px);
+    width: calc(var(--thumb-size) * 2px);
+    border-radius: calc(var(--control-corner-radius) * 4px);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+  }
+
+  .thumb-cursor:hover::after {
+    background-color: color-mix(in srgb, ${accentFillRest}, transparent 90%);
+  }
+
+  .thumb-cursor:focus::after {
+    background-color: color-mix(in srgb, ${accentFillRest}, transparent 80%);
+  }
+
+  .thumb-cursor:active::after {
+    background-color: color-mix(in srgb, ${accentFillRest}, transparent 70%);
+  }
+
+  .track {
+    background-color: var(--neutral-fill-rest);
+  }
+
+  :host([orientation='horizontal']) .track .track-progress {
+    background-color: var(--neutral-stroke-rest);
+    height: calc((var(--track-width) + 2) * 1px) !important;
+  }
+
+  :host([orientation='vertical']) .track .track-progress {
+    background-color: var(--neutral-stroke-rest);
+    width: calc((var(--track-width) + 2) * 1px) !important;
+  }
+`;
+// apply classes to slider label on active state

package/dist/esm/slider/slider.template.js

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

package/dist/esm/slider-label/index.js

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

package/dist/esm/slider-label/slider-label.js

@@ -0,0 +1,10 @@
+import { defaultSliderLabelConfig, foundationSliderLabelShadowOptions, SliderLabel as FoundationSliderLabel, } from '@genesislcap/foundation-ui';
+import { rapidSliderLabelStyles as styles } from './slider-label.styles';
+import { rapidSliderLabelTemplate as template } from './slider-label.template';
+/**
+ * @tagname %%prefix%%-slider-label
+ */
+export class SliderLabel extends FoundationSliderLabel {
+}
+export const rapidSliderLabel = SliderLabel.compose(Object.assign({ baseName: 'slider-label', template,
+    styles, shadowOptions: foundationSliderLabelShadowOptions }, defaultSliderLabelConfig));

package/dist/esm/slider-label/slider-label.styles.js

@@ -0,0 +1,14 @@
+import { foundationSliderLabelStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidSliderLabelStyles = (context, definition) => css `
+  ${foundationSliderLabelStyles(context, definition)}
+  .label {
+    padding: calc((var(--design-unit) - 1) * 2px) calc(var(--design-unit) * 2px);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-layer-4);
+    background-color: var(--neutral-fill-strong-hover);
+    color: var(--neutral-layer-4);
+    text-align: center;
+    font-size: var(--type-ramp-minus-1-font-size, 12px);
+  }
+`;

package/dist/esm/slider-label/slider-label.template.js

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

package/dist/esm/snackbar/index.js

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

package/dist/esm/snackbar/snackbar.js

@@ -0,0 +1,22 @@
+import { foundationSnackbarShadowOptions, Snackbar as FoundationSnackbar, } from '@genesislcap/foundation-ui';
+import { rapidSnackbarStyles } from './snackbar.styles';
+import { rapidSnackbarTemplate } from './snackbar.template';
+export const rapidSnackbarShadowOptions = foundationSnackbarShadowOptions;
+/**
+ * @tagname %%prefix%%-snackbar
+ */
+export class Snackbar extends FoundationSnackbar {
+}
+/**
+ * The Rapid Snackbar
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-Snackbar\>
+ */
+export const rapidSnackbar = Snackbar.compose({
+    baseName: 'snackbar',
+    shadowOptions: rapidSnackbarShadowOptions,
+    styles: rapidSnackbarStyles,
+    template: rapidSnackbarTemplate,
+});