@rikstv/shared-components 0.8.1 → 1.1.79

package/dist/components/core/core.scss

@@ -0,0 +1,102 @@
+@use "./mixin/rem";
+@use "./mixin/breakpoints" as break;
+@use "./mixin/focus" as focus;
+
+:root {
+  // Spacing
+  --rds-spacing--2: #{rem.convert(2px)};
+  --rds-spacing--4: #{rem.convert(4px)};
+  --rds-spacing--8: #{rem.convert(8px)};
+  --rds-spacing--16: #{rem.convert(16px)};
+  --rds-spacing--24: #{rem.convert(24px)};
+  --rds-spacing--32: #{rem.convert(32px)};
+  --rds-spacing--48: #{rem.convert(48px)};
+  --rds-spacing--64: #{rem.convert(64px)};
+  --rds-spacing--80: #{rem.convert(80px)};
+  --rds-spacing--96: #{rem.convert(96px)};
+
+  // Common shadows
+  --rds-box-shadow--default: 0px 8px 16px rgba(0, 0, 0, 0.5);
+
+  // Widths
+  --rds-readability-width: 60ch;
+  --rds-content-width--default: 1070px;
+
+  // Breakpoints
+  --rds-breakpoint--sm: #{break.$sm};
+  --rds-breakpoint--md: #{break.$md};
+  --rds-breakpoint--lg: #{break.$lg};
+
+  // Gutters
+  --rds-gutter--sm: 1rem;
+  --rds-gutter--md: 5vw;
+  --rds-gutter--lg: 7.5vw;
+
+  --rds-gutter: var(--rds-gutter--sm);
+
+  @include break.min("sm") {
+    --rds-gutter: var(--rds-gutter--md);
+  }
+
+  @include break.min("lg") {
+    --rds-gutter: var(--rds-gutter--lg);
+  }
+}
+
+.rds-gutter {
+  margin-inline: var(--rds-gutter);
+}
+
+.rds-gutter-padding {
+  padding-inline: var(--rds-gutter);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.with-keyboard-focus {
+  @include focus.with-keyboard-focus;
+}
+
+@font-face {
+  font-family: "HALMatex";
+  src: url("https://static.rikstv.no/strim/fonts/HALMatexStrim-Regular.woff2") format("woff2"),
+    url("https://static.rikstv.no/strim/fonts/HALMatexStrim-Regular.woff") format("woff");
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "AvertaRegular";
+  src: url("https://static.rikstv.no/strim/fonts/AvertaStandardRegular.woff2") format("woff2"),
+    url("https://static.rikstv.no/strim/fonts/hinted-AvertaStd-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "AvertaSemibold";
+  src: url("https://static.rikstv.no/strim/fonts/AvertaStandardSemibold.woff2") format("woff2"),
+    url("https://static.rikstv.no/strim/fonts/hinted-AvertaStd-Semibold.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "AvertaBold";
+  src: url("https://static.rikstv.no/strim/fonts/AvertaStandardBold.woff2") format("woff2"),
+    url("https://static.rikstv.no/strim/fonts/hinted-AvertaStd-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/components/core/docs/Spacing.scss

@@ -0,0 +1,12 @@
+.spacing-block {
+  &__container {
+    display: flex;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    gap: var(--rds-spacing--8);
+  }
+}

package/dist/components/core/docs/componets/ColorSwatch/ColorSwatch.scss

@@ -0,0 +1,66 @@
+.color-swatch {
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 230px;
+    background-color: var(--rds-foreground-primary);
+    border-radius: var(--rds-roundness--default);
+    overflow: hidden;
+    border: var(--swatch-border);
+    position: relative;
+
+    @keyframes color-swatch-copy-fade {
+      25% {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      75% {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      100% {
+        opacity: 0;
+        transform: translateY(calc(var(--color-swatch-animation-offset) * -1));
+      }
+    }
+
+    &--copied::before {
+      --color-swatch-animation-offset: 10px;
+      @media (prefers-reduced-motion) {
+        --color-swatch-animation-offset: 0px;
+      }
+
+      content: attr(data-copied);
+      position: absolute;
+      padding: var(--rds-spacing--24);
+      border-radius: var(--rds-roundness--default);
+      inset: auto 0 0 0;
+      margin: 4px;
+      background-color: var(--rds-heading-accent);
+      color: var(--rds-background-secondary);
+      text-align: center;
+      opacity: 0;
+      transform: translateY(var(--color-swatch-animation-offset));
+      animation-duration: var(--swatch-animation-duration);
+      animation-fill-mode: forwards;
+      animation-iteration-count: 1;
+      animation-name: color-swatch-copy-fade;
+      animation-timing-function: ease;
+      box-shadow: var(--rds-box-shadow--default);
+    }
+  }
+
+  &__palette {
+    width: 100%;
+    height: 200px;
+    background-color: var(--swatch-color);
+    margin-bottom: var(--rds-spacing--16);
+  }
+
+  &__text {
+    padding-inline: var(--rds-spacing--16);
+    box-sizing: border-box;
+    width: 100%;
+  }
+}

package/dist/components/core/docs/componets/ColorSwatch/ColorSwatchBtn.scss

@@ -0,0 +1,19 @@
+.color-swatch {
+  &__btn {
+    border: none;
+    width: auto;
+    background: transparent;
+    line-height: normal;
+    -webkit-appearance: none;
+    &::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+    }
+
+    display: flex;
+    text-align: left;
+    padding: 0;
+    cursor: pointer;
+    margin-block: var(--rds-spacing--8);
+  }
+}

package/dist/components/core/docs/componets/ExampleGrid/ExampleGrid.scss

@@ -0,0 +1,12 @@
+.example-grid {
+  &__title::first-letter {
+    text-transform: uppercase;
+  }
+
+  &__container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    gap: var(--rds-spacing--32);
+    margin-bottom: var(--rds-spacing--48);
+  }
+}

package/dist/components/core/docs/componets/SpacingBlock/SpacingBlock.scss

@@ -0,0 +1,6 @@
+.spacing-block {
+  background-color: var(--rds-accent-color-dark);
+  margin-left: var(--rds-spacing--8);
+  height: var(--spacing-size);
+  width: var(--spacing-size);
+}

package/dist/components/core/docs/hooks/animated.scss

@@ -0,0 +1,12 @@
+.animation {
+  &-panel {
+    transition: 200ms height ease-in-out;
+    max-width: var(--rds-readability-width);
+    &--hidden {
+      display: none;
+    }
+  }
+  &-btn {
+    margin-bottom: var(--rds-spacing--24);
+  }
+}

package/dist/components/core/docs/hooks/clickOutside.scss

@@ -0,0 +1,11 @@
+.click-outside {
+  border: 1px solid var(--rds-heading-accent);
+  border-radius: var(--rds-roundness--default);
+  height: 250px;
+  max-width: var(--rds-readability-width);
+  display: grid;
+  place-items: center;
+  & > span {
+    user-select: none;
+  }
+}

package/dist/components/core/docs/hooks/intersection.scss

@@ -0,0 +1,14 @@
+.example-intersection {
+  transition: 200ms background-color ease-in-out;
+  border-radius: var(--rds-roundness--default);
+  padding: var(--rds-spacing--32);
+  margin-top: 50vh;
+
+  &--visible {
+    background-color: var(--rds-background-secondary);
+  }
+
+  &--not-visible {
+    background-color: var(--rds-background-tertiary);
+  }
+}

package/dist/components/core/hooks/useAnimatedHeight.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from "react";
+export interface UseAnimatedHeightOptions {
+    onTransitionStart?: (isOpening: boolean) => void;
+    onTransitionEnd?: (isOpen: boolean) => void;
+}
+/**
+ *
+ * useMagic or useAnimatedHeight as its called
+ * lets you smoothly animate elements by height
+ *
+ * set `transition: 200ms height ease-in-out` on the
+ * transitioning element, and `display: none` on the
+ * hidden state
+ *
+ * This can be an rather expensive operation, so use
+ * with care and attention
+ *
+ */
+export declare function useAnimatedHeight<T extends HTMLElement>(isOpen: boolean, options?: UseAnimatedHeightOptions): [RefObject<T>, () => void];

package/dist/components/core/hooks/useBrowserPreferences.d.ts

@@ -0,0 +1,5 @@
+declare type BrowserPreferences = {
+    prefersReducedMotion: boolean;
+};
+export declare const useBrowserPreferences: () => BrowserPreferences;
+export {};

package/dist/components/core/hooks/useClickOutsideListener.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+interface Props {
+    ref: RefObject<HTMLElement> | null;
+    callback: (e: MouseEvent) => void;
+    condition?: boolean;
+}
+export declare const useClickOutsideListener: ({ ref, callback, condition }: Props) => void;
+export {};

package/dist/components/core/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,2 @@
+export declare const useIntersectionObserver: (callback: IntersectionObserverCallback, options?: IntersectionObserverInit, fallback?: VoidFunction, enabled?: boolean) => ((refNode: any) => void)[];
+export declare const useElementVisible: (options?: IntersectionObserverInit, enabled?: boolean) => readonly [(refNode: any) => void, boolean];

package/dist/components/core/hooks/useMutationObserver.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare const useMutationObserver: (target: Element | RefObject<HTMLElement>, onObservation: MutationCallback, config?: Partial<MutationObserverInit>) => void;

package/dist/components/core/mixin/breakpoints.scss

@@ -0,0 +1,44 @@
+$xs: 568px;
+$sm: 768px;
+$md: 992px;
+$ml: 1025px;
+$lg: 1200px;
+$lw: 1600px;
+$xl: 2400px;
+
+$breakpoints: (
+  "xs": $xs,
+  "sm": $sm,
+  "md": $md,
+  "ml": $ml,
+  "lg": $lg,
+  "lw": $lw,
+  "xl": $xl,
+) !default;
+
+@mixin breakpoint($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (max-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Available breakpoints are: #{map-keys($breakpoints)}.';
+  }
+}
+
+@mixin min($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Available breakpoints are: #{map-keys($breakpoints)}.';
+  }
+}

package/dist/components/core/rikstvColors.scss

@@ -0,0 +1,71 @@
+@use "./core";
+
+.rtv {
+  // RiksTV Red
+  --rikstv-red: #ef4642;
+  --rikstv-red-120: #d41612;
+
+  // Neutrals
+  --rikstv-white: #ffffff;
+  --rikstv-black: #000000;
+
+  // Onyx
+  --rikstv-onyx-150: #0f0f0f;
+  --rikstv-onyx: #1d1d1d;
+  --rikstv-onyx-90: #313131;
+
+  // Slate
+  --rikstv-slate: #353535;
+  --rikstv-slate-80: #626262;
+  --rikstv-slate-60: #828282;
+  --rikstv-slate-40: #afafaf;
+  --rikstv-slate-20: #ddd;
+
+  // Ask
+  --rikstv-ask: #5c5c5c;
+  --rikstv-ask-80: #787878;
+  --rikstv-ask-60: #9c9c9c;
+  --rikstv-ask-40: #c0c0c0;
+
+  // Sterling
+  --rikstv-sterling: #b8b8b8;
+  --rikstv-sterling-40: #e5e5e5;
+  --rikstv-sterling-20: #f1f1f1;
+  --rikstv-sterling-10: #f8f8f8;
+
+  // Secondary
+  --rikstv-purple: #542453;
+  --rikstv-green: #00816d;
+  --rikstv-blue: #195a89;
+  --rikstv-light-blue: #0f7ca2;
+  --rikstv-yellow: #f2a900;
+
+  // Feedback colors
+  --rikstv-info-light: #00aec7;
+  --rikstv-warning-light: #f2a900;
+  --rikstv-success-light: #4cbb81;
+  --rikstv-error-light: #f17774;
+
+  --rikstv-info-dark: #007485;
+  --rikstv-warning-dark: #996b00;
+  --rikstv-success-dark: #2a6f4b;
+  --rikstv-error-dark: #e01c17;
+
+  // NEEDS HANDLING
+  // Background
+  --rikstv-background-gray-150: #0b0b0b;
+  --rikstv-background-gray: #252525;
+  --rikstv-background-gray-90: #3b3b3b;
+  --rikstv-banner-background: #e9e9e9;
+  --rikstv-background: #f9f9f9;
+
+  // Card
+  --rikstv-card-gray: #434343;
+  --rikstv-card-gray-80: #333333;
+  --rikstv-card-gray-60: #6e6e6e;
+  --rikstv-card-gray-20: #d9d9d9;
+
+  // Foreground
+  --rikstv-foreground-gray: #666666;
+  --rikstv-foreground-gray-80: #858585;
+}

package/dist/components/core/rtv.scss

@@ -0,0 +1,75 @@
+@use "./core";
+@use "./rikstvColors";
+
+// Semantic colors/tags
+.rtv {
+  // Brand colors
+  --rds-heading-accent: var(--rikstv-white);
+  --rds-accent-color: var(--rikstv-red);
+  --rds-accent-color-mid: #ed302b; // mangler
+  --rds-accent-color-dark: var(--rikstv-red-120);
+  --rds-accent-hover: var(--rikstv-red-120);
+
+  // Buttons
+  --rds-button-primary-fg: var(--rikstv-white);
+  --rds-button-secondary-pressed-fg: var(--rikstv-foreground-gray);
+  --rds-button-secondary-pressed-bg: var(--rikstv-white);
+  --rds-button-tertirary-bg: var(--rikstv-background-gray-90);
+  --rds-button-tertiary-hover-bg: var(--rikstv-card-gray);
+
+  // Foreground
+  --rds-foreground-primary: var(--rikstv-white);
+  --rds-foreground-secondary: #a8a8a8; // mangler
+  --rds-foreground-tertiary: var(--rikstv-foreground-gray);
+
+  // Background
+  --rds-background-primary-rgb: var(--rikstv-background-gray);
+  --rds-background-primary: var(--rikstv-background-gray);
+  --rds-background-secondary: var(--rikstv-background-gray-150);
+  --rds-background-tertiary: var(--rikstv-card-gray);
+  --rds-background-card: var(--rikstv-background-gray-90);
+
+  // Transparent objects
+  --rds-foreground-overlay-soft: #ffffff1a;
+  --rds-foreground-overlay-medium: #ffffff4d;
+  --rds-foreground-overlay-heavy: #ffffffb3;
+
+  // ?
+  --rds-foreground-solid-soft: #3c3c3c; // mangler
+  --rds-surface-foreground: var(--rikstv-card-gray);
+
+  // Toggle
+  --rds-toggle-collapsed: var(--rds-accent-color);
+  --rds-toggle-expanded: var(--rds-accent-color-dark);
+
+  // Image/player overlays
+  --rds-background-overlay-soft: #0000001a;
+  --rds-background-overlay-medium: #00000080;
+  --rds-background-overlay-heavy: #000000d9;
+
+  // Feedback
+  --rds-feedback-info: var(--rikstv-light-blue);
+  --rds-feedback-warning: var(--rikstv-yellow);
+  --rds-feedback-confirm: var(--rikstv-success-light);
+  --rds-feedback-error: var(--rikstv-error-dark); // deprecated and should not be used
+  --rds-feedback-error-text: var(--rikstv-error-light);
+  --rds-feedback-error-object: var(--rikstv-error-dark);
+
+  // Roundness
+  --rds-roundness--default: 4px;
+  --rds-roundness--medium: 6px;
+  --rds-roundness--large: 8px;
+  --rds-roundness--xlarge: 12px;
+  --rds-roundness--button: 34px;
+
+  // Fonts
+  --rds-font-family-lg-headlines: "AvertaBold", Arial, Helvetica, "system-ui", sans-serif;
+  --rds-font-family-headlines: "AvertaBold", Arial, Helvetica, "system-ui", sans-serif;
+  --rds-font-family-m-headlines: "AvertaSemibold", Arial, Helvetica, "system-ui", sans-serif;
+  --rds-font-family-body: "AvertaRegular", Arial, Helvetica, "system-ui", sans-serif;
+
+  --rds-font-size--default: 1.125rem;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/dist/components/core/spacing/Gutter.d.ts

@@ -0,0 +1,2 @@
+import { FC, HTMLAttributes } from "react";
+export declare const Gutter: FC<HTMLAttributes<HTMLDivElement>>;

package/dist/components/core/spacing/GutterPadding.d.ts

@@ -0,0 +1,2 @@
+import { FC, HTMLAttributes } from "react";
+export declare const GutterPadding: FC<HTMLAttributes<HTMLDivElement>>;

package/dist/components/core/strimColors.scss

@@ -0,0 +1,48 @@
+@use "./core";
+
+.strm {
+  // Yellow
+  --strim-action-yellow: #faed6f;
+  --strim-action-yellow-60: #fcf4a9;
+  --strim-action-yellow-40: #fefbe2;
+
+  // Neutrals
+  --strim-white: #ffffff;
+  --strim-black: #000000;
+
+  // Fantasy green
+  --strim-fantasy-green-150: #001515;
+  --strim-fantasy-green: #002a2a;
+  --strim-fantasy-green-90: #193f3f;
+  --strim-fantasy-green-60: #4c7571;
+
+  // Thriller teal
+  --strim-thriller-teal: #004b50;
+  --strim-thriller-teal-80: #267c82;
+  --strim-thriller-teal-60: #419da2;
+  --strim-thriller-teal-40: #79c6c6;
+  --strim-thriller-teal-20: #c3e8e7;
+
+  // Romance green
+  --strim-romance-green: #356e63;
+  --strim-romance-green-80: #429181;
+  --strim-romance-green-60: #62b7a5;
+  --strim-romance-green-40: #93d6c9;
+
+  // Standup green
+  --strim-standup-green: #49f5a4;
+  --strim-standup-green-40: #bcfbde;
+  --strim-standup-green-20: #d6ffec;
+  --strim-standup-green-10: #edfef6;
+
+  // Feedback colors
+  --strim-info-light: #30d7f9;
+  --strim-warning-light: #f2a900;
+  --strim-success-light: #80ed99;
+  --strim-error-light: #ff8fa3;
+
+  --strim-info-dark: #167183;
+  --strim-warning-dark: #996b00;
+  --strim-success-dark: #13862d;
+  --strim-error-dark: #d91b4e;
+}

package/dist/components/core/strm.scss

@@ -0,0 +1,79 @@
+@use "./core";
+@use "./strimColors";
+
+.strm {
+  // ?
+  --stand-up-green: var(--strim-standup-green);
+  --surface-background: var(--strim-standup-green-10);
+  --faded-text: var(--strim-thriller-teal-40);
+
+  // Brand colors
+  --rds-heading-accent: var(--stand-up-green);
+  --rds-accent-color: var(--strim-action-yellow);
+  --rds-accent-color-mid: #f7e426; // mangler
+  --rds-accent-color-dark: #f7e426; // mangler
+  --rds-accent-hover: var(--strim-action-yellow-60);
+
+  // Buttons
+  --rds-button-primary-fg: var(--strim-thriller-teal);
+  --rds-button-secondary-pressed-fg: var(--strim-white);
+  --rds-button-secondary-pressed-bg: #001d1d; // mangler
+  --rds-button-tertirary-bg: var(--strim-fantasy-green-90);
+  --rds-button-tertiary-hover-bg: var(--strim-thriller-teal);
+
+  // Foreground
+  --rds-foreground-primary: var(--strim-white);
+  --rds-foreground-secondary: #b2bfbf; // mangler
+  --rds-foreground-tertiary: var(--strim-romance-green);
+
+  // Background
+  --rds-background-primary-rgb: var(--strim-fantasy-green); // not shown in portal
+  --rds-background-primary: var(--strim-fantasy-green);
+  --rds-background-secondary: var(--strim-fantasy-green-150);
+  --rds-background-tertiary: var(--strim-thriller-teal);
+  --rds-background-card: var(--strim-fantasy-green-90);
+
+  // Transparent objects
+  --rds-foreground-overlay-soft: #ffffff1a;
+  --rds-foreground-overlay-medium: #ffffff4d;
+  --rds-foreground-overlay-heavy: #ffffffb3;
+
+  // ?
+  --rds-foreground-solid-soft: #1a4040; // mangler
+  --rds-surface-foreground: var(--strim-thriller-teal);
+
+  // Toggle
+  --rds-toggle-collapsed: var(--strim-standup-green-40);
+  --rds-toggle-expanded: var(--strim-standup-green);
+
+  // Image/player overlays
+  --rds-background-overlay-soft: #0000001a;
+  --rds-background-overlay-medium: #00000080;
+  --rds-background-overlay-heavy: #000000d9;
+
+  // Feedback
+  --rds-feedback-info: var(--strim-info-light);
+  --rds-feedback-warning: var(--strim-warning-light);
+  --rds-feedback-confirm: #4cbb81; // mangler
+  --rds-feedback-error: #e01c17; // deprecated and should not be used
+  --rds-feedback-error-text: var(--strim-error-light);
+  --rds-feedback-error-object: var(--strim-error-dark);
+
+  // Roundsness
+  --rds-roundness--default: 12px;
+  --rds-roundness--medium: 16px;
+  --rds-roundness--large: 24px;
+  --rds-roundness--xlarge: 40px;
+  --rds-roundness--button: 12px;
+
+  // Fonts
+  --rds-font-family-lg-headlines: "HALMatex", "system-ui", sans-serif;
+  --rds-font-family-headlines: "AvertaBold", Arial, Helvetica, "system-ui", sans-serif;
+  --rds-font-family-m-headlines: "AvertaSemibold", Arial, Helvetica, "system-ui", sans-serif;
+  --rds-font-family-body: "AvertaRegular", Arial, Helvetica, "system-ui", sans-serif;
+
+  --rds-font-size--default: 1.125rem;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/dist/components/icons/Arrow.d.ts

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const Arrow: FC;

package/dist/components/icons/Arrow.js

@@ -0,0 +1,12 @@
+import { j as jsx } from "../core/RiksTV.js";
+const Arrow = () => /* @__PURE__ */ jsx("svg", {
+  "aria-label": "Pil",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M28.146 15.903a1.586 1.586 0 0 0-.078-.36 1.533 1.533 0 0 0-.233-.379L17.633 4.33a1.127 1.127 0 0 0-1.594 0 1.224 1.224 0 0 0 0 1.632l8.492 8.9H5.167a1.166 1.166 0 1 0 0 2.333h19.356l-8.483 8.852a1.224 1.224 0 0 0 0 1.603 1.058 1.058 0 0 0 .797.35 1.078 1.078 0 0 0 .806-.35l10.193-10.883c.106-.108.189-.237.243-.379.042-.109.068-.223.078-.34l-.01-.145Z"
+  })
+});
+export { Arrow as A };