@rikstv/shared-components 1.1.97 → 2.0.1

package/dist/components/toggleInlineButton/ToggleInlineButton.js

@@ -1,48 +0,0 @@
-import { forwardRef, useRef, useState } from "react";
-import { B as BaseCheckbox } from "../checkbox/BaseCheckbox.js";
-import { j as jsx } from "../core/RiksTV.js";
-var toggleInlineButton = /* @__PURE__ */ (() => ".rds-toggle-inline-button{--border-color: var(--rds-toggle-collapsed);display:inline-block;user-select:none}.rds-toggle-inline-button__input{opacity:0;position:absolute}.rds-light .rds-toggle-inline-button__content{color:var(--rds-button-primary-fg)}\n")();
-const ToggleInlineButton = forwardRef(({
-  defaultChecked,
-  lightBackground,
-  children,
-  onChange,
-  id,
-  className = "",
-  inputClassName = "",
-  labelClassName = "",
-  ...rest
-}, ref) => {
-  const internalRef = useRef(null);
-  const [isChecked, setIsChecked] = useState(!!defaultChecked);
-  const inputRef = ref || internalRef;
-  const handleChange = (e) => {
-    var _a;
-    if (typeof onChange === "function") {
-      onChange(e);
-    }
-    if (typeof inputRef !== "function") {
-      setIsChecked(!!((_a = inputRef.current) == null ? void 0 : _a.checked));
-    } else {
-      setIsChecked(!isChecked);
-    }
-  };
-  return /* @__PURE__ */ jsx(BaseCheckbox, {
-    id,
-    ref: inputRef,
-    onChange: handleChange,
-    checked: isChecked,
-    dataTestId: "toggle-inline-button__label",
-    containerClassName: `rds-toggle-inline-button ${className}`,
-    inputClassName: `rds-toggle-inline-button__input ${inputClassName}`,
-    labelClassName: `${lightBackground ? "rds-light" : ""} ${labelClassName}`,
-    ...rest,
-    children: /* @__PURE__ */ jsx("span", {
-      "data-testid": "toggle-inline-button__label__text",
-      className: "rds-toggle-inline-button__content",
-      children
-    })
-  });
-});
-ToggleInlineButton.displayName = "ToggleInlineButton";
-export { ToggleInlineButton as T };

package/dist/components/toggleLinkButton/ToggleLinkButton.js

@@ -1,55 +0,0 @@
-import { forwardRef, useRef, useState } from "react";
-import { B as BaseCheckbox } from "../checkbox/BaseCheckbox.js";
-import { C as Chevron } from "../icons/Chevron.js";
-import { j as jsx, a as jsxs } from "../core/RiksTV.js";
-var toggleLinkButton = /* @__PURE__ */ (() => ".rds-toggle-link-button{--border-color: var(--rds-toggle-collapsed);display:inline-block;user-select:none}.rds-toggle-link-button__input{opacity:0;position:absolute}.rds-toggle-link-button__input:checked+.rds-toggle-link-button__label{--chevron-direction: 180deg;--border-color: var(--rds-toggle-expanded)}.rds-toggle-link-button__label__content{display:flex;align-items:center}.rds-toggle-link-button__label__content>span:first-child{border-bottom:2px solid var(--border-color);padding-bottom:7px}.rds-toggle-link-button__label__chevron{padding-left:var(--rds-spacing--8)}.rds-toggle-link-button__label__chevron>svg{height:100%;width:20px;transform:rotate(var(--chevron-direction));transition:transform 125ms ease-in-out;transform-origin:center}.rds-toggle-link-button__label__chevron>svg>path{fill:currentColor}.rds-light{--border-color: var(--rds-foreground-tertiary)}.rds-light .rds-toggle-link-button__input:checked+.rds-toggle-link-button__label{--border-color: var(--rds-background-secondary)}.rds-light .rds-toggle-link-button__label{color:var(--rds-button-primary-fg)}\n")();
-const ToggleLinkButton = forwardRef(({
-  defaultChecked,
-  toggledContentId,
-  iconClass = "",
-  lightBackground,
-  children,
-  onChange,
-  id,
-  className = "",
-  ...rest
-}, ref) => {
-  const internalRef = useRef(null);
-  const [isChecked, setIsChecked] = useState(!!defaultChecked);
-  const inputRef = ref || internalRef;
-  const handleChange = (e) => {
-    var _a;
-    if (typeof onChange === "function") {
-      onChange(e);
-    }
-    if (typeof inputRef !== "function") {
-      setIsChecked(!!((_a = inputRef.current) == null ? void 0 : _a.checked));
-    } else {
-      setIsChecked(!isChecked);
-    }
-  };
-  return /* @__PURE__ */ jsx(BaseCheckbox, {
-    id,
-    ref: inputRef,
-    onChange: handleChange,
-    checked: isChecked,
-    "aria-controls": toggledContentId,
-    dataTestId: "toggle-link-button__label",
-    containerClassName: "rds-toggle-link-button",
-    inputClassName: "rds-toggle-link-button__input",
-    labelClassName: `rds-toggle-link-button__label ${lightBackground ? "rds-light" : ""} ${className}`,
-    ...rest,
-    children: /* @__PURE__ */ jsxs("span", {
-      className: "rds-toggle-link-button__label__content",
-      children: [/* @__PURE__ */ jsx("span", {
-        "data-testid": `toggle-link-button__label__text`,
-        children
-      }), /* @__PURE__ */ jsx("span", {
-        className: `rds-toggle-link-button__label__chevron ${iconClass}`,
-        children: /* @__PURE__ */ jsx(Chevron, {})
-      })]
-    })
-  });
-});
-ToggleLinkButton.displayName = "ToggleLinkButton";
-export { ToggleLinkButton as T };

package/dist/components/typography/Typography.js

@@ -1,67 +0,0 @@
-import { forwardRef } from "react";
-import { j as jsx } from "../core/RiksTV.js";
-var typography = /* @__PURE__ */ (() => ".rtv{--sub-body-color--light: var(--rds-foreground-solid-soft)}.strm{--sub-body-color--light: var(--rds-button-primary-fg)}.rds-link{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:var(--rds-foreground-primary);transition:75ms ease color}.rds-link:visited{color:var(--rds-foreground-primary)}.rds-link:hover{text-decoration-thickness:2px;color:var(--rds-heading-accent)}.rds-link:active{text-decoration:none;text-shadow:0px 0px 1px var(--rds-foreground-primary)}.rds-link--active,.rds-link[aria-current=page]{text-shadow:0px 0px 1px var(--rds-foreground-primary)}.rds-link:focus::-moz-focus-inner{border-style:none;outline:0}.rds-link:focus button::-moz-focus-inner,.rds-link:focus [type=button]::-moz-focus-inner,.rds-link:focus [type=reset]::-moz-focus-inner,.rds-link:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-link:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-link:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-display-title{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(2.5rem,calc(1.4285714286rem + 2.9761904762vw),5rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-1{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.875rem,calc(1.1785714286rem + 1.9345238095vw),3.5rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-2{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.5rem,calc(1.0714285714rem + 1.1904761905vw),2.5rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-sub-title-2{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.375rem,calc(1.1071428571rem + .744047619vw),2rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-3{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1.25rem,calc(1.1964285714rem + .1488095238vw),1.375rem);font-weight:400;line-height:1.2;color:var(--rds-heading-accent)}.rds-title-4{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:400;line-height:1.2;color:var(--rds-foreground-primary)}.rds-lead{font-family:var(--rds-font-family-lead);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-primary)}.rds-body,.rds-span{font-family:var(--rds-font-family-body);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-primary)}.rds-sub-body{font-family:var(--rds-font-family-body);font-size:clamp(.875rem,calc(.8214285714rem + .1488095238vw),1rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-primary)}.rds-tag{font-family:var(--rds-font-family-headlines);text-transform:uppercase;font-size:clamp(.75rem,calc(.6964285714rem + .1488095238vw),.875rem);line-height:1.2;font-weight:400;letter-spacing:.09375rem;color:var(--rds-foreground-primary)}.rds-bold{font-family:var(--rds-font-family-headlines);font-size:clamp(1.125rem,calc(1.125rem + 0vw),1.125rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-primary)}.rds-meta{font-family:var(--rds-font-family-body);font-size:clamp(.75rem,calc(.6964285714rem + .1488095238vw),.875rem);font-weight:400;line-height:1.5;color:var(--rds-foreground-overlay-heavy)}.rds-link--light,.rds-light .rds-link{color:var(--rds-background-primary)}.rds-link--light:hover,.rds-light .rds-link:hover{color:var(--rds-foreground-tertiary)}.rds-link--light:active,.rds-light .rds-link:active{text-shadow:0px 0px 1px var(--rds-background-primary)}.rds-link--light:visited,.rds-light .rds-link:visited{color:var(--rds-background-primary)}.rds-link--light--active,.rds-link--light[aria-current=page],.rds-light [aria-current=page].rds-link{text-shadow:0px 0px 1px var(--rds-background-primary)}.rds-light .rds-display-title,.rds-display-title--light{color:var(--rds-foreground-tertiary)}.rds-light .rds-title-1,.rds-title-1--light,.rds-light .rds-title-2,.rds-title-2--light,.rds-light .rds-title-3,.rds-title-3--light,.rds-light .rds-title-4,.rds-title-4--light,.rds-light .rds-sub-title-2,.rds-sub-title-2--light,.rds-light .rds-lead,.rds-lead--light{color:var(--rds-button-primary-fg)}.rds-light .rds-body,.rds-light .rds-span,.rds-body--light{color:var(--rds-background-primary)}.rds-light .rds-sub-body,.rds-sub-body--light{color:var(--sub-body-color--light)}.rds-light .rds-tag,.rds-tag--light,.rds-light .rds-bold,.rds-bold--light{color:var(--rds-background-primary)}.rds-light .rds-meta,.rds-meta--light{color:var(--rds-button-primary-fg)}\n")();
-const typographyFactory = (factoryProps) => forwardRef(({
-  children,
-  lookLike = factoryProps.lookLike,
-  className = "",
-  lightBackground = false,
-  ...props
-}, ref) => {
-  const C = factoryProps.semanticElement;
-  return /* @__PURE__ */ jsx(C, {
-    className: `rds-${lookLike} ${lightBackground ? `rds-${lookLike}--light` : ""} ${className}`,
-    ...props,
-    ref,
-    children
-  });
-});
-const DisplayTitle = typographyFactory({
-  semanticElement: "h1",
-  lookLike: "display-title"
-});
-const H1 = typographyFactory({
-  semanticElement: "h1",
-  lookLike: "title-1"
-});
-const H2 = typographyFactory({
-  semanticElement: "h2",
-  lookLike: "title-2"
-});
-const H3 = typographyFactory({
-  semanticElement: "h3",
-  lookLike: "title-3"
-});
-const H4 = typographyFactory({
-  semanticElement: "h4",
-  lookLike: "title-4"
-});
-const Lead = typographyFactory({
-  semanticElement: "p",
-  lookLike: "lead"
-});
-const Body = typographyFactory({
-  semanticElement: "p",
-  lookLike: "body"
-});
-const SubBody = typographyFactory({
-  semanticElement: "p",
-  lookLike: "sub-body"
-});
-const Tag = typographyFactory({
-  semanticElement: "span",
-  lookLike: "tag"
-});
-const Bold = typographyFactory({
-  semanticElement: "strong",
-  lookLike: "bold"
-});
-const Meta = typographyFactory({
-  semanticElement: "span",
-  lookLike: "meta"
-});
-const Span = typographyFactory({
-  semanticElement: "span",
-  lookLike: "span"
-});
-export { Body as B, DisplayTitle as D, H1 as H, Lead as L, Meta as M, Span as S, Tag as T, H2 as a, H3 as b, H4 as c, Bold as d, SubBody as e };

package/dist/shared-components.es.js

@@ -1,213 +0,0 @@
-export { R as RiksTVProvider } from "./components/core/RiksTV.js";
-export { S as StrimProvider } from "./components/core/Strim.js";
-export { L as LightMode } from "./components/core/LightMode.js";
-export { G as Gutter } from "./components/spacing/Gutter.js";
-export { G as GutterPadding } from "./components/spacing/GutterPadding.js";
-export { N as NotificationDot } from "./components/notificationDot/NotificationDot.js";
-export { A as Accordion } from "./components/accordion/Accordion.js";
-export { P as Panel } from "./components/panel/Panel.js";
-export { B as Breadcrumb, a as BreadcrumbCurrent } from "./components/breadcrumb/Breadcrumb.js";
-export { P as Progress } from "./components/progress/Progress.js";
-export { L as Loader } from "./components/loader/Loader.js";
-export { C as CircularProgress } from "./components/progress/CircularProgress.js";
-export { P as PrimaryButton, S as SecondaryButton, T as TertiaryButton } from "./components/button/Button.js";
-export { P as PrimaryArrowButton, S as SecondaryArrowButton, T as TertiaryArrowButton } from "./components/button/ArrowButton.js";
-export { P as PrimaryIconButton, S as SecondaryIconButton, T as TertiaryIconButton } from "./components/button/IconButton.js";
-export { T as ToggleButton } from "./components/toggleButton/ToggleButton.js";
-export { T as ToggleInlineButton } from "./components/toggleInlineButton/ToggleInlineButton.js";
-export { T as ToggleLinkButton } from "./components/toggleLinkButton/ToggleLinkButton.js";
-export { C as Checkbox } from "./components/checkbox/Checkbox.js";
-export { a as RadioToggleInput } from "./components/toggle/RadioToggle.js";
-export { F as FieldSet } from "./components/toggle/FieldSet.js";
-export { T as TextField } from "./components/textfield/TextField.js";
-export { B as Body, d as Bold, D as DisplayTitle, H as H1, a as H2, b as H3, c as H4, L as Lead, M as Meta, S as Span, e as SubBody, T as Tag } from "./components/typography/Typography.js";
-export { L as List } from "./components/list/List.js";
-export { C as CheckmarkListItem } from "./components/list/CheckmarkListItem.js";
-export { L as ListItem } from "./components/list/ListItem.js";
-export { C as CrossmarkListItem } from "./components/list/CrossmarkListItem.js";
-export { O as OrderedListItem } from "./components/list/OrderedListItem.js";
-import { useState, useEffect, useRef, useCallback, useLayoutEffect } from "react";
-export { L as LinkButton } from "./components/button/LinkButton.js";
-export { B as BaseLinkButton } from "./components/button/BaseLinkButton.js";
-import "./components/core/Core.js";
-import "./components/icons/Chevron.js";
-import "./components/panel/Success.js";
-import "./components/panel/Warning.js";
-import "./components/panel/Info.js";
-import "./components/loader/RawLoader.js";
-import "./components/button/BaseButton.js";
-import "./components/button/DecoratedButton.js";
-import "./components/button/BaseDecoratedButton.js";
-import "./components/icons/Arrow.js";
-import "./components/checkbox/BaseCheckbox.js";
-const PREFERS_REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
-const getInitialMediaQueryMatch = (mediaQuery) => {
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia(mediaQuery).matches;
-  }
-  return false;
-};
-const addMediaQueryListener = (mq, callback) => {
-  if (typeof mq.addEventListener !== "undefined") {
-    mq.addEventListener("change", callback);
-  }
-};
-const useBrowserPreferences = () => {
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialMediaQueryMatch(PREFERS_REDUCED_MOTION));
-  useEffect(() => {
-    if (typeof window !== "undefined" && window.matchMedia) {
-      addMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), (e2) => {
-        setPrefersReducedMotion(e2.matches);
-      });
-    }
-  }, []);
-  return { prefersReducedMotion };
-};
-function useAnimatedHeight(isOpen, options) {
-  const raf1 = useRef();
-  const raf2 = useRef();
-  const elementRef = useRef(null);
-  const firstRender = useRef(true);
-  const { prefersReducedMotion } = useBrowserPreferences();
-  function handleTransitionEnd(event) {
-    var _a;
-    const element = elementRef.current;
-    if (element && event.target === element) {
-      element.removeAttribute("style");
-      (_a = options == null ? void 0 : options.onTransitionEnd) == null ? void 0 : _a.call(options, isOpen);
-    }
-  }
-  const runAnimation = useCallback(() => {
-    var _a, _b;
-    if (firstRender.current) {
-      return;
-    }
-    (_a = options == null ? void 0 : options.onTransitionStart) == null ? void 0 : _a.call(options, isOpen);
-    if (prefersReducedMotion) {
-      (_b = options == null ? void 0 : options.onTransitionEnd) == null ? void 0 : _b.call(options, isOpen);
-      return;
-    }
-    const element = elementRef.current;
-    if (element) {
-      element.style.display = "block";
-      element.style.overflow = "hidden";
-      if (isOpen) {
-        element.style.height = "0";
-        element.style.height = `${element.scrollHeight}px`;
-      } else {
-        if (element.scrollHeight === 0) {
-          element.removeAttribute("style");
-          return;
-        }
-        element.style.height = `${element.scrollHeight}px`;
-        raf1.current = requestAnimationFrame(() => {
-          raf2.current = requestAnimationFrame(() => {
-            element.style.height = `${0}px`;
-          });
-        });
-      }
-    }
-  }, [isOpen, options, prefersReducedMotion]);
-  useLayoutEffect(() => {
-    runAnimation();
-  }, [isOpen, runAnimation]);
-  useEffect(() => {
-    const element = elementRef.current;
-    if (element) {
-      element.addEventListener("transitionend", handleTransitionEnd);
-    }
-    return () => {
-      if (element) {
-        element.removeEventListener("transitionend", handleTransitionEnd);
-      }
-    };
-  }, [isOpen]);
-  useEffect(() => {
-    const r1 = raf1.current;
-    const r2 = raf2.current;
-    firstRender.current = false;
-    return () => {
-      r1 && cancelAnimationFrame(r1);
-      r2 && cancelAnimationFrame(r2);
-    };
-  }, [raf1, raf2]);
-  return [elementRef, runAnimation];
-}
-const useClickOutsideListener = ({ ref, callback, condition = true }) => {
-  const handleClick = useCallback((e2) => {
-    if ((ref == null ? void 0 : ref.current) && !ref.current.contains(e2.target)) {
-      callback(e2);
-    }
-  }, [callback, ref]);
-  useEffect(() => {
-    if (ref && condition) {
-      document && document.addEventListener("click", handleClick);
-    }
-    return () => {
-      document && document.removeEventListener("click", handleClick);
-    };
-  }, [ref, condition, handleClick]);
-};
-const intersectionObserverSupported = (() => {
-  const entry = globalThis.IntersectionObserverEntry;
-  return "IntersectionObserver" in globalThis && entry && "isIntersecting" in entry.prototype;
-})();
-const noop = () => void 0;
-const useIntersectionObserver = (callback, options = {}, fallback = noop, enabled = true) => {
-  const [triggerElement, setTriggerElement] = useState(null);
-  const observedElementRef = useCallback((refNode) => setTriggerElement(refNode), [setTriggerElement]);
-  const optionsRef = useRef(options);
-  const observerRef = useRef(null);
-  useEffect(() => {
-    if (!intersectionObserverSupported) {
-      fallback == null ? void 0 : fallback();
-      return;
-    }
-    let observer = observerRef.current;
-    observer == null ? void 0 : observer.disconnect();
-    if (triggerElement && enabled) {
-      observer = new IntersectionObserver(callback, optionsRef.current);
-      observer.observe(triggerElement);
-    }
-    return () => {
-      observer == null ? void 0 : observer.disconnect();
-    };
-  }, [triggerElement, callback, fallback, enabled]);
-  return [observedElementRef];
-};
-const useElementVisible = (options = { rootMargin: "150px" }, enabled = true) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [targetRef] = useIntersectionObserver((items) => {
-    const isIntersecting = items.some((i) => i.isIntersecting);
-    setIsVisible(isIntersecting);
-  }, options, void 0, enabled);
-  return [targetRef, isVisible];
-};
-const hasWindowWithMutationObserver = () => typeof window !== "undefined" && typeof MutationObserver !== "undefined";
-const useMutationObserver = (target, onObservation, config) => {
-  const observerRef = useRef(null);
-  useEffect(() => {
-    let observer = observerRef.current;
-    if (hasWindowWithMutationObserver()) {
-      if (observer) {
-        observer.disconnect();
-      }
-      observer = new MutationObserver(onObservation);
-      if (target) {
-        if ("current" in target) {
-          if (target.current) {
-            observer.observe(target.current, config);
-          }
-        } else {
-          observer.observe(target, config);
-        }
-      }
-    }
-    return () => {
-      if (hasWindowWithMutationObserver() && observer) {
-        observer.disconnect();
-      }
-    };
-  }, [target, onObservation, config]);
-};
-export { useAnimatedHeight, useBrowserPreferences, useClickOutsideListener, useElementVisible, useIntersectionObserver, useMutationObserver };