@propelinc/citrus-ui 1.0.4 → 1.3.0

package/dist/plugin.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'vue';
+declare const plugin: Plugin;
+export default plugin;

package/dist/services/animation.d.ts

@@ -0,0 +1,17 @@
+import { ElementAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
+export interface AnimationOptions {
+    /** The starting progress through the animation from 0 to 1 */
+    start?: number;
+    /** The duration of the animation in milliseconds */
+    duration?: number;
+    /** The easing function to use for the animation */
+    easing?: string;
+    /** The endimum distance to slide */
+    end?: number;
+}
+export declare function fadeIn({ start, duration, easing, }?: AnimationOptions): ElementAnimation;
+export declare function fadeOut({ start, duration, easing, }?: AnimationOptions): ElementAnimation;
+export declare function slideUp({ start, duration, easing, }?: AnimationOptions): ElementAnimation;
+export declare function slideDown({ start, duration, easing, }?: AnimationOptions): ElementAnimation;
+export declare function slideRight({ start, duration, easing, end, }?: AnimationOptions): ElementAnimation;
+export declare function slideLeft({ start, duration, easing, end, }?: AnimationOptions): ElementAnimation;

package/dist/services/directives/index.d.ts

@@ -0,0 +1,2 @@
+export { scrollIntoView } from './scroll-into-view';
+export { tapAnimation } from './tap-animation';

package/dist/services/directives/scroll-into-view.d.ts

@@ -0,0 +1,7 @@
+import { Directive } from 'vue';
+/**
+ * This directive scrolls the element into view when the input inside it is focused.
+ *
+ * It also listens for viewport size changes, so it can scroll again if the keyboard pops up.
+ */
+export declare const scrollIntoView: Directive;

package/dist/services/directives/tap-animation.d.ts

@@ -0,0 +1,6 @@
+import { Directive } from 'vue';
+interface TapAnimationValue {
+    bounceAmount?: number;
+}
+export declare const tapAnimation: Directive<HTMLElement, TapAnimationValue>;
+export {};

package/dist/services/id.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Generates unique IDs for components. Useful for linking labels to inputs.
+ */
+export declare class ID {
+    private counters;
+    /**
+     * Generates a unique ID for a component.
+     *
+     * @example
+     * ```ts
+     * // From within a component
+     * id.getID(this.$options.name);
+     * ```
+     */
+    getID(componentName: string): string;
+    reset(): void;
+}
+/**
+ * @deprecated Use the `useId` composable instead.
+ */
+declare const _default: ID;
+export default _default;

package/dist/services/injections/accordions.d.ts

@@ -0,0 +1,3 @@
+import { InjectionKey, Ref } from 'vue';
+export declare const FLUID: InjectionKey<Ref<boolean>>;
+export declare const ON_TOGGLE: InjectionKey<() => void>;

package/dist/services/injections/animations.d.ts

@@ -0,0 +1,2 @@
+import { InjectionKey, Ref } from 'vue';
+export declare const ANIMATIONS_DISABLED: InjectionKey<Ref<boolean>>;

package/dist/services/injections/buttons.d.ts

@@ -0,0 +1,4 @@
+import { InjectionKey, Ref } from 'vue';
+export declare const BLOCK: InjectionKey<Ref<boolean>>;
+export declare const LARGE: InjectionKey<Ref<boolean | null>>;
+export declare const BOUNCE_AMOUNT: InjectionKey<number>;

package/dist/services/injections/forms.d.ts

@@ -0,0 +1,6 @@
+import { InjectionKey } from 'vue';
+import { ValidationState } from '../../types/CForm';
+export declare const VALIDATIONS: InjectionKey<{
+    register: (input: ValidationState) => void;
+    unregister: (id: string) => void;
+}>;

package/dist/services/injections/icon-buttons.d.ts

@@ -0,0 +1,3 @@
+import { InjectionKey, Ref } from 'vue';
+export declare const TERTIARY: InjectionKey<Ref<boolean>>;
+export declare const INHERIT_COLOR: InjectionKey<Ref<boolean>>;

package/dist/services/injections/pills.d.ts

@@ -0,0 +1,4 @@
+import { InjectionKey, Ref } from 'vue';
+export declare const SELECTED_VALUE: InjectionKey<Ref<string>>;
+export declare const TOGGLE_VALUE: InjectionKey<(value: string | undefined) => void>;
+export declare const ROLE: InjectionKey<Ref<string>>;

package/dist/services/injections/radio.d.ts

@@ -0,0 +1,10 @@
+import { InjectionKey, Ref } from 'vue';
+export interface RadioState {
+    value: unknown;
+    invalid: boolean;
+    name: string;
+    update: (value: unknown) => void;
+    register: (value: unknown) => void;
+    unregister: (value: unknown) => void;
+}
+export declare const RADIO_STATE: InjectionKey<Ref<RadioState>>;

package/dist/{styles/main.css → styles.css}

@@ -105,7 +105,7 @@ ul {
   a,
 a:active,
 a:hover {
-    text-decoration: none !important;
+    text-decoration: none;
   }
 }
 :root,
@@ -538,6 +538,42 @@ a:hover {
   box-shadow: var(--sl-shadow-large);
 }
 
+/** NOTE(ej): These styles address an issue with 'ghost' hover states caused
+* by Vuetify's default hover styles compatible with browser-based apps that
+* support hovering. If an additional component is reported displaying a 'ghost'
+* hover use this mixin in that component's scoped styles.
+* Original bug ticket: https://join-propel.atlassian.net/browse/EUFL-15
+*/
+@font-face {
+  font-family: "Polymath";
+  font-style: normal;
+  font-weight: 100 900;
+  src: url("src/assets/fonts/polymath.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Polymath";
+  font-style: italic;
+  font-weight: 100 900;
+  src: url("src/assets/fonts/polymath.woff2") format("woff2");
+}
+/** NOTE(ej): These styles address an issue with 'ghost' hover states caused
+* by Vuetify's default hover styles compatible with browser-based apps that
+* support hovering. If an additional component is reported displaying a 'ghost'
+* hover use this mixin in that component's scoped styles.
+* Original bug ticket: https://join-propel.atlassian.net/browse/EUFL-15
+*/
+@font-face {
+  font-family: "Grenette";
+  font-style: normal;
+  font-weight: 400;
+  src: url("src/assets/fonts/grenette-regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Grenette";
+  font-style: normal;
+  font-weight: 650;
+  src: url("src/assets/fonts/grenette-semibold.woff2") format("woff2");
+}
 @keyframes skeleton-loader-animation {
   0% {
     background-position: 150%;
@@ -3403,4 +3439,6 @@ strong {
 
 .rounded-xxl {
   border-radius: 24px;
-}
+}
+.c-accordion-item[data-v-0d90e6cc]::part(base){background:transparent;border:none}.c-accordion-item[data-v-0d90e6cc]::part(header){padding:16px}.c-accordion-item[data-v-0d90e6cc]::part(summary){font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;padding-right:16px}.c-accordion-item[data-v-0d90e6cc]::part(summary-icon){rotate:0;transition-duration:.2s}.c-accordion-item[open][data-v-0d90e6cc]::part(summary-icon){rotate:180deg}.c-accordion-item[data-v-0d90e6cc]::part(content){padding:0 16px 16px}.c-accordion-item+.c-accordion-item[data-v-0d90e6cc]{border-top:1px solid rgba(0,0,0,.1)}.c-accordion-item--fluid[data-v-0d90e6cc]::part(content){padding:0}.c-accordion-item__header[data-v-0d90e6cc]{width:100%}.c-accordion-item__content[data-v-0d90e6cc]{box-sizing:border-box}.fade-enter-active[data-v-b3f4d795],.fade-leave-active[data-v-b3f4d795]{transition:opacity .3s ease-out}.fade-enter[data-v-b3f4d795],.fade-leave-to[data-v-b3f4d795]{opacity:0}.c-loader[data-v-0a94cfd0]{display:inline-flex;font-size:var(--loader-size);height:1em;width:1em}.c-loader__svg[data-v-0a94cfd0]{flex:1 1 auto;height:100%;overflow:visible;width:100%}.c-loader__indicator[data-v-0a94cfd0],.c-loader__track[data-v-0a94cfd0]{cx:.5em;cy:.5em;fill:none;r:calc(.5em - var(--track-width) / 2);stroke-width:var(--track-width)}.c-loader__indicator[data-v-0a94cfd0]{animation:spin-0a94cfd0 2s linear infinite;stroke:var(--indicator-color);stroke-dasharray:150% 75%;stroke-linecap:round;transform-origin:50% 50%}.c-loader__track[data-v-0a94cfd0]{stroke:var(--track-color);transform-origin:0% 0%}@keyframes spin-0a94cfd0{0%{stroke-dasharray:.05em 3em;transform:rotate(0)}50%{stroke-dasharray:1.375em 1.375em;transform:rotate(450deg)}to{stroke-dasharray:.05em 3em;transform:rotate(1080deg)}}.c-app-bar[data-v-bc70ac40]{align-items:center;background-color:var(--c-app-bar-background-color);color:var(--c-app-bar-color);display:flex;gap:8px;height:42px;padding:0 8px}.c-app-bar--fixed[data-v-bc70ac40]{left:0;position:fixed;right:0;top:env(safe-area-inset-top);z-index:5}.c-app-bar--border[data-v-bc70ac40]{border-bottom:1px solid rgba(0,0,0,.1)}.c-app-bar__left[data-v-bc70ac40]{align-items:center;display:flex;flex:none;min-width:40px;justify-content:flex-start}.c-app-bar__right[data-v-bc70ac40]{align-items:center;display:flex;flex:none;min-width:40px;justify-content:flex-end}.c-app-bar__title[data-v-bc70ac40]{font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;flex:auto;overflow:hidden;text-align:center}.c-app-bar__loader[data-v-bc70ac40]{transform:translateY(3px)}.c-app-bar__title-content[data-v-bc70ac40]{font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-badge[data-v-dc4dde8c]{--height: 24px;font-size:12px;font-weight:700;letter-spacing:.5px;line-height:120%;text-transform:uppercase;background-color:var(--c-badge-background-color);border:none;border-radius:4px;color:var(--c-badge-text-color);display:inline-block;height:var(--height);line-height:var(--height);padding-inline:12px;white-space:nowrap}[data-v-8dcd3648] .c-button+.c-button{margin-top:8px}.c-close-button[data-v-9db7ba0f]{align-items:center;border-radius:50%;cursor:pointer;display:flex;font-size:16px;height:36px;justify-content:center;padding:8px;width:36px;background-color:#fff;border-color:#fff;color:#000}.c-close-button[data-v-9db7ba0f]:hover{background-color:#fff;border-color:#fff;color:#000}.c-close-button[data-v-9db7ba0f]:focus{outline:var(--sl-focus-ring-width) solid var(--sl-focus-ring-color);outline-offset:var(--sl-focus-ring-offset)}.c-bottom-sheet[data-v-adaf0929]{--size: auto;--header-spacing: 24px;--body-spacing: 0;--bottom-padding: max(env(safe-area-inset-bottom, 0px), 16px);--footer-spacing: 12px 24px var(--bottom-padding)}.c-bottom-sheet[data-v-adaf0929]::part(header-actions){padding:0}.c-bottom-sheet[data-v-adaf0929]::part(close-button){border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.c-bottom-sheet[data-v-adaf0929]::part(panel){background:var(--background-color-hex-code, #fff);border-radius:12px 12px 0 0;max-height:90%;overflow:visible;transform:var(--panel-transform, none)}.c-bottom-sheet[data-v-adaf0929]::part(panel):after{background:var(--background-color-hex-code, #fff);bottom:-100px;content:"";height:101px;left:0;position:absolute;right:0}.c-bottom-sheet[data-v-adaf0929]::part(body){border-radius:12px 12px 0 0;position:relative}.c-bottom-sheet[data-v-adaf0929]::part(title){font-family:var(--font-family-headline, Polymath, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:26px;font-weight:650;letter-spacing:-.5px;line-height:120%;padding-bottom:16px}.c-bottom-sheet--with-dismiss[data-v-adaf0929]::part(title){margin-right:28px}.c-bottom-sheet[data-v-adaf0929]::part(overlay){opacity:var(--overlay-opacity, 1)}.c-bottom-sheet__actions[data-v-adaf0929]{position:absolute;right:16px;top:16px}.c-bottom-sheet__body[data-v-adaf0929]{padding:0 24px var(--bottom-padding)}.c-bottom-sheet--with-footer .c-bottom-sheet__body[data-v-adaf0929]{padding-bottom:12px}.c-bottom-sheet--hide-title .c-bottom-sheet__body[data-v-adaf0929]{padding-top:16px}.c-bottom-sheet--hide-overlay[data-v-adaf0929]::part(overlay){display:none}.c-button[data-v-77b8314e]{-webkit-tap-highlight-color:transparent}.c-button[data-v-77b8314e]::part(base){border-width:1px;transition:background-color .2s ease-in-out}.c-button[data-v-77b8314e]::part(label){padding:0 16px}.c-button-size--medium[data-v-77b8314e]::part(base){--sl-input-height-medium: 40px}.c-button-size--large[data-v-77b8314e]::part(base){--sl-input-height-large: 48px}.c-button--has-prefix-icon[data-v-77b8314e]::part(base){padding-inline-start:16px}.c-button--has-prefix-icon[data-v-77b8314e]::part(label){padding-inline-start:8px}.c-button--has-suffix-icon[data-v-77b8314e]::part(base){padding-inline-end:16px}.c-button--has-suffix-icon[data-v-77b8314e]::part(label){padding-inline-end:8px}.c-button--block[data-v-77b8314e]{min-width:100%}.c-button-variant--primary[data-v-77b8314e]::part(base){background-color:#000;border-color:#000;color:#fff}.c-button-variant--primary[data-v-77b8314e]::part(base):hover{background-color:#000;border-color:#000;color:#fff}.c-button-variant--primary.c-button-level--danger[data-v-77b8314e]::part(base){background-color:#cd000c;border-color:#cd000c;color:#fff}.c-button-variant--primary.c-button-level--danger[data-v-77b8314e]::part(base):hover{background-color:#cd000c;border-color:#cd000c;color:#fff}.c-button-variant--secondary[data-v-77b8314e]::part(base){background-color:transparent;border-color:#000;color:#000}.c-button-variant--secondary[data-v-77b8314e]::part(base):hover{background-color:transparent;border-color:#000;color:#000}.c-button-variant--secondary.c-button-level--danger[data-v-77b8314e]::part(base){background-color:#fff;border-color:#cd000c;color:#cd000c}.c-button-variant--secondary.c-button-level--danger[data-v-77b8314e]::part(base):hover{background-color:#fff;border-color:#cd000c;color:#cd000c}.c-button-variant--tertiary[data-v-77b8314e]::part(base){background-color:transparent;border-color:transparent;color:#000}.c-button-variant--tertiary[data-v-77b8314e]::part(base):hover{background-color:transparent;border-color:transparent;color:#000}.c-button-variant--tertiary.c-button-level--danger[data-v-77b8314e]::part(base){background-color:transparent;border-color:transparent;color:#cd000c}.c-button-variant--tertiary.c-button-level--danger[data-v-77b8314e]::part(base):hover{background-color:transparent;border-color:transparent;color:#cd000c}:not(.c-button-level--danger).c-button-variant--primary[disabled][data-v-77b8314e]::part(base){background-color:#0000001a;border-color:#0000001a;color:#0000007a}:not(.c-button-level--danger).c-button-variant--secondary[disabled][data-v-77b8314e]::part(base){background-color:transparent;border-color:#0000004f;color:#0000004f}:not(.c-button-level--danger).c-button-variant--tertiary[disabled][data-v-77b8314e]::part(base){background-color:transparent;border-color:transparent;color:#0000004f}.c-card-header[data-v-58c36d8e]{font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;display:flex}.c-card-header__title[data-v-58c36d8e]{flex:1 1 auto;padding:16px 16px 8px}.c-card-header__append[data-v-58c36d8e]{align-items:center;display:flex;flex:none}.c-card-header__append .c-icon-button[data-v-58c36d8e],.c-card-header__append .c-badge[data-v-58c36d8e]{margin-right:8px}.c-card[data-v-6f25cf6e]{--background-color: #fff;--border-color: rgba(0, 0, 0, .1);--border-radius: 12px;--text-color: #000;background-color:var(--background-color);border-color:var(--border-color);border-radius:var(--border-radius);border-style:solid;border-width:1px;color:var(--text-color);display:block;max-width:100%;overflow:hidden}.c-card+.c-card[data-v-6f25cf6e]{margin-top:8px}.c-card--tile[data-v-6f25cf6e]{--border-radius: 0;border-left:none;border-right:none}.c-card--borderless[data-v-6f25cf6e]{--border-color: transparent}.c-card--link[data-v-6f25cf6e]{cursor:pointer}.c-card--stretch[data-v-6f25cf6e]{height:100%}.c-card-footer[data-v-8bb985e5],.c-card-section[data-v-a5ccfb80]{padding:0 16px 16px}.c-card-section[data-v-a5ccfb80]:first-child:not(.c-card-section--fluid){padding-top:16px}.c-card-section--fluid[data-v-a5ccfb80]{padding:0}.c-validation-message[data-v-83d75a24]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:140%;display:flex;justify-content:space-between;margin-bottom:8px}.c-validation-message--invalid[data-v-83d75a24]{color:#cd000c}.c-checkbox[data-v-df7b401d]{align-items:flex-start;cursor:pointer;display:flex;gap:8px;transition:border-color .2s ease;--padding: 12px}.c-checkbox--contained[data-v-df7b401d]{background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:var(--padding);width:100%}.c-checkbox--contained.c-checkbox--checked[data-v-df7b401d]{border-color:#000;border-width:1px}.c-checkbox--contained.c-checkbox--invalid[data-v-df7b401d]{border-color:#cd000c}.c-checkbox--invalid[data-v-df7b401d]{color:#cd000c}.c-checkbox__input[data-v-df7b401d]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.c-checkbox__control[data-v-df7b401d]{align-items:center;border:rgba(0,0,0,.31) solid 1px;border-radius:4px;color:#fff;display:flex;flex-shrink:0;height:22px;justify-content:center;width:22px}.c-checkbox--checked .c-checkbox__control[data-v-df7b401d]{background-color:#000;border-color:#000}.c-checkbox--invalid .c-checkbox__control[data-v-df7b401d]{border-color:#cd000c}.c-checkbox__input:focus-visible~.c-checkbox__control[data-v-df7b401d]{outline:var(--sl-focus-ring);outline-offset:var(--sl-focus-ring-offset)}.c-checkbox__message[data-v-df7b401d]{margin-top:4px}.c-col[data-v-6dd23f0c]{flex-basis:0;flex-grow:1;max-width:100%}.c-col[data-v-6dd23f0c]:not(.c-col-auto){padding:12px;width:100%}.c-col-auto[data-v-6dd23f0c]{flex:0 0 auto;max-width:100%;width:auto}.c-col-1[data-v-6dd23f0c]{flex:0 0 calc(1 / 12 * 100%);max-width:calc(1 / 12 * 100%)}.c-col-2[data-v-6dd23f0c]{flex:0 0 calc(2 / 12 * 100%);max-width:calc(2 / 12 * 100%)}.c-col-3[data-v-6dd23f0c]{flex:0 0 25%;max-width:25%}.c-col-4[data-v-6dd23f0c]{flex:0 0 calc(4 / 12 * 100%);max-width:calc(4 / 12 * 100%)}.c-col-5[data-v-6dd23f0c]{flex:0 0 calc(5 / 12 * 100%);max-width:calc(5 / 12 * 100%)}.c-col-6[data-v-6dd23f0c]{flex:0 0 50%;max-width:50%}.c-col-7[data-v-6dd23f0c]{flex:0 0 calc(7 / 12 * 100%);max-width:calc(7 / 12 * 100%)}.c-col-8[data-v-6dd23f0c]{flex:0 0 calc(8 / 12 * 100%);max-width:calc(8 / 12 * 100%)}.c-col-9[data-v-6dd23f0c]{flex:0 0 75%;max-width:75%}.c-col-10[data-v-6dd23f0c]{flex:0 0 calc(10 / 12 * 100%);max-width:calc(10 / 12 * 100%)}.c-col-11[data-v-6dd23f0c]{flex:0 0 calc(11 / 12 * 100%);max-width:calc(11 / 12 * 100%)}.c-col-12[data-v-6dd23f0c]{flex:0 0 100%;max-width:100%}.c-divider[data-v-72e806c2]{border:solid rgba(0,0,0,.1);border-width:thin 0 0;display:block;flex:1 1 0px;height:0;max-height:0;max-width:100%;transition:inherit}.c-divider--vertical[data-v-72e806c2]{align-self:stretch;border-width:0 thin 0 0;display:inline-flex;height:inherit;margin:0 -1px;max-height:100%;max-width:0;min-height:100%;vertical-align:text-bottom;width:0}.c-icon-button[data-v-3fe2f247]::part(base){font-size:16px;line-height:0;padding:0;width:40px}.c-icon-button--inherit[data-v-3fe2f247]::part(base){color:inherit}.c-icon-button[data-v-3fe2f247]::part(label){align-items:center;display:flex;justify-content:center;padding:0}.c-icon-button-size--large[data-v-3fe2f247]::part(base){width:48px}.c-icon-button__icon--spin[data-v-3fe2f247]{animation:loader-spin-fast-slow 3.5s infinite cubic-bezier(.35,.16,.65,.84)}.c-text-field__label[data-v-13e975d5]{font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;display:inline-block;margin-bottom:8px;transition:color .2s ease}.c-text-field__container[data-v-13e975d5]{align-items:center;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;display:flex;transition:border-color .2s ease}.c-text-field--focused .c-text-field__container[data-v-13e975d5]{border-color:#000}.c-text-field--invalid .c-text-field__label[data-v-13e975d5]{color:#cd000c}.c-text-field--invalid .c-text-field__container[data-v-13e975d5]{border-color:#cd000c;color:#cd000c}.c-text-field--hide-label .c-text-field__label[data-v-13e975d5]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.c-text-field--disabled .c-text-field__label[data-v-13e975d5]{color:#0000004f}.c-text-field--disabled .c-text-field__container[data-v-13e975d5]{background-color:#0000000a;color:#0000004f}.c-text-field__input[data-v-13e975d5]{background-color:transparent;border:none;border-radius:12px;flex:1 1 0%;outline:none;width:100%}.c-text-field__input--has-prefix[data-v-13e975d5]{border-bottom-left-radius:0;border-top-left-radius:0}.c-text-field__input--has-suffix[data-v-13e975d5]{border-bottom-right-radius:0;border-top-right-radius:0}.c-text-field__suffix-btn[data-v-13e975d5]{margin-right:4px}.c-text-field__clear-btn[data-v-13e975d5]{background:none;border:none;cursor:pointer;font-size:1rem;margin-left:.5rem}.c-text-field--medium .c-text-field__input[data-v-13e975d5]{padding:12px 16px}.c-text-field--medium .c-text-field__input--clearable[data-v-13e975d5],.c-text-field--medium .c-text-field__input--hideable[data-v-13e975d5]{padding-right:0}.c-text-field--medium .c-text-field__input--has-suffix[data-v-13e975d5]{padding-right:8px}.c-text-field--large .c-text-field__input[data-v-13e975d5]{padding:24px}.c-text-field--large .c-text-field__input--clearable[data-v-13e975d5],.c-text-field--large .c-text-field__input--hideable[data-v-13e975d5]{padding-right:0}.c-text-field--large .c-text-field__input--has-suffix[data-v-13e975d5]{padding-right:8px}.c-text-field__prefix[data-v-13e975d5]{flex:0 0 auto;margin-left:16px}.c-text-field__suffix[data-v-13e975d5]{align-items:center;display:flex;flex:0 0 auto;gap:12px;margin-right:16px}.c-text-field__validation-message[data-v-13e975d5]{margin-top:4px}.c-text-field__message[data-v-13e975d5]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:140%;color:#000000b0;margin-bottom:16px}.c-select[data-v-14768c38]{display:flex;flex-direction:column}.c-select--disabled[data-v-14768c38]{color:#0000004f}.c-select__label[data-v-14768c38]{font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;margin-bottom:8px;transition:color .2s ease}.c-select__label--hidden[data-v-14768c38]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.c-select__input-container[data-v-14768c38]{align-items:center;display:flex;position:relative}.c-select__icon[data-v-14768c38]{pointer-events:none;position:absolute;right:16px}.c-select__input[data-v-14768c38]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;color:#0000007a;cursor:pointer;flex-grow:1;letter-spacing:.25px;max-width:100%;min-height:48px;outline:.5px solid transparent;padding:0 36px 0 16px;text-overflow:ellipsis;transition:border-color ease .2s,outline-color ease .2s}.c-select__input[data-v-14768c38]:focus{border-color:#000}.c-select__input--has-value[data-v-14768c38]{color:#000}.c-select__input--invalid[data-v-14768c38]{border-color:#000;outline-color:#000}.c-select__input[disabled][data-v-14768c38]{background-color:#0000000a}.c-select__message[data-v-14768c38]{margin-top:4px}.c-dob-select__label[data-v-16260a2c]{font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;display:inline-block;margin-bottom:4px}.c-dob-select__container[data-v-16260a2c]{display:flex;gap:12px}.c-dob-select__field[data-v-16260a2c]{flex:auto}.c-dob-select__messages[data-v-16260a2c]{margin-top:4px}.c-expand-transition[data-v-9917a865]{overflow:hidden;transition:height .3s ease}.c-expand-transition__content[data-v-9917a865]{overflow:hidden}.c-expand-transition--disabled[data-v-9917a865]{transition:none}.c-file-input[data-v-e5d85a35]{align-items:flex-start;display:flex;flex-direction:column;position:relative}.c-file-input:focus-within .c-file-input__prompt[data-v-e5d85a35]{outline:var(--sl-focus-ring);outline-offset:var(--sl-focus-ring-offset)}.c-file-input--disabled:hover .c-file-input__prompt[data-v-e5d85a35]{background-color:transparent;border-color:#0000004f;color:#0000004f}.c-file-input--disabled .c-file-input__label[data-v-e5d85a35]{color:#0000004f}.c-file-input--disabled .c-file-input__prompt[data-v-e5d85a35]{background-color:transparent;border-color:#0000004f;color:#0000004f}.c-file-input--disabled .c-file-input__input[data-v-e5d85a35]{cursor:not-allowed}.c-file-input__label[data-v-e5d85a35]{font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;margin-bottom:var(--sl-spacing-3x-small)}.c-file-input__prompt[data-v-e5d85a35]{background-color:transparent;border-color:#000;color:#000;align-items:center;border-radius:var(--sl-input-border-radius-medium);border-style:solid;border-width:1px;display:inline-flex;font-family:var(--sl-input-font-family);font-weight:var(--sl-font-weight-semibold);height:40px;justify-content:center;padding:0 20px;transition:background-color .2s ease-in-out}.c-file-input__prompt[data-v-e5d85a35]:hover{background-color:transparent;border-color:#000;color:#000}.c-file-input__input[data-v-e5d85a35]{cursor:pointer;height:100%;top:0;right:0;bottom:0;left:0;opacity:0;position:absolute;width:100%}.c-file-input__files[data-v-e5d85a35]{display:flex;flex-direction:column;gap:var(--sl-spacing-3x-small);margin-top:var(--sl-spacing-2x-small)}.c-file-input__file[data-v-e5d85a35]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:140%;word-break:break-word}.c-fixed-page-footer[data-v-ecb09be1]{bottom:0;left:0;position:fixed;right:0;z-index:1}.c-fixed-page-footer[data-v-ecb09be1]:before{background:linear-gradient(to bottom,rgba(255,255,255,0) 0,var(--fixed-page-footer-color, white) 32px);content:"";top:-32px;right:0;bottom:0;left:0;pointer-events:none;position:absolute;z-index:-1}.c-fixed-page-footer__content[data-v-ecb09be1]{padding:0 16px max(env(safe-area-inset-bottom,0),8px)}.c-label[data-v-4d7e42d8]{align-items:center;background-color:#0000000a;border-radius:4px;color:#000000b0;display:inline-flex;font-size:14px;font-weight:650;gap:4px;height:24px;margin-bottom:6px;padding:0 12px}.c-label[data-v-4d7e42d8]:not(:last-child){margin-right:8px}.c-list-item-content[data-v-1855e2e2]{flex:1 1 auto;min-width:0}.c-list-item-content__title[data-v-1855e2e2]{font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;align-items:center;display:flex}.c-list-item-content__title+.c-list-item-content__label[data-v-1855e2e2]{margin-top:2px}.c-squared-icon[data-v-f322d32b]{align-items:center;border-radius:8px;color:#000;display:flex;font-size:16px;height:40px;justify-content:center;position:relative;width:40px}.c-squared-icon--white-icon[data-v-f322d32b]{color:#fff}.c-squared-icon--large[data-v-f322d32b]{border-radius:12px;font-size:20px;height:56px;width:56px}.c-list-item-icon[data-v-a2993619]{flex:none}.c-list-item[data-v-c3185322]{background:transparent;color:#000;min-height:64px;outline:none;text-align:left;text-decoration:none}.c-list-item+.c-list-item[data-v-c3185322]{border-top:1px solid rgba(0,0,0,.1)}.c-list-item[data-v-c3185322]:focus-visible{outline:var(--sl-focus-ring);outline-offset:var(--sl-focus-ring-offset)}.c-list-item--is-tappable[data-v-c3185322]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer}.c-list-item__append__action-icon[data-v-c3185322]{color:#000000b0;font-size:16px}.c-menu[data-v-d8ec7807]{--sl-panel-border-width: $border-width}.menu-item[data-v-6fd3ba36]::part(base){font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;--sl-spacing-x-small: 12px;align-items:center;background-color:#fff;color:#000;cursor:initial;padding:12px 16px}.menu-item.selectable[data-v-6fd3ba36]::part(base):hover{background-color:var(--sl-color-neutral-100);color:var(--sl-color-neutral-1000);cursor:pointer}.menu-item[data-v-6fd3ba36]::part(checked-icon){display:none}.menu-item[data-v-6fd3ba36]::part(submenu-icon){display:none}.menu-item .checkbox[data-v-6fd3ba36]{pointer-events:none}.menu-item .check-icon[data-v-6fd3ba36]{width:14px}.menu-label[data-v-53bb607d]::part(base){font-size:12px;font-weight:700;letter-spacing:.5px;line-height:120%;text-transform:uppercase;padding:0}.c-modal[data-v-aec1f72d]::part(body){padding:24px 24px 16px}.c-modal[data-v-aec1f72d] .c-card-section{padding:0!important}.c-modal[data-v-aec1f72d] .c-card-footer{padding:24px 0 0}.c-modal[data-v-aec1f72d] .c-expand-transition--disabled .c-expand-transition__content{height:100%}.c-modal__title[data-v-aec1f72d]{font-family:var(--font-family-headline, Polymath, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:26px;font-weight:650;letter-spacing:-.5px;line-height:120%;padding:0 0 8px}.c-modal__dismiss[data-v-aec1f72d]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.c-modal__body[data-v-aec1f72d]{display:flex;flex-direction:column;height:100%}.c-modal__content[data-v-aec1f72d]{display:flex;flex:auto;flex-direction:column;max-height:100%}.c-modal__footer[data-v-aec1f72d]{flex:none;padding:24px 0 0}.c-modal__loading[data-v-aec1f72d]{padding:32px 0 24px;text-align:center}.c-modal__loading__loader[data-v-aec1f72d]{line-height:1;margin-bottom:8px}.c-modal--fullscreen[data-v-aec1f72d]::part(panel){border-radius:0;height:100%;max-height:none;max-width:none;width:100%}.c-modal--fullscreen[data-v-aec1f72d]::part(body){padding:calc(env(safe-area-inset-top,0) + 12px) 16px max(env(safe-area-inset-bottom,0),12px)}.c-modal--fullscreen .c-modal__wrapper[data-v-aec1f72d]{height:100%}.c-notification[data-v-9c0ebc16]{background-color:#e0edff;border-radius:12px;padding:16px;position:relative}.c-notification--success[data-v-9c0ebc16]{background-color:#dcf2cb}.c-notification--alert[data-v-9c0ebc16]{background-color:#ffe5dd}.c-notification--warning[data-v-9c0ebc16]{background-color:#fff0ba}.c-notification__close-button[data-v-9c0ebc16]{float:right;font-size:14px;margin-right:-8px;margin-top:-8px}.c-notification__title[data-v-9c0ebc16]{align-items:center;display:flex;margin-bottom:8px}.c-notification__title-icon[data-v-9c0ebc16]{margin-right:8px}.c-notification__title-text[data-v-9c0ebc16]{flex:1}.c-notification__button[data-v-9c0ebc16]{margin-top:12px}.c-pill[data-v-43172803]{background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;color:#000;display:inline-block;font-family:Polymath;height:40px;padding-inline:12px}.c-pill--active[data-v-43172803]{background-color:#000;border-color:#000;color:#fff}.c-pill-body[data-v-43172803]{align-items:center;display:flex;gap:8px;height:100%;line-height:1;white-space:nowrap}.c-pill-icon[data-v-43172803]{width:16px}.c-pill-group[data-v-370f74c6]{overflow:scroll hidden;padding:0 16px}.c-pill-group__track[data-v-370f74c6]{border:none;display:block;display:flex;flex-wrap:nowrap;gap:8px}.c-popup[data-v-fcdb504f]::part(popup){z-index:1}.anchor[data-v-fcdb504f]{height:-moz-fit-content;height:fit-content}.c-progress-linear[data-v-46381206]{--height: 4px;--indicator-color: #000;--track-color: rgba(0, 0, 0, .1)}.c-progress-linear[data-v-46381206]::part(base){border-radius:0}.c-progress-linear--rounded[data-v-46381206]::part(base){border-radius:2px}.c-progress-ring[data-v-b9b9c802]{align-items:center;display:inline-flex;flex-shrink:0;font-size:var(--size);height:1em;justify-content:center;position:relative;width:1em}.c-progress-ring__label[data-v-b9b9c802]{color:var(--indicator-color);font-size:14px;font-weight:700}.c-progress-ring__svg[data-v-b9b9c802]{height:100%;position:absolute;width:100%}.c-progress-ring__indicator[data-v-b9b9c802],.c-progress-ring__track[data-v-b9b9c802]{cx:.5em;cy:.5em;fill:none;r:calc(.5em - var(--track-width) / 2);stroke-width:var(--track-width)}.c-progress-ring__indicator[data-v-b9b9c802]{stroke:var(--indicator-color);stroke-dasharray:var(--indicator-length) 100;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .2s}.c-progress-ring__track[data-v-b9b9c802]{stroke:var(--track-color)}.c-radio[data-v-a18ed533]{align-items:center;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;cursor:pointer;display:flex;gap:12px;padding:12px;transition:border-color .2s ease;width:100%}.c-radio__input[data-v-a18ed533]{accent-color:#000;background-color:#000;border:rgba(0,0,0,.31) solid 1px;border-color:#000;margin-top:1px;transform:scale(1.5)}.c-radio__label[data-v-a18ed533]{padding:0 12px;width:100%}.c-radio--checked[data-v-a18ed533]{border-color:#000}.c-radio--invalid[data-v-a18ed533]{border-color:#cd000c}.c-radio--invalid .c-radio__input[data-v-a18ed533]{accent-color:#cd000c;border-color:#cd000c}.c-radio-group[data-v-d68efbf0]{border:none;display:flex;flex-direction:row;gap:8px;width:100%}.c-radio-group.c-radio-group--column[data-v-d68efbf0]{flex-direction:column}.c-radio-group--row[data-v-d68efbf0]{align-items:center}.c-radio-group--row[data-v-d68efbf0] .c-radio{width:auto}.w-100[data-v-011ad982]{width:100%}.c-row[data-v-426af58c]{display:flex;flex:1 1 auto;flex-wrap:wrap;margin:0 -12px}.c-row--dense[data-v-426af58c]{margin:0 -4px}.c-row--no-gutters[data-v-426af58c]{margin:0}.c-safe-area[data-v-d4b412f9]{--full-height: 100vh;display:flex;flex-direction:column;height:calc(var(--full-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-width:100%;overflow:scroll}@supports (height: 100dvh){.c-safe-area[data-v-d4b412f9]{--full-height: 100dvh}}.c-section-header[data-v-f3be92b0]{align-items:center;display:flex;gap:12px;height:48px;justify-content:space-between}.c-section-header__title[data-v-f3be92b0]{font-family:var(--font-family-headline, Polymath, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:20px;font-weight:650;letter-spacing:-.25px;line-height:125%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}.c-card+.c-section-header[data-v-f3be92b0]{margin-top:16px}.c-skeleton[data-v-aecc010b]{display:flex;height:100%;min-height:1rem;position:relative;width:100%}.c-skeleton__indicator[data-v-aecc010b]{--color: rgba(0, 0, 0, .04);--sheen-color: rgba(0, 0, 0, .1);animation:sheen-aecc010b 8s ease-in-out infinite;background:linear-gradient(270deg,var(--sheen-color),var(--color),var(--color),var(--sheen-color));background-size:400% 100%;border-radius:12px;flex:1 1 auto}@keyframes sheen-aecc010b{0%{background-position:200% 0}to{background-position:-200% 0}}.c-skeleton-loader-circle[data-v-bb292787]{--size: 36px;border-radius:calc(var(--size) / 2);height:var(--size);overflow:hidden;width:var(--size)}.c-skeleton-loader-text[data-v-faff1792]{display:flex;flex-direction:column;width:100%}.c-skeleton-loader-text__line[data-v-faff1792]{font-size:16px;line-height:140%;align-items:center;display:flex;width:100%}.c-skeleton-loader-text__line .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:16px}.c-skeleton-loader-text__line[data-v-faff1792]:last-child{width:calc(100% - 32px)}.c-skeleton-loader-text__line--balance[data-v-faff1792]{font-size:26px;line-height:100%;max-width:120px}.c-skeleton-loader-text__line--balance .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:26px}.c-skeleton-loader-text__line--caption[data-v-faff1792]{font-size:14px;line-height:140%}.c-skeleton-loader-text__line--caption .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:14px}.c-skeleton-loader-text__line--eyebrow[data-v-faff1792]{font-size:12px;line-height:120%}.c-skeleton-loader-text__line--eyebrow .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:12px}.c-skeleton-loader-text__line--headline[data-v-faff1792]{font-size:20px;line-height:125%}.c-skeleton-loader-text__line--headline .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:20px}.c-skeleton-loader-text__line--large-headline[data-v-faff1792]{font-size:26px;line-height:120%}.c-skeleton-loader-text__line--large-headline .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:26px}.c-skeleton-loader-text__line--statement[data-v-faff1792]{font-size:16px;line-height:100%}.c-skeleton-loader-text__line--statement .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:16px}.c-skeleton-loader-text__line--subheadline[data-v-faff1792]{font-size:16px;line-height:140%}.c-skeleton-loader-text__line--subheadline .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:16px}.c-skeleton-loader-text__line--wallet-caption[data-v-faff1792]{font-size:13px;line-height:140%}.c-skeleton-loader-text__line--wallet-caption .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:13px}.c-skeleton-loader-text__line--x-large-headline[data-v-faff1792]{font-size:32px;line-height:120%}.c-skeleton-loader-text__line--x-large-headline .c-skeleton-loader-text__line__skeleton[data-v-faff1792]{height:32px}.slide-fade-enter-active[data-v-587b729f],.slide-fade-leave-active[data-v-587b729f]{transition:all .3s ease-out}.slide-fade-enter[data-v-587b729f],.slide-fade-enter-from[data-v-587b729f],.slide-fade-leave-to[data-v-587b729f]{opacity:0}.to-left .slide-fade-enter[data-v-587b729f],.to-left .slide-fade-enter-from[data-v-587b729f],.to-left .slide-fade-leave-to[data-v-587b729f]{transform:translate(calc(-1 * var(--slide-fade-amount)))}.to-right .slide-fade-enter[data-v-587b729f],.to-right .slide-fade-enter-from[data-v-587b729f],.to-right .slide-fade-leave-to[data-v-587b729f]{transform:translate(var(--slide-fade-amount))}.to-top .slide-fade-enter[data-v-587b729f],.to-top .slide-fade-enter-from[data-v-587b729f],.to-top .slide-fade-leave-to[data-v-587b729f]{transform:translateY(calc(-1 * var(--slide-fade-amount)))}.to-bottom .slide-fade-enter[data-v-587b729f],.to-bottom .slide-fade-enter-from[data-v-587b729f],.to-bottom .slide-fade-leave-to[data-v-587b729f]{transform:translateY(var(--slide-fade-amount))}.c-split-input[data-v-d07558f9]::part(input){font-family:var(--font-family-headline, Polymath, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:20px;font-weight:650;letter-spacing:-.25px;line-height:125%;letter-spacing:12px;line-height:1;text-align:center}.c-split-input[data-v-d07558f9]::part(input)::-moz-placeholder{font-family:var(--font-family-headline, Polymath, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:20px;font-weight:650;letter-spacing:-.25px;line-height:125%;letter-spacing:12px;line-height:1;text-align:center;font-weight:400}.c-split-input[data-v-d07558f9]::part(input)::placeholder{font-family:var(--font-family-headline, Polymath, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:20px;font-weight:650;letter-spacing:-.25px;line-height:125%;letter-spacing:12px;line-height:1;text-align:center;font-weight:400}.c-status-dot[data-v-3f2f25d9]{background-color:#cd000c;border-radius:9999px;display:inline-block;height:8px;width:8px}.c-status-dot--bordered[data-v-3f2f25d9]{box-shadow:0 0 0 1.5px #fff}.c-status-dot--count[data-v-3f2f25d9]{align-items:center;color:#fff;display:flex;font-size:.625rem;font-weight:700;height:1rem;justify-content:center;line-height:1;text-align:center;width:1rem}.c-switch[data-v-e6b0a9f0]{--width: 44px;--height: 24px;--thumb-size: 20px}.c-switch[data-v-e6b0a9f0]::part(control){border:none}.c-switch[data-v-e6b0a9f0]::part(thumb){align-items:center;border:none;display:flex;justify-content:center}.c-switch[data-v-e6b0a9f0]::part(thumb):after{border-radius:1px;content:"";height:8px;transition:background-color var(--sl-transition-fast) ease-in-out;width:2px}.c-switch[data-v-e6b0a9f0]::part(control){background-color:#0000007a}.c-switch[data-v-e6b0a9f0]::part(thumb){background-color:#fff}.c-switch[data-v-e6b0a9f0]::part(thumb):after{background-color:transparent}.c-switch--label-first[data-v-e6b0a9f0]::part(base){flex-direction:row-reverse;gap:12px;width:100%}.c-switch--label-first[data-v-e6b0a9f0]::part(label){flex:1;margin:0}.c-switch--checked[data-v-e6b0a9f0]::part(control){background-color:#3fa41c}.c-switch--checked[data-v-e6b0a9f0]::part(thumb){background-color:#fff}.c-switch--checked[data-v-e6b0a9f0]::part(thumb):after{background-color:#3fa41c}.c-switch--disabled[data-v-e6b0a9f0]::part(control){background-color:#0000004f}.c-switch--disabled[data-v-e6b0a9f0]::part(thumb){background-color:#0000001a}.c-switch--disabled[data-v-e6b0a9f0]::part(thumb):after{background-color:transparent}.c-switch--disabled.c-switch--checked[data-v-e6b0a9f0]::part(control){background-color:#0000004f}.c-switch--disabled.c-switch--checked[data-v-e6b0a9f0]::part(thumb){background-color:#0000001a}.c-switch--disabled.c-switch--checked[data-v-e6b0a9f0]::part(thumb):after{background-color:#0000004f}.c-switch__sr-label[data-v-e6b0a9f0]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.c-switch-list-item__switch[data-v-337edd4f]{width:100%}.c-switch-list-item__switch[data-v-337edd4f]::part(base){align-items:center;display:inline-flex;flex-direction:row-reverse;gap:12px;padding:0;width:100%}.c-switch-list-item__switch[data-v-337edd4f]::part(label){align-items:center;display:flex;flex:1;gap:12px;justify-content:space-between;margin:0}.c-text-area__label[data-v-6a001914]{font-size:16px;font-weight:650;letter-spacing:.25px;line-height:140%;display:inline-block;margin-bottom:4px;transition:color .2s ease}.c-text-area--invalid .c-text-area__label[data-v-6a001914]{color:#cd000c}.c-text-area--disabled .c-text-area__label[data-v-6a001914]{color:#0000004f}.c-text-area--hide-label .c-text-area__label[data-v-6a001914]{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.c-text-area__input[data-v-6a001914]{background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:16px;resize:vertical;transition:border-color .2s ease}.c-text-area__input[data-v-6a001914]:focus,.c-text-area__input[data-v-6a001914]:focus-within{border-color:#000;outline:none}.c-text-area--invalid .c-text-area__input[data-v-6a001914]{border-color:#cd000c;color:#cd000c;outline:none}.c-text-area__input[data-v-6a001914]:disabled{background-color:#0000000a;color:#0000004f}.c-text-area__message[data-v-6a001914]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:140%;color:#000000b0;margin-bottom:16px}.c-text-link[data-v-8ac57bbb]{color:#000;font-weight:650}.c-text-link--underline[data-v-8ac57bbb]{text-decoration:underline;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-underline-offset:3px}.c-third-party-logo[data-v-ccf3620c]{border-radius:8px;height:var(--size);isolation:isolate;-o-object-fit:contain;object-fit:contain;overflow:hidden;position:relative;width:var(--size)}.c-third-party-logo__img[data-v-ccf3620c]{display:block;height:100%;left:0;-o-object-fit:contain;object-fit:contain;position:absolute;top:0;width:100%;z-index:1}.opacity-0[data-v-ccf3620c]{opacity:0}.transition-opacity[data-v-ccf3620c]{transition:opacity .1s ease-in-out}.c-toast[data-v-2b78e8be]{margin:16px}.c-toast[data-v-2b78e8be]::part(base){background-color:#b2cffa;border:none;border-radius:12px;box-shadow:0 4px 20px #0000001f;color:#000;transform:var(--toast-base-transform)}.c-toast[data-v-2b78e8be]::part(message){font-size:16px;font-weight:400;letter-spacing:.25px;line-height:140%;align-items:center;display:flex;padding:16px 0 16px 16px}.c-toast[data-v-2b78e8be]::part(icon){padding-left:12px}.c-toast--error[data-v-2b78e8be]::part(base){background-color:#ffaaa5}.c-toast--success[data-v-2b78e8be]::part(base){background-color:#b8da96}.c-toast--warning[data-v-2b78e8be]::part(base){background-color:#fcde74}.c-toast__message[data-v-2b78e8be]{flex:auto}.c-toast__icon[data-v-2b78e8be]{color:#000;font-size:16px}
+

package/dist/theme/icons.d.ts

@@ -0,0 +1,36 @@
+import { DefineComponent } from 'vue';
+import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+import { IconDefinition } from '@fortawesome/pro-light-svg-icons';
+declare const Icons: {
+    readonly citrusCheckboxOn: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+    readonly citrusCheckboxOff: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+    readonly citrusRadioOn: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+    readonly citrusRadioOff: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+    readonly citrusClear: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+};
+export default Icons;

package/dist/types/CForm.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+import { default as CForm } from '../components/CForm.vue';
+export interface ValidationState {
+    id: string;
+    validate: () => boolean;
+    valid: Ref<boolean>;
+    field?: Ref<HTMLElement | null>;
+}
+export type CFormRef = typeof CForm & {
+    validate: () => boolean;
+    inputs: ValidationState[];
+};

package/dist/types/font-awesome.d.ts

@@ -0,0 +1,5 @@
+import { IconDefinition, IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
+import { PropType } from 'vue';
+export type FaIconArray = [IconPrefix, IconName];
+export type FaIcon = IconName | FaIconArray | IconDefinition;
+export type FaPropType = PropType<FaIcon>;

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+export interface SplitInputField {
+    characters: number;
+    placeholder?: string;
+    separator?: string;
+}
+export type SplitInputRule = (v: string) => string | boolean;
+export declare enum InputVariants {
+    DEFAULT = "default",
+    CONTAINED = "contained",
+    SEGMENTED = "segmented"
+}
+export type NotificationVariant = 'info' | 'success' | 'error' | 'warning';
+export type ToastVariant = 'info' | 'success' | 'error' | 'warning';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "1.0.4",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"
@@ -64,7 +64,9 @@
   },
   "scripts": {
     "build": "vite build && vite build --mode cdn && pnpm run build:styles",
-    "build:styles": "node scripts/build-styles.mjs"
+    "build:styles": "node scripts/build-styles.mjs",
+    "version": "node scripts/sync-version.mjs && git add examples/",
+    "serve:examples": "vite preview --outDir examples --open"
   },
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -73,11 +75,16 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
     },
+    "./icons": {
+      "import": "./dist/icons.mjs"
+    },
     "./cdn": {
       "import": "./dist/index.cdn.mjs"
     },
-    "./styles/main.css": "./dist/styles/main.css",
-    "./styles/utils.css": "./dist/styles/utils.css",
+    "./cdn/icons": {
+      "import": "./dist/icons.cdn.mjs"
+    },
+    "./dist/styles.css": "./dist/styles.css",
     "./src/*": "./src/*"
   }
 }

package/src/colors/colors.ts

@@ -46,13 +46,18 @@ const Colors: Record<string, CssColor> = {
   BACKGROUND: GRAY_100,
   BLACK,
   GRAY_100,
-  // NOTE(slanden): the in-app browser cannot handle transparency in rgba colors,
-  // which get rendered as black, so we fall back to the hex color instead.
-  GRAY_100_HEX: '#f5f4f3',
   GRAY_200,
   GRAY_300,
   GRAY_400,
   GRAY_500,
+  // NOTE(slanden, Seth): Transparency does not work or make sense in all contexts, (e.g. the in-app
+  // browser cannot handle transparency in rgba colors). These provide hex the equivalent of each
+  // gray over a white background.
+  GRAY_100_HEX: '#f5f5f5',
+  GRAY_200_HEX: '#e6e6e6',
+  GRAY_300_HEX: '#b0b0b0',
+  GRAY_400_HEX: '#858585',
+  GRAY_500_HEX: '#4f4f4f',
   NAVY: BLACK,
   NAVY_TINT_1: GRAY_500,
   NAVY_TINT_2: GRAY_400,

package/src/components/CAccordion.vue

@@ -4,36 +4,43 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type SlDetails from '@shoelace-style/shoelace/dist/components/details/details';
-import { defineComponent, nextTick, provide, ref, toRefs } from 'vue';
+import type { VNode } from 'vue';
+import { nextTick, provide, ref, toRefs } from 'vue';
 
 import { FLUID, ON_TOGGLE } from '@propelinc/citrus-ui/src/services/injections/accordions';
 
-export default defineComponent({
-  name: 'CAccordion',
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Removes horizontal padding for all items inside */
-    fluid: { type: Boolean, default: false },
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    const { fluid } = toRefs(props);
-    provide(FLUID, fluid);
+    fluid?: boolean;
+  }>(),
+  {
+    fluid: false,
+  }
+);
 
-    const accordion = ref<HTMLDivElement | null>(null);
-    provide(ON_TOGGLE, async () => {
-      await nextTick();
-      const accordionItems: SlDetails[] = Array.from(
-        accordion.value!.querySelectorAll('[data-accordion-item]')
-      );
-      const openItems = accordionItems.reduce<number[]>((acc, item, index) => {
-        return item.hasAttribute('open') ? [...acc, index] : acc;
-      }, []);
-      emit('change', openItems);
-    });
+const emit = defineEmits<{
+  change: [openItems: number[]];
+}>();
 
-    return { accordion };
-  },
+defineSlots<{
+  default?: () => VNode[];
+}>();
+
+const { fluid } = toRefs(props);
+provide(FLUID, fluid);
+
+const accordion = ref<HTMLDivElement | null>(null);
+provide(ON_TOGGLE, async () => {
+  await nextTick();
+  const accordionItems: SlDetails[] = Array.from(
+    accordion.value!.querySelectorAll('[data-accordion-item]')
+  );
+  const openItems = accordionItems.reduce<number[]>((acc, item, index) => {
+    return item.hasAttribute('open') ? [...acc, index] : acc;
+  }, []);
+  emit('change', openItems);
 });
 </script>

package/src/components/CAccordionItem.vue

@@ -21,63 +21,64 @@
   </sl-details>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import '@shoelace-style/shoelace/dist/components/details/details';
 import type SlDetails from '@shoelace-style/shoelace/dist/components/details/details';
-import type { PropType } from 'vue';
-import { computed, defineComponent, inject, ref } from 'vue';
+import type { VNode } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import { useShoelaceAnimation } from '@propelinc/citrus-ui/src/composables/animation';
 import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
 import { FLUID, ON_TOGGLE } from '@propelinc/citrus-ui/src/services/injections/accordions';
 
-export default defineComponent({
-  name: 'CAccordionItem',
-  components: { FontAwesomeIcon },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Controls whether the item is open */
-    value: { type: Boolean, default: false },
+    value?: boolean;
     /** Removes horizontal padding from the content */
-    fluid: { type: Boolean as PropType<boolean | null>, default: null },
-  },
-  emits: ['input'],
-  setup(props, { emit }) {
-    const details = ref<SlDetails | null>(null);
-    useShoelaceAnimation(details, 'details.show', {
-      keyframes: [{ height: '0' }, { height: 'auto' }],
-      options: { duration: 200, easing: 'ease' },
-    });
-    useShoelaceAnimation(details, 'details.hide', {
-      keyframes: [{ height: 'auto' }, { height: '0' }],
-      options: { duration: 200, easing: 'ease' },
-    });
-
-    const fluid = inject(FLUID, ref(false));
-    const injectedOrPropFluid = computed(() => {
-      return props.fluid !== null ? props.fluid : (fluid.value ?? false);
-    });
-
-    const value = computed(() => props.value);
-    const internalValue = useInternalValue(value, { onChange: (value) => emit('input', value) });
-
-    const injectedToggleItem = inject(ON_TOGGLE, undefined);
-    const onChange = (value: boolean): void => {
-      internalValue.value = value;
-      injectedToggleItem?.();
-      emit('input', value);
-    };
-
-    return {
-      internalValue,
-      faChevronDown,
-      details,
-      injectedOrPropFluid,
-      onChange,
-    };
-  },
+    fluid?: boolean | null;
+  }>(),
+  {
+    value: false,
+    fluid: null,
+  }
+);
+
+const emit = defineEmits<{
+  input: [value: boolean];
+}>();
+
+defineSlots<{
+  default?: () => VNode[];
+  header?: () => VNode[];
+}>();
+
+const details = ref<SlDetails | null>(null);
+useShoelaceAnimation(details, 'details.show', {
+  keyframes: [{ height: '0' }, { height: 'auto' }],
+  options: { duration: 200, easing: 'ease' },
+});
+useShoelaceAnimation(details, 'details.hide', {
+  keyframes: [{ height: 'auto' }, { height: '0' }],
+  options: { duration: 200, easing: 'ease' },
 });
+
+const injectedFluid = inject(FLUID, ref(false));
+const injectedOrPropFluid = computed(() => {
+  return props.fluid !== null ? props.fluid : (injectedFluid.value ?? false);
+});
+
+const valueRef = computed(() => props.value);
+const internalValue = useInternalValue(valueRef, { onChange: (value) => emit('input', value) });
+
+const injectedToggleItem = inject(ON_TOGGLE, undefined);
+const onChange = (value: boolean): void => {
+  internalValue.value = value;
+  injectedToggleItem?.();
+  emit('input', value);
+};
 </script>
 
 <style lang="scss" scoped>