@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/AnchorLink.js

@@ -0,0 +1,66 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "./constants.js";
+import { useHover } from "./hooks/useHover.js";
+import { getColor } from "./theme/currys/color.js";
+import { I as Icon } from "./Icon.js";
+import ArrowUpRight from "./components/Icons/ArrowUpRight.js";
+import AnchorLinkStyles from "./components/AnchorLink/styles.module.scss";
+const AnchorLink = React__default.forwardRef((props, ref) => {
+  const { id, href, children, className, target = "_self", htmlMarkup = "a", onClick, testId } = props;
+  const external = target === "_blank";
+  const { hoverRef, isHovered } = useHover(
+    ref
+  );
+  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);
+  const commonProps = {
+    id,
+    ["data-testid"]: testId,
+    ["data-analyticsid"]: AnalyticsId.AnchorLink,
+    onClick
+  };
+  const renderContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    external && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: AnchorLinkStyles.anchorlink__icon,
+        svgIcon: ArrowUpRight,
+        color: getColor("blueberry", 600),
+        hoverColor: getColor("blueberry", 700),
+        size: IconSize.XSmall,
+        isHovered
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    htmlMarkup === "a" && /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target,
+        className: anchorClasses,
+        rel: external ? "noopener noreferrer" : void 0,
+        ref: hoverRef,
+        ...commonProps,
+        children: renderContent()
+      }
+    ),
+    htmlMarkup === "button" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: AnchorLinkStyles["anchorlink-wrapper"],
+        ref: hoverRef,
+        ...commonProps,
+        children: /* @__PURE__ */ jsx("span", { className: anchorClasses, children: renderContent() })
+      }
+    )
+  ] });
+});
+AnchorLink.displayName = "AnchorLink";
+export {
+  AnchorLink as A
+};
+//# sourceMappingURL=AnchorLink.js.map

package/lib/AnchorLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchorLink.js","sources":["../src/components/AnchorLink/AnchorLink.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\nexport type AnchorLinkOnClickEvent =\n  | React.MouseEvent<HTMLElement, MouseEvent>\n  | React.FormEvent<unknown>\n  | React.KeyboardEvent<HTMLUListElement>\n  | null;\n\nexport interface AnchorLinkProps {\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: AnchorLinkOnClickEvent) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst AnchorLink = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, AnchorLinkProps>((props, ref) => {\n  const { id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId } = props;\n  const external = target === '_blank';\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = (): React.ReactElement => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          href={href}\n          target={target}\n          className={anchorClasses}\n          rel={external ? 'noopener noreferrer' : undefined}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button\n          type=\"button\"\n          className={AnchorLinkStyles['anchorlink-wrapper']}\n          ref={hoverRef as React.RefObject<HTMLButtonElement>}\n          {...commonProps}\n        >\n          <span className={anchorClasses}>{renderContent()}</span>\n        </button>\n      )}\n    </>\n  );\n});\n\nAnchorLink.displayName = 'AnchorLink';\n\nexport default AnchorLink;\n"],"names":["React"],"mappings":";;;;;;;;;AAyCA,MAAM,aAAaA,eAAM,WAAmE,CAAC,OAAO,QAAQ;AAC1G,QAAM,EAAE,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,OAAA,IAAW;AAC/F,QAAM,WAAW,WAAW;AAC5B,QAAM,EAAE,UAAU,UAAA,IAAc;AAAA,IAC9B;AAAA,EAAA;AAEF,QAAM,gBAAgB,WAAW,iBAAiB,YAAY,SAAS;AAEvE,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,IACjB,CAAC,kBAAkB,GAAG,YAAY;AAAA,IAClC;AAAA,EAAA;AAGF,QAAM,gBAAgB,MACpB,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,YACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,iBAAiB;AAAA,QAC5B,SAAS;AAAA,QACT,OAAO,SAAS,aAAa,GAAG;AAAA,QAChC,YAAY,SAAS,aAAa,GAAG;AAAA,QACrC,MAAM,SAAS;AAAA,QACf;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAGF,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,eAAe,OACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,KAAK,WAAW,wBAAwB;AAAA,QACxC,KAAK;AAAA,QACJ,GAAG;AAAA,QAEH,UAAA,cAAA;AAAA,MAAc;AAAA,IAAA;AAAA,IAGlB,eAAe,YACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB,oBAAoB;AAAA,QAChD,KAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,UAAA,oBAAC,QAAA,EAAK,WAAW,eAAgB,0BAAc,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACnD,GAEJ;AAEJ,CAAC;AAED,WAAW,cAAc;"}

package/lib/AsChildSlot.js

@@ -0,0 +1,74 @@
+import React__default from "react";
+import { mergeRefs } from "./utils/refs.js";
+import styles from "./components/AsChildSlot/styles.module.scss";
+const isAriaDisabled = (v) => v === true || v === "true";
+const AsChildSlot = React__default.forwardRef(
+  ({ children, className, content, disabled, onSelect, ariaCurrent, elementRef }, forwardedRef) => {
+    const childElement = React__default.Children.toArray(children).filter(React__default.isValidElement)[0];
+    const nodeRef = React__default.useRef(null);
+    const childRef = childElement == null ? void 0 : childElement.ref;
+    const mergedRef = mergeRefs([
+      (node) => {
+        nodeRef.current = node;
+      },
+      childRef,
+      elementRef
+    ]);
+    const childProps = (childElement == null ? void 0 : childElement.props) || {};
+    const childDisabled = !!childProps.disabled || isAriaDisabled(childProps["aria-disabled"]);
+    const isDisabled = !!disabled || childDisabled;
+    React__default.useImperativeHandle(
+      forwardedRef,
+      () => ({
+        click: () => {
+          var _a;
+          if (isDisabled) return;
+          (_a = nodeRef.current) == null ? void 0 : _a.click();
+        }
+      }),
+      [isDisabled]
+    );
+    if (!childElement) return null;
+    const childOnClick = childProps.onClick;
+    const wrappedOnClick = (e) => {
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onSelect == null ? void 0 : onSelect(e);
+      childOnClick == null ? void 0 : childOnClick(e);
+    };
+    const childOnKeyDown = childProps.onKeyDown;
+    const wrappedOnKeyDown = (e) => {
+      var _a;
+      childOnKeyDown == null ? void 0 : childOnKeyDown(e);
+      if (e.defaultPrevented) return;
+      if (e.key === " " || e.key === "Spacebar" || e.code === "Space") {
+        if (isDisabled) {
+          e.preventDefault();
+          return;
+        }
+        e.preventDefault();
+        (_a = nodeRef.current) == null ? void 0 : _a.click();
+      }
+    };
+    const isButtonLike = typeof childProps.href === "undefined";
+    return React__default.cloneElement(childElement, {
+      ref: mergedRef,
+      className: `${styles["as-child-reset"]} ${className ?? ""}`,
+      style: void 0,
+      "aria-disabled": isDisabled || void 0,
+      "aria-current": ariaCurrent,
+      ...isButtonLike && !("type" in childProps) ? { type: "button" } : null,
+      onClick: wrappedOnClick,
+      onKeyDown: wrappedOnKeyDown,
+      children: content
+    });
+  }
+);
+AsChildSlot.displayName = "AsChildSlot";
+export {
+  AsChildSlot as A
+};
+//# sourceMappingURL=AsChildSlot.js.map

package/lib/AsChildSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsChildSlot.js","sources":["../src/components/AsChildSlot/AsChildSlot.tsx"],"sourcesContent":["import React from 'react';\n\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport interface AsChildSlotHandle {\n  /** Click the child’s DOM node */\n  click: () => void;\n}\n\nexport interface AsChildSlotProps {\n  /** Pass one element/component that we will map to a DOM element (<a>, <button>, React Router <Link>) */\n  children?: React.ReactNode;\n  /** Class names to apply to the visible element */\n  className?: string;\n  /** Content to render inside the visible element - For example the text and icons of the parent component that renders AsChildSlot */\n  content?: React.ReactNode;\n  /** Disabled state passed down (merged with child’s disabled/aria-disabled) */\n  disabled?: boolean;\n  /** Called before the child’s onClick when visible */\n  onSelect?: (e: React.SyntheticEvent) => void;\n  /** Optional states to apply to the DOM element */\n  ariaCurrent?: 'page' | 'true';\n  /** DOM ref for the element we end up rendering */\n  elementRef?: React.Ref<HTMLElement>;\n}\n\nconst isAriaDisabled = (v: unknown): boolean => v === true || v === 'true';\n\nexport const AsChildSlot = React.forwardRef<AsChildSlotHandle, AsChildSlotProps>(\n  ({ children, className, content, disabled, onSelect, ariaCurrent, elementRef }, forwardedRef) => {\n    const childElement = React.Children.toArray(children).filter(React.isValidElement)[0] as React.ReactElement | undefined;\n    const nodeRef = React.useRef<HTMLElement | null>(null);\n    const childRef = (childElement as unknown as { ref?: React.Ref<HTMLElement> | undefined })?.ref;\n    const mergedRef = mergeRefs<HTMLElement>([\n      (node): void => {\n        nodeRef.current = node;\n      },\n      childRef,\n      elementRef,\n    ]);\n\n    const childProps =\n      (childElement?.props as Partial<React.DOMAttributes<HTMLElement>> &\n        Partial<React.AnchorHTMLAttributes<HTMLElement>> &\n        Partial<React.ButtonHTMLAttributes<HTMLElement>> & { disabled?: boolean; href?: unknown }) || {};\n    const childDisabled = !!childProps.disabled || isAriaDisabled((childProps as React.AriaAttributes)['aria-disabled']);\n    const isDisabled = !!disabled || childDisabled;\n\n    // Exposes a callable click() to the parents.\n    React.useImperativeHandle(\n      forwardedRef,\n      () => ({\n        click: (): void => {\n          if (isDisabled) return;\n          nodeRef.current?.click();\n        },\n      }),\n      [isDisabled]\n    );\n\n    if (!childElement) return null;\n\n    // Actual user mouse interaction\n    const childOnClick = childProps.onClick as React.MouseEventHandler<HTMLElement> | undefined;\n    const wrappedOnClick: React.MouseEventHandler<HTMLElement> = e => {\n      if (isDisabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      onSelect?.(e);\n      childOnClick?.(e);\n    };\n\n    // Actual user keyboard interaction\n    const childOnKeyDown = childProps.onKeyDown as React.KeyboardEventHandler<HTMLElement> | undefined;\n    const wrappedOnKeyDown: React.KeyboardEventHandler<HTMLElement> = e => {\n      childOnKeyDown?.(e);\n      if (e.defaultPrevented) return;\n      if (e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space') {\n        if (isDisabled) {\n          e.preventDefault();\n          return;\n        }\n        e.preventDefault();\n        nodeRef.current?.click();\n      }\n    };\n\n    const isButtonLike = typeof childProps.href === 'undefined';\n\n    return React.cloneElement(childElement, {\n      ref: mergedRef,\n      className: `${styles['as-child-reset']} ${className ?? ''}`,\n      style: undefined,\n      'aria-disabled': isDisabled || undefined,\n      'aria-current': ariaCurrent,\n      ...(isButtonLike && !('type' in childProps) ? { type: 'button' } : null),\n      onClick: wrappedOnClick,\n      onKeyDown: wrappedOnKeyDown,\n      children: content,\n    });\n  }\n);\n\nAsChildSlot.displayName = 'AsChildSlot';\n\nexport default AsChildSlot;\n"],"names":["React"],"mappings":";;;AA4BA,MAAM,iBAAiB,CAAC,MAAwB,MAAM,QAAQ,MAAM;AAE7D,MAAM,cAAcA,eAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,WAAW,SAAS,UAAU,UAAU,aAAa,WAAA,GAAc,iBAAiB;AAC/F,UAAM,eAAeA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAOA,eAAM,cAAc,EAAE,CAAC;AACpF,UAAM,UAAUA,eAAM,OAA2B,IAAI;AACrD,UAAM,WAAY,6CAA0E;AAC5F,UAAM,YAAY,UAAuB;AAAA,MACvC,CAAC,SAAe;AACd,gBAAQ,UAAU;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,cACH,6CAAc,UAEiF,CAAA;AAClG,UAAM,gBAAgB,CAAC,CAAC,WAAW,YAAY,eAAgB,WAAoC,eAAe,CAAC;AACnH,UAAM,aAAa,CAAC,CAAC,YAAY;AAGjCA,mBAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACL,OAAO,MAAY;;AACjB,cAAI,WAAY;AAChB,wBAAQ,YAAR,mBAAiB;AAAA,QACnB;AAAA,MAAA;AAAA,MAEF,CAAC,UAAU;AAAA,IAAA;AAGb,QAAI,CAAC,aAAc,QAAO;AAG1B,UAAM,eAAe,WAAW;AAChC,UAAM,iBAAuD,CAAA,MAAK;AAChE,UAAI,YAAY;AACd,UAAE,eAAA;AACF,UAAE,gBAAA;AACF;AAAA,MACF;AACA,2CAAW;AACX,mDAAe;AAAA,IACjB;AAGA,UAAM,iBAAiB,WAAW;AAClC,UAAM,mBAA4D,CAAA,MAAK;;AACrE,uDAAiB;AACjB,UAAI,EAAE,iBAAkB;AACxB,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,cAAc,EAAE,SAAS,SAAS;AAC/D,YAAI,YAAY;AACd,YAAE,eAAA;AACF;AAAA,QACF;AACA,UAAE,eAAA;AACF,sBAAQ,YAAR,mBAAiB;AAAA,MACnB;AAAA,IACF;AAEA,UAAM,eAAe,OAAO,WAAW,SAAS;AAEhD,WAAOA,eAAM,aAAa,cAAc;AAAA,MACtC,KAAK;AAAA,MACL,WAAW,GAAG,OAAO,gBAAgB,CAAC,IAAI,aAAa,EAAE;AAAA,MACzD,OAAO;AAAA,MACP,iBAAiB,cAAc;AAAA,MAC/B,gBAAgB;AAAA,MAChB,GAAI,gBAAgB,EAAE,UAAU,cAAc,EAAE,MAAM,aAAa;AAAA,MACnE,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACF;AAEA,YAAY,cAAc;"}

package/lib/Avatar.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "./constants.js";
+import { palette } from "./theme/palette.js";
+import { I as Icon } from "./Icon.js";
+import Check from "./components/Icons/Check.js";
+import styles from "./components/Avatar/styles.module.scss";
+var AvatarSize = /* @__PURE__ */ ((AvatarSize2) => {
+  AvatarSize2["xsmall"] = "xsmall";
+  AvatarSize2["small"] = "small";
+  return AvatarSize2;
+})(AvatarSize || {});
+const Avatar = React__default.forwardRef(function AvatarForwardedRef(props, ref) {
+  const { children, className = "", selected = false, color = "blueberry", variant = "square", size = "small", testId } = props;
+  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: classNames(
+        styles.avatar,
+        selected && styles["avatar--selected"],
+        color === "black" && styles["avatar--black"],
+        variant === "circle" && styles["avatar--circle"],
+        size === "xsmall" && styles["avatar--xsmall"],
+        size === "small" && styles["avatar--small"],
+        className
+      ),
+      ref,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.Avatar,
+      children: selected ? /* @__PURE__ */ jsx(Icon, { svgIcon: Check, size: IconSize.Small, color: color === "black" ? palette.neutral900 : palette.blueberry600 }) : truncatedName
+    }
+  );
+});
+export {
+  Avatar as A,
+  AvatarSize as a
+};
+//# sourceMappingURL=Avatar.js.map

package/lib/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** Sets blue or black color on avatar. */\n  color?: 'blueberry' | 'black';\n  /** Square or circle variant of avatar. The circle should only be used for representation of someone else. NB: This is temporary and will be renamed in v10 */\n  variant?: 'square' | 'circle';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;\nconst Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, color = 'blueberry', variant = 'square', size = AvatarSize.small, testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        color === 'black' && styles['avatar--black'],\n        variant === 'circle' && styles['avatar--circle'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={color === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","React","cn"],"mappings":";;;;;;;;AAWO,IAAK,+BAAAA,gBAAL;AACLA,cAAA,QAAA,IAAS;AACTA,cAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAsBZ,MAAM,SAAqBC,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;AAChI,QAAM,EAAE,UAAU,YAAY,IAAI,WAAW,OAAO,QAAQ,aAAa,UAAU,UAAU,OAAO,SAAkB,WAAW;AACjI,QAAM,gBAAgB,SAAS,OAAO,CAAC,EAAE,sBAAsB,SAAS,UAAU,GAAG,CAAC;AACtF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QACT,OAAO;AAAA,QACP,YAAY,OAAO,kBAAkB;AAAA,QACrC,UAAU,WAAW,OAAO,eAAe;AAAA,QAC3C,YAAY,YAAY,OAAO,gBAAgB;AAAA,QAC/C,SAAS,YAAqB,OAAO,gBAAgB;AAAA,QACrD,SAAS,WAAoB,OAAO,eAAe;AAAA,QACnD;AAAA,MAAA;AAAA,MAEF;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B,UAAA,WACC,oBAAC,MAAA,EAAK,SAAS,OAAO,MAAM,SAAS,OAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ,cAAc,IAElH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/lib/Badge.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { N as NotificationBadge } from "./NotificationBadge.js";
+import { AnalyticsId, IconSize } from "./constants.js";
+import badgeStyles from "./components/Badge/styles.module.scss";
+const Badge = React__default.forwardRef(function BadgeForwardedRef(props, ref) {
+  const { children, className = "", color = "blueberry", testId, type = "string", notificationVariant = "info" } = props;
+  const badgeClasses = classNames(
+    badgeStyles.badge,
+    {
+      [badgeStyles["badge--blueberry"]]: color === "blueberry",
+      [badgeStyles["badge--cherry"]]: color === "cherry",
+      [badgeStyles["badge--neutral"]]: color === "neutral"
+    },
+    className
+  );
+  if (type === "notification" && notificationVariant !== void 0) {
+    return /* @__PURE__ */ jsx(
+      NotificationBadge,
+      {
+        variant: notificationVariant,
+        size: IconSize.XSmall,
+        className,
+        testId,
+        "data-analyticsid": AnalyticsId.Badge
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className: badgeClasses, ref, "data-testid": testId, "data-analyticsid": AnalyticsId.Badge, children });
+});
+export {
+  Badge as B
+};
+//# sourceMappingURL=Badge.js.map

package/lib/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport NotificationBadge, { BadgeNotificationVariant } from './NotificationBadge';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\n\nimport badgeStyles from './styles.module.scss';\n\nexport type BadgeColors = Extract<PaletteNames, 'blueberry' | 'cherry' | 'neutral'>;\nexport type BadgeChildren = string | number;\nexport type BadgeVariant = 'string' | 'notification';\n\nexport interface BadgeProps {\n  /** Sets the content of the badge. */\n  children?: BadgeChildren;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the badge background color. */\n  color?: BadgeColors;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the type of the badge. Default: string */\n  type?: BadgeVariant;\n  /** Type of notification badge. Only works if type is 'notification'. */\n  notificationVariant?: BadgeNotificationVariant;\n}\n\nexport type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;\nconst Badge: BadgeType = React.forwardRef(function BadgeForwardedRef(props: BadgeProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', color = 'blueberry', testId, type = 'string', notificationVariant = 'info' } = props;\n  const badgeClasses = classNames(\n    badgeStyles.badge,\n    {\n      [badgeStyles['badge--blueberry']]: color === 'blueberry',\n      [badgeStyles['badge--cherry']]: color === 'cherry',\n      [badgeStyles['badge--neutral']]: color === 'neutral',\n    },\n    className\n  );\n\n  if (type === 'notification' && notificationVariant !== undefined) {\n    return (\n      <NotificationBadge\n        variant={notificationVariant}\n        size={IconSize.XSmall}\n        className={className}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Badge}\n      />\n    );\n  }\n\n  return (\n    <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n      {children}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["React"],"mappings":";;;;;;AA8BA,MAAM,QAAmBA,eAAM,WAAW,SAAS,kBAAkB,OAAmB,KAAsC;AAC5H,QAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,aAAa,QAAQ,OAAO,UAAU,sBAAsB,OAAA,IAAW;AACjH,QAAM,eAAe;AAAA,IACnB,YAAY;AAAA,IACZ;AAAA,MACE,CAAC,YAAY,kBAAkB,CAAC,GAAG,UAAU;AAAA,MAC7C,CAAC,YAAY,eAAe,CAAC,GAAG,UAAU;AAAA,MAC1C,CAAC,YAAY,gBAAgB,CAAC,GAAG,UAAU;AAAA,IAAA;AAAA,IAE7C;AAAA,EAAA;AAGF,MAAI,SAAS,kBAAkB,wBAAwB,QAAW;AAChE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,SAAS;AAAA,QACf;AAAA,QACA;AAAA,QACA,oBAAkB,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpC;AAEA,SACE,oBAAC,QAAA,EAAK,WAAW,cAAc,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OACzF,SAAA,CACH;AAEJ,CAAC;"}

package/lib/Button.js

@@ -0,0 +1,178 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default, { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { I as Icon } from "./Icon.js";
+import { AnalyticsId, IconSize } from "./constants.js";
+import { useHover } from "./hooks/useHover.js";
+import { useIcons } from "./hooks/useIcons.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import { getColor } from "./theme/currys/color.js";
+import { isTest, isProd } from "./utils/environment.js";
+import ArrowRight from "./components/Icons/ArrowRight.js";
+import buttonStyles from "./components/Button/styles.module.scss";
+const getIconColor = (fill, borderless, disabled, concept, ondark, mobile) => {
+  if (mobile && disabled) {
+    return !ondark || fill ? getColor("neutral", !borderless ? 700 : 500) : getColor("white");
+  }
+  if (disabled) {
+    return !ondark || fill ? getColor("neutral", 500) : `${getColor("white")}b3`;
+  }
+  if (fill && !ondark || !fill && ondark) {
+    return "white";
+  }
+  return concept === "normal" ? getColor("blueberry", 600) : getColor("cherry", 500);
+};
+const getLargeIconSize = (large, mobile) => {
+  if (mobile && large) return IconSize.Small;
+  if (large) return IconSize.Medium;
+  return IconSize.XSmall;
+};
+const checkOnlyIconAria = (onlyIcon, ariaLabel, devEnv) => {
+  if (devEnv && onlyIcon && (ariaLabel === void 0 || ariaLabel === "")) {
+    throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
+  }
+};
+const Button = React__default.forwardRef(function ButtonForwardedRef(props, ref) {
+  const {
+    ariaLabel,
+    id,
+    children,
+    wrapperClassName,
+    className,
+    arrow,
+    concept = "normal",
+    disabled = false,
+    ellipsis = false,
+    fluid = false,
+    htmlMarkup = "button",
+    onColor = "onlight",
+    onBlur,
+    onClick,
+    size = "medium",
+    variant = "fill",
+    href,
+    tabIndex,
+    testId,
+    target,
+    type = "button",
+    textClassName,
+    textPosition = "left",
+    ...restProps
+  } = props;
+  const [leftIcon, rightIcon, restChildren] = useIcons(React__default.Children.toArray(children));
+  const { hoverRef, isHovered } = useHover(ref);
+  const buttonContentRef = useRef(null);
+  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;
+  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;
+  const onDark = onColor === "ondark";
+  const isMobile = useIsMobileBreakpoint();
+  const destructive = concept === "destructive" && !disabled;
+  const outlineVariant = variant === "outline";
+  const borderlessVariant = variant === "borderless";
+  const iconColor = getIconColor(variant === "fill", borderlessVariant, disabled, concept, onDark, isMobile);
+  const hasArrow = arrow === "icon" && !borderlessVariant;
+  const large = size === "large" && !destructive && !borderlessVariant;
+  const hasUURightArrow = arrow === "accessibility-character" && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;
+  const rest = { ...restProps };
+  const buttonWrapperClasses = classNames(
+    buttonStyles["button-wrapper"],
+    { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis },
+    wrapperClassName
+  );
+  const buttonClasses = classNames(
+    buttonStyles.button,
+    {
+      [buttonStyles["button--destructive"]]: destructive,
+      [buttonStyles["button--normal"]]: !large,
+      [buttonStyles["button--large"]]: large,
+      [buttonStyles["button--outline"]]: outlineVariant,
+      [buttonStyles["button--borderless"]]: borderlessVariant,
+      [buttonStyles["button--left-icon"]]: leftIcon && !onlyIcon,
+      [buttonStyles["button--right-icon"]]: rightIcon && !onlyIcon,
+      [buttonStyles["button--both-icons"]]: bothIcons,
+      [buttonStyles["button--only-icon"]]: onlyIcon,
+      [buttonStyles["button--arrow"]]: hasArrow,
+      [buttonStyles["button--on-dark"]]: onDark
+    },
+    className
+  );
+  const buttonTextClasses = classNames(
+    buttonStyles["button__text"],
+    {
+      [buttonStyles["button__text--ellipsis"]]: ellipsis,
+      [buttonStyles["button__text--centered"]]: fluid && textPosition === "centered"
+    },
+    textClassName
+  );
+  const diagonalClasses = classNames(buttonStyles["diagonal"], {
+    [buttonStyles["diagonal--on-dark"]]: onDark
+  });
+  useEffect(() => {
+    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());
+  }, []);
+  const renderIcon = (iconElement, iconSize, iconClassName) => {
+    return iconElement ? React__default.cloneElement(iconElement, {
+      size: iconSize,
+      color: (iconElement == null ? void 0 : iconElement.props.color) && !disabled ? iconElement.props.color : iconColor,
+      isHovered: iconElement.props.isHovered === void 0 ? !disabled && isHovered : iconElement.props.isHovered,
+      className: iconClassName
+    }) : null;
+  };
+  const renderButtonContent = () => {
+    return /* @__PURE__ */ jsxs("span", { className: buttonTextClasses, ref: buttonContentRef, children: [
+      disabled && borderlessVariant && /* @__PURE__ */ jsx("span", { className: diagonalClasses, children: /* @__PURE__ */ jsx("span", { className: buttonStyles["diagonal__line"] }) }),
+      /* @__PURE__ */ jsx("span", { children: onlyIcon ? ariaLabel : restChildren })
+    ] });
+  };
+  const renderbuttonContentWrapper = () => /* @__PURE__ */ jsxs("span", { className: buttonClasses, children: [
+    renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
+    renderButtonContent(),
+    hasArrow ? renderIcon(
+      /* @__PURE__ */ jsx(Icon, { svgIcon: ArrowRight }),
+      getLargeIconSize(large, isMobile),
+      classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })
+    ) : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles["button__right-icon"]),
+    hasUURightArrow && /* @__PURE__ */ jsx("span", { style: { color: iconColor }, className: buttonStyles["button__right-unicode-arrow"], "aria-hidden": true, children: "  →" })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    htmlMarkup === "button" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        id,
+        onBlur,
+        onClick,
+        disabled,
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.Button,
+        className: buttonWrapperClasses,
+        ref: hoverRef,
+        tabIndex,
+        type,
+        ...rest,
+        children: renderbuttonContentWrapper()
+      }
+    ),
+    htmlMarkup === "a" && /* @__PURE__ */ jsx(
+      "a",
+      {
+        id,
+        onBlur,
+        onClick,
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.Button,
+        className: buttonWrapperClasses,
+        href,
+        target,
+        rel: target === "_blank" ? "noopener noreferrer" : props.rel,
+        ref: hoverRef,
+        tabIndex,
+        ...restProps,
+        children: renderbuttonContentWrapper()
+      }
+    )
+  ] });
+});
+export {
+  Button as B
+};
+//# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } = useHover<HTMLElement>(ref as React.RefObject<HTMLElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const isMobile = useIsMobileBreakpoint();\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, isMobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["React"],"mappings":"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"}