@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.551",
+  "version": "0.0.552",
   "type": "module",
   "scripts": {
     "build": "tsup",
@@ -13,8 +13,7 @@
     "postbuild": "npm run copy:pdf-worker"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     "./components/*": {

package/src/brand.css

@@ -1,125 +0,0 @@
-[data-theme="brand"] {
-  --color-text-primary-normal: var(--color-neutral-000);
-
-  --color-text-primary-disabled: var(--color-neutral-400);
-  --color-text-primary-error: var(--color-critical-200);
-
-  --color-text-secondary-normal: var(--color-neutral-200);
-  --color-text-secondary-disabled: var(--color-neutral-400);
-  --color-text-secondary-error: var(--color-critical-200);
-
-  --color-text-success-normal: var(--color-success-200);
-  --color-text-success-disabled: var(--color-neutral-300);
-  --color-text-success-error: var(--color-critical-200);
-
-  --color-text-warning-normal: var(--color-warning-200);
-  --color-text-warning-disabled: var(--color-neutral-300);
-  --color-text-warning-error: var(--color-critical-200);
-
-  --color-text-link-normal: var(--color-link-000);
-  --color-text-link-hover: var(--color-brand-200);
-  --color-text-link-active: var(--color-brand-200);
-  --color-text-link-disabled: var(--color-neutral-400);
-
-  --color-border-primary-normal: var(--color-brand-200);
-  --color-border-primary-focus: var(--color-neutral-000);
-  --color-border-primary-error: var(--color-critical-300);
-
-  --color-icon-primary-normal: var(--color-brand-200);
-  --color-icon-primary-disabled: var(--color-neutral-400);
-
-  --color-icon-success-normal: var(--color-success-400);
-  --color-icon-success-disabled: var(--color-neutral-400);
-
-  --color-icon-warning-normal: var(--color-warning-400);
-  --color-icon-warning-disabled: var(--color-neutral-400);
-
-  --color-icon-critical-normal: var(--color-critical-400);
-  --color-icon-critical-disabled: var(--color-neutral-400);
-
-  --color-background-primary-normal: var(--color-brand-400);
-  --color-background-grouped-primary-normal: var(--color-brand-400);
-  --color-background-secondary-normal: var(--color-brand-500);
-  --color-background-grouped-secondary-normal: var(--color-brand-500);
-  --color-background-success-normal: var(--color-success-400);
-  --color-background-warning-normal: var(--color-warning-400);
-  --color-background-critical-normal: var(--color-critical-400);
-
-  --color-text-action-primary-normal: var(--color-action-000);
-  --color-text-action-primary-hover: var(--color-brand-200);
-  --color-text-action-primary-active: var(--color-brand-200);
-  --color-text-action-primary-disabled: var(--color-neutral-400);
-
-  --color-text-on-action-primary-normal: var(--color-brand-400);
-  --color-text-on-action-primary-hover: var(--color-brand-200);
-  --color-text-on-action-primary-active: var(--color-brand-200);
-  --color-text-on-action-primary-disabled: var(--color-neutral-400);
-
-  --color-text-action-critical-normal: var(--color-critical-200);
-  --color-text-action-critical-hover: var(--color-critical-300);
-  --color-text-action-critical-active: var(--color-critical-200);
-  --color-text-action-critical-disabled: var(--color-neutral-400);
-
-  --color-border-action-normal: var(--color-neutral-000);
-  --color-border-action-hover: var(--color-brand-200);
-  --color-border-action-active: var(--color-brand-200);
-  --color-border-action-disabled: var(--color-neutral-200);
-
-  --color-text-critical-normal: var(--color-critical-200);
-  --color-text-critical-disabled: var(--color-neutral-300);
-  --color-text-critical-error: var(--color-critical-200);
-
-  --color-border-action-critical-normal: var(--color-critical-200);
-  --color-border-action-critical-hover: var(--color-critical-300);
-  --color-border-action-critical-active: var(--color-critical-200);
-  --color-border-action-critical-disabled: var(--color-neutral-200);
-
-  --color-icon-action-primary-normal: var(--color-neutral-000);
-  --color-icon-action-primary-hover: var(--color-brand-200);
-  --color-icon-action-primary-active: var(--color-brand-100);
-  --color-icon-action-primary-disabled: var(--color-neutral-300);
-
-  --color-icon-action-secondary-normal: var(--color-neutral-000);
-  --color-icon-action-secondary-hover: var(--color-brand-200);
-  --color-icon-action-secondary-active: var(--color-brand-200);
-  --color-icon-action-secondary-disabled: var(--color-neutral-400);
-
-  --color-icon-on-action-primary-normal: var(--color-brand-400);
-  --color-icon-on-action-primary-hover: var(--color-brand-500);
-  --color-icon-on-action-primary-active: var(--color-brand-300);
-  --color-icon-on-action-primary-disabled: var(--color-neutral-400);
-
-  --color-icon-action-critical-normal: var(--color-critical-200);
-  --color-icon-action-critical-hover: var(--color-critical-300);
-  --color-icon-action-critical-active: var(--color-critical-200);
-  --color-icon-action-critical-disabled: var(--color-neutral-400);
-
-  --color-icon-brand-primary-normal: var(--color-neutral-000);
-  --color-icon-brand-primary-hover: var(--color-brand-200);
-  --color-icon-brand-primary-active: var(--color-neutral-000);
-  --color-icon-brand-primary-disabled: var(--color-neutral-300);
-
-  --color-background-action-primary-normal: var(--color-action-000);
-  --color-background-action-primary-hover: var(--color-brand-200);
-  --color-background-action-primary-active: var(--color-neutral-000);
-  --color-background-action-primary-disabled: var(--color-neutral-200);
-
-  --color-background-action-secondary-normal: var(--color-brand-400);
-  --color-background-action-secondary-hover: var(--color-brand-500);
-  --color-background-action-secondary-active: var(--color-brand-400);
-  --color-background-action-secondary-disabled: var(--color-neutral-200);
-
-  --color-background-brand-normal: var(--color-brand-400);
-
-  --color-background-action-critical-primary-normal: var(--color-critical-400);
-  --color-background-action-critical-primary-hover: var(--color-critical-500);
-  --color-background-action-critical-primary-active: var(--color-critical-300);
-  --color-background-action-critical-primary-disabled: var(--color-neutral-200);
-
-  --color-background-action-critical-secondary-normal: var(--color-brand-400);
-  --color-background-action-critical-secondary-hover: var(--color-brand-500);
-  --color-background-action-critical-secondary-active: var(--color-brand-400);
-  --color-background-action-critical-secondary-disabled: var(
-    --color-neutral-200
-  );
-}

package/src/classNames.ts

@@ -1,174 +0,0 @@
-import clsx from "clsx";
-
-export const typography = {
-  display1: clsx(
-    "font-sans font-semibold",
-    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
-    "leading-display-1-mobile desktop:leading-display-1-desktop",
-  ),
-
-  display2: clsx(
-    "font-sans font-bold",
-    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
-    "leading-display-2-mobile desktop:leading-display-2-desktop",
-  ),
-
-  heading1: clsx(
-    "font-sans font-semibold",
-    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
-    "leading-heading-1-mobile desktop:leading-heading-1-desktop",
-  ),
-
-  heading2: clsx(
-    "font-sans font-normal",
-    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
-    "leading-heading-2-mobile desktop:leading-heading-2-desktop",
-  ),
-
-  heading3: clsx(
-    "font-sans font-semibold",
-    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
-    "leading-heading-3-mobile desktop:leading-heading-3-desktop",
-  ),
-
-  subheader: clsx(
-    "font-sans font-semibold",
-    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
-    "leading-subheader-mobile desktop:leading-subheader-desktop",
-  ),
-
-  link: clsx(
-    "font-sans font-normal",
-    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
-    "leading-link-mobile desktop:leading-link-desktop",
-  ),
-  buttonLabel: clsx(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop",
-  ),
-
-  label: clsx(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop",
-  ),
-
-  paragraph: clsx(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-paragraph-mobile desktop:leading-paragraph-desktop",
-  ),
-
-  caption: clsx(
-    "font-sans font-normal",
-    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
-    "leading-caption-mobile desktop:leading-caption-desktop",
-  ),
-
-  breadcrumb: clsx(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb",
-  ),
-};
-
-export const baseTransition = clsx(
-  "transition-colors duration-100 ease-in-out",
-);
-
-export const componentGap = clsx(
-  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap",
-);
-
-export const paddingUsingComponentGap = clsx(
-  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap",
-);
-
-export const paddingXUsingLayoutGroupGap = clsx(
-  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap",
-);
-
-export const paddingYUsingLayoutGroupGap = clsx(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap",
-);
-
-export const componentPadding = clsx(
-  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
-);
-
-export const componentPaddingBottom = clsx(
-  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
-);
-
-export const componentPaddingX = clsx(
-  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
-);
-
-export const componentPaddingY = clsx(
-  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
-);
-
-export const componentPaddingXUsingComponentGap = clsx(
-  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap",
-);
-
-export const componentPaddingYUsingComponentGap = clsx(
-  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap",
-);
-
-export const componentPaddingYUsingComponentGap2xMobile = clsx(
-  "py-[calc(var(--spacing-mobile-component-gap)_+_8px)] desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap",
-);
-
-export const componentPaddingMinusBorder = clsx(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]",
-);
-
-export const componentPaddingMinus2pxBorder = clsx(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]",
-);
-
-export const componentPaddingMinusBorderDesktop = clsx(
-  "p-[calc(var(--spacing-desktop-component-padding)_-_1px)]",
-);
-
-export const layoutPaddding = clsx(
-  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-);
-
-export const layoutPaddingBottom = clsx(
-  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
-);
-
-export const layoutPaddingY = clsx(
-  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
-);
-
-export const layoutPaddingX = clsx(
-  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
-);
-
-export const containerPaddingX = clsx(
-  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
-);
-
-export const containerPaddingY = clsx(
-  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
-);
-
-export const layoutGroupGapPaddingY = clsx(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap",
-);
-
-export const layoutGroupGap = clsx(
-  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap",
-);
-
-export const layoutGap = clsx(
-  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap",
-);
-
-export const gapUsingContainerPadding = clsx(
-  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding",
-);

package/src/components/AccessChangerTabItem.tsx

@@ -1,71 +0,0 @@
-import clsx from "clsx";
-import { ComponentProps } from "react";
-import { Subheader } from "./Subheader";
-import { Icon } from "./Icon";
-
-export function AccessChangerTabItem(
-  props: ComponentProps<"div"> & {
-    selected?: boolean;
-    loading?: boolean;
-    disabled?: boolean;
-    additionalText?: string;
-    borderTop?: boolean;
-    borderBottom?: boolean;
-  },
-) {
-  const {
-    additionalText,
-    borderTop,
-    borderBottom,
-    selected,
-    children,
-    loading,
-    disabled,
-    onClick,
-    ...rest
-  } = props;
-
-  return (
-    <div
-      className={clsx(
-        "flex items-center justify-between",
-        "py-[15px] px-4 gap-4",
-        "bg-background-grouped-primary-normal cursor-pointer",
-        borderTop && "border-t",
-        borderBottom && "border-b",
-        borderTop || borderBottom
-          ? "border-border-primary-normal"
-          : "border-transparent",
-        selected
-          ? "text-text-action-primary-normal"
-          : "text-text-primary-normal hover:text-text-action-primary-normal",
-      )}
-      onClick={(e) => {
-        if (loading || disabled) {
-          return;
-        }
-
-        onClick?.(e);
-      }}
-      {...rest}
-    >
-      <div className="flex flex-col gap-0.5">
-        <Subheader>{children}</Subheader>
-        {additionalText && (
-          <p className="text-text-primary-normal text-[13px] leading-[1.38462] font-normal">
-            {additionalText}
-          </p>
-        )}
-      </div>
-
-      {loading && !selected && <Icon name="cached" size={16} />}
-
-      {selected && (
-        <div className="flex items-center gap-1">
-          <div className="rounded-full size-2 bg-text-action-primary-normal"></div>
-          <Subheader>Active</Subheader>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/Accordion.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import { typography } from "../classNames";
-import { Card } from "./Card";
-import { Icon } from "./Icon";
-import { Stack } from "./Stack";
-import { Paragraph } from "./Paragraph";
-
-interface AccordionProps {
-  title: React.ReactNode;
-  children: React.ReactNode;
-  isOpen: boolean;
-  before?: React.ReactNode;
-  after?: React.ReactNode;
-  onClick?: () => void;
-  className?: string;
-  disabled?: boolean;
-  testid?: string;
-  titleAlign?: "start" | "center" | "end";
-}
-
-export function Accordion(props: AccordionProps) {
-  const {
-    isOpen,
-    onClick,
-    className,
-    disabled,
-    testid,
-    titleAlign = "center",
-  } = props;
-  const {
-    title,
-    before,
-    after = (
-      <Icon
-        name="expand_more"
-        className={clsx(
-          "text-icon-primary-normal transform transition-all duration-300 ease-in-out",
-          isOpen ? "rotate-180" : "rotate-0",
-        )}
-      />
-    ),
-    children,
-  } = props;
-
-  function handleClick(e: React.MouseEvent<HTMLDivElement>) {
-    e.stopPropagation();
-    e.preventDefault();
-    onClick?.();
-  }
-
-  return (
-    <Card
-      className={clsx(
-        "overflow-hidden select-none",
-        { "cursor-pointer": !disabled },
-        className,
-      )}
-      selected={isOpen}
-      onClick={handleClick}
-      testid={testid}
-    >
-      <Stack
-        sizing="component"
-        horizontal
-        horizontalMobile
-        justify="between"
-        items="center"
-      >
-        <Stack sizing="layout-group" horizontal items={titleAlign}>
-          {before}
-          {typeof title === "string" ? (
-            <Paragraph
-              testid={testid ? `${testid}-title` : undefined}
-              className="text-text-primary-normal"
-            >
-              {title}
-            </Paragraph>
-          ) : (
-            title
-          )}
-        </Stack>
-        {after}
-      </Stack>
-      <div
-        className={clsx("grid transition-all duration-300 ease-in-out")}
-        style={{
-          gridTemplateRows: isOpen ? "1fr" : "0fr",
-        }}
-        data-testid={testid ? `${testid}-content-container` : undefined}
-      >
-        <div className="overflow-hidden">
-          <div
-            className={clsx(
-              typography.paragraph,
-              "text-text-primary-normal desktop:pt-desktop-layout-gap",
-              "flex flex-col gap-desktop-layout-gap",
-            )}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    </Card>
-  );
-}

package/src/components/Alert.tsx

@@ -1,81 +0,0 @@
-import clsx from "clsx";
-import { Button } from "./Button";
-import { Heading2 } from "./Heading";
-import { Icon } from "./Icon";
-import { Paragraph } from "./Paragraph";
-import { Stack } from "./Stack";
-import { HTMLAttributes, useCallback } from "react";
-
-export type AlertVariant = "error" | "warning";
-
-export interface AlertProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "className"> {
-  id?: string;
-  testId?: string;
-  variant: AlertVariant;
-  title: string;
-  message: string;
-  dismissible?: boolean;
-  onClose?: () => void;
-}
-export function Alert({
-  id,
-  testId,
-  variant,
-  title,
-  message,
-  dismissible = false,
-  onClose,
-  ...rest
-}: AlertProps) {
-  const isError = variant === "error";
-
-  const handleClose = useCallback(() => {
-    if (onClose) onClose();
-  }, [onClose]);
-
-  return (
-    <Stack
-      id={id}
-      data-testid={testId}
-      sizing="container"
-      backgroundColor="background-grouped-primary-normal"
-      borderColor="border-primary-normal"
-      items="start"
-      elevation={4}
-      rounded
-      padding
-      horizontal
-      horizontalMobile
-      {...rest}
-    >
-      <div
-        className={clsx("min-w-[2px] min-h-full flex", {
-          "bg-background-critical-normal": isError,
-          "bg-background-warning-normal": !isError,
-        })}
-      />
-      <span
-        className={clsx({
-          "text-icon-critical-normal": isError,
-          "text-icon-warning-normal": !isError,
-        })}
-      >
-        <Icon name="warning" />
-      </span>
-      <Stack flexGrow={1} sizing="component">
-        <Heading2>{title}</Heading2>
-        <Paragraph>{message}</Paragraph>
-      </Stack>
-      {dismissible && (
-        <Button
-          aria-label="Dismiss alert"
-          iconOnly
-          variant="tertiary"
-          leftIcon={<Icon name="close" />}
-          onClick={handleClose}
-        />
-      )}
-    </Stack>
-  );
-}