@d4gger/design-system 3.0.1 → 4.0.0

package/dist/components/qrCode/QrCode.cjs

@@ -53,29 +53,32 @@ const QRCode = React.forwardRef((props, forwardedRef) => {
     marginSize = 0,
     fgColor,
     bgColor,
+    children,
     ...restProps
   } = (0, import_extractProps.extractProps)(props, import_qrCode.qrCodePropDefs);
   const Comp = asChild ? import_react_slot.Slot : "div";
   const resolvedSize = sizeMap[size] ?? 192;
+  const matrix = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_qrcode.QRCodeSVG,
+    {
+      value,
+      size: resolvedSize,
+      level,
+      marginSize,
+      fgColor: fgColor ?? "var(--dsx-color-on-surface)",
+      bgColor: bgColor ?? "var(--dsx-color-surface-raised)"
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Comp,
     {
+      role: "img",
       ...restProps,
       ref: forwardedRef,
       className: (0, import_classnames.default)("dsx-qr-code", className),
       "data-slot": "qr-code",
       "data-size": size,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_qrcode.QRCodeSVG,
-        {
-          value,
-          size: resolvedSize,
-          level,
-          marginSize,
-          fgColor: fgColor ?? "var(--dsx-color-on-surface)",
-          bgColor: bgColor ?? "var(--dsx-color-surface-raised)"
-        }
-      )
+      children: asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, matrix) : matrix
     }
   );
 });

package/dist/components/qrCode/QrCode.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/qrCode/QrCode.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { QRCodeSVG } from 'qrcode.react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { qrCodePropDefs } from './qrCode.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype QRCodeOwnProps = GetPropDefTypes<typeof qrCodePropDefs>\n\ninterface QRCodeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'>, QRCodeOwnProps {\n  value: string\n  level?: 'L' | 'M' | 'Q' | 'H'\n  marginSize?: number\n  fgColor?: string\n  bgColor?: string\n}\n\nconst sizeMap: Record<string, number> = {\n  sm: 128,\n  md: 192,\n  lg: 256,\n}\n\nconst QRCode = React.forwardRef<HTMLDivElement, QRCodeProps>((props, forwardedRef) => {\n  const size = props.size ?? 'md'\n  const {\n    asChild,\n    className,\n    value,\n    level = 'M',\n    marginSize = 0,\n    fgColor,\n    bgColor,\n    ...restProps\n  } = extractProps(props, qrCodePropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const resolvedSize = sizeMap[size] ?? 192\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-qr-code', className)}\n      data-slot=\"qr-code\"\n      data-size={size}\n    >\n      <QRCodeSVG\n        value={value}\n        size={resolvedSize}\n        level={level}\n        marginSize={marginSize}\n        fgColor={fgColor ?? 'var(--dsx-color-on-surface)'}\n        bgColor={bgColor ?? 'var(--dsx-color-surface-raised)'}\n      />\n    </Comp>\n  )\n})\nQRCode.displayName = 'QRCode'\n\nexport { QRCode }\nexport type { QRCodeOwnProps, QRCodeProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AACrB,oBAA0B;AAE1B,0BAA6B;AAC7B,oBAA+B;AA2CzB;AA7BN,MAAM,UAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,iBAAiB;AACpF,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,4BAAc;AACtC,QAAM,OAAO,UAAU,yBAAO;AAC9B,QAAM,eAAe,QAAQ,IAAI,KAAK;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,eAAe,SAAS;AAAA,MAC9C,aAAU;AAAA,MACV,aAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,SAAS,WAAW;AAAA;AAAA,MACtB;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,OAAO,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { QRCodeSVG } from 'qrcode.react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { qrCodePropDefs } from './qrCode.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype QRCodeOwnProps = GetPropDefTypes<typeof qrCodePropDefs>\n\ninterface QRCodeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'>, QRCodeOwnProps {\n  value: string\n  level?: 'L' | 'M' | 'Q' | 'H'\n  marginSize?: number\n  fgColor?: string\n  bgColor?: string\n}\n\nconst sizeMap: Record<string, number> = {\n  sm: 128,\n  md: 192,\n  lg: 256,\n}\n\nconst QRCode = React.forwardRef<HTMLDivElement, QRCodeProps>((props, forwardedRef) => {\n  const size = props.size ?? 'md'\n  const {\n    asChild,\n    className,\n    value,\n    level = 'M',\n    marginSize = 0,\n    fgColor,\n    bgColor,\n    children,\n    ...restProps\n  } = extractProps(props, qrCodePropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const resolvedSize = sizeMap[size] ?? 192\n  const matrix = (\n    <QRCodeSVG\n      value={value}\n      size={resolvedSize}\n      level={level}\n      marginSize={marginSize}\n      fgColor={fgColor ?? 'var(--dsx-color-on-surface)'}\n      bgColor={bgColor ?? 'var(--dsx-color-surface-raised)'}\n    />\n  )\n\n  return (\n    <Comp\n      role=\"img\"\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-qr-code', className)}\n      data-slot=\"qr-code\"\n      data-size={size}\n    >\n      {asChild && React.isValidElement(children)\n        ? React.cloneElement(children, undefined, matrix)\n        : matrix}\n    </Comp>\n  )\n})\nQRCode.displayName = 'QRCode'\n\nexport { QRCode }\nexport type { QRCodeOwnProps, QRCodeProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AACrB,oBAA0B;AAE1B,0BAA6B;AAC7B,oBAA+B;AAoC3B;AAtBJ,MAAM,UAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,iBAAiB;AACpF,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,4BAAc;AACtC,QAAM,OAAO,UAAU,yBAAO;AAC9B,QAAM,eAAe,QAAQ,IAAI,KAAK;AACtC,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,SAAS,WAAW;AAAA;AAAA,EACtB;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,eAAe,SAAS;AAAA,MAC9C,aAAU;AAAA,MACV,aAAW;AAAA,MAEV,qBAAW,MAAM,eAAe,QAAQ,IACrC,MAAM,aAAa,UAAU,QAAW,MAAM,IAC9C;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,OAAO,cAAc;",
   "names": ["classNames"]
 }

package/dist/components/qrCode/QrCode.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"QrCode.d.cts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAiCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"QrCode.d.cts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAwCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/qrCode/QrCode.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"QrCode.d.mts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAiCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"QrCode.d.mts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAwCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/qrCode/QrCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QrCode.d.ts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAiCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"QrCode.d.ts","sourceRoot":"","sources":["../../../src/components/qrCode/QrCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,cAAc,GAAG,eAAe,CAAC,OAAO,cAAc,CAAC,CAAA;AAE5D,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,cAAc;IAChG,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAQD,QAAA,MAAM,MAAM,oFAwCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA;AACjB,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/qrCode/QrCode.js

@@ -20,29 +20,32 @@ const QRCode = React.forwardRef((props, forwardedRef) => {
     marginSize = 0,
     fgColor,
     bgColor,
+    children,
     ...restProps
   } = extractProps(props, qrCodePropDefs);
   const Comp = asChild ? Slot : "div";
   const resolvedSize = sizeMap[size] ?? 192;
+  const matrix = /* @__PURE__ */ jsx(
+    QRCodeSVG,
+    {
+      value,
+      size: resolvedSize,
+      level,
+      marginSize,
+      fgColor: fgColor ?? "var(--dsx-color-on-surface)",
+      bgColor: bgColor ?? "var(--dsx-color-surface-raised)"
+    }
+  );
   return /* @__PURE__ */ jsx(
     Comp,
     {
+      role: "img",
       ...restProps,
       ref: forwardedRef,
       className: classNames("dsx-qr-code", className),
       "data-slot": "qr-code",
       "data-size": size,
-      children: /* @__PURE__ */ jsx(
-        QRCodeSVG,
-        {
-          value,
-          size: resolvedSize,
-          level,
-          marginSize,
-          fgColor: fgColor ?? "var(--dsx-color-on-surface)",
-          bgColor: bgColor ?? "var(--dsx-color-surface-raised)"
-        }
-      )
+      children: asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, matrix) : matrix
     }
   );
 });

package/dist/components/qrCode/QrCode.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/qrCode/QrCode.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { QRCodeSVG } from 'qrcode.react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { qrCodePropDefs } from './qrCode.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype QRCodeOwnProps = GetPropDefTypes<typeof qrCodePropDefs>\n\ninterface QRCodeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'>, QRCodeOwnProps {\n  value: string\n  level?: 'L' | 'M' | 'Q' | 'H'\n  marginSize?: number\n  fgColor?: string\n  bgColor?: string\n}\n\nconst sizeMap: Record<string, number> = {\n  sm: 128,\n  md: 192,\n  lg: 256,\n}\n\nconst QRCode = React.forwardRef<HTMLDivElement, QRCodeProps>((props, forwardedRef) => {\n  const size = props.size ?? 'md'\n  const {\n    asChild,\n    className,\n    value,\n    level = 'M',\n    marginSize = 0,\n    fgColor,\n    bgColor,\n    ...restProps\n  } = extractProps(props, qrCodePropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const resolvedSize = sizeMap[size] ?? 192\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-qr-code', className)}\n      data-slot=\"qr-code\"\n      data-size={size}\n    >\n      <QRCodeSVG\n        value={value}\n        size={resolvedSize}\n        level={level}\n        marginSize={marginSize}\n        fgColor={fgColor ?? 'var(--dsx-color-on-surface)'}\n        bgColor={bgColor ?? 'var(--dsx-color-surface-raised)'}\n      />\n    </Comp>\n  )\n})\nQRCode.displayName = 'QRCode'\n\nexport { QRCode }\nexport type { QRCodeOwnProps, QRCodeProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AA2CzB;AA7BN,MAAM,UAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,iBAAiB;AACpF,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,cAAc;AACtC,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,eAAe,QAAQ,IAAI,KAAK;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,eAAe,SAAS;AAAA,MAC9C,aAAU;AAAA,MACV,aAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,SAAS,WAAW;AAAA;AAAA,MACtB;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,OAAO,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { QRCodeSVG } from 'qrcode.react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { qrCodePropDefs } from './qrCode.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype QRCodeOwnProps = GetPropDefTypes<typeof qrCodePropDefs>\n\ninterface QRCodeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'>, QRCodeOwnProps {\n  value: string\n  level?: 'L' | 'M' | 'Q' | 'H'\n  marginSize?: number\n  fgColor?: string\n  bgColor?: string\n}\n\nconst sizeMap: Record<string, number> = {\n  sm: 128,\n  md: 192,\n  lg: 256,\n}\n\nconst QRCode = React.forwardRef<HTMLDivElement, QRCodeProps>((props, forwardedRef) => {\n  const size = props.size ?? 'md'\n  const {\n    asChild,\n    className,\n    value,\n    level = 'M',\n    marginSize = 0,\n    fgColor,\n    bgColor,\n    children,\n    ...restProps\n  } = extractProps(props, qrCodePropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const resolvedSize = sizeMap[size] ?? 192\n  const matrix = (\n    <QRCodeSVG\n      value={value}\n      size={resolvedSize}\n      level={level}\n      marginSize={marginSize}\n      fgColor={fgColor ?? 'var(--dsx-color-on-surface)'}\n      bgColor={bgColor ?? 'var(--dsx-color-surface-raised)'}\n    />\n  )\n\n  return (\n    <Comp\n      role=\"img\"\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-qr-code', className)}\n      data-slot=\"qr-code\"\n      data-size={size}\n    >\n      {asChild && React.isValidElement(children)\n        ? React.cloneElement(children, undefined, matrix)\n        : matrix}\n    </Comp>\n  )\n})\nQRCode.displayName = 'QRCode'\n\nexport { QRCode }\nexport type { QRCodeOwnProps, QRCodeProps }\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAoC3B;AAtBJ,MAAM,UAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,iBAAiB;AACpF,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,cAAc;AACtC,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,eAAe,QAAQ,IAAI,KAAK;AACtC,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,SAAS,WAAW;AAAA;AAAA,EACtB;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,eAAe,SAAS;AAAA,MAC9C,aAAU;AAAA,MACV,aAAW;AAAA,MAEV,qBAAW,MAAM,eAAe,QAAQ,IACrC,MAAM,aAAa,UAAU,QAAW,MAAM,IAC9C;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,OAAO,cAAc;",
   "names": []
 }

package/dist/components/resizable.css

@@ -10,6 +10,8 @@
   display: flex;
   width: 100%;
   height: 100%;
+  min-width: 0;
+  min-height: 0;
 }
 
 .dsx-resizable-group[data-orientation='horizontal'] {
@@ -32,6 +34,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
+  z-index: var(--dsx-z-index-elevated);
   background-color: transparent;
   user-select: none;
   touch-action: none;
@@ -59,7 +62,7 @@
 }
 
 .dsx-resizable-group[data-orientation='horizontal'] > .dsx-resizable-handle {
-  width: var(--dsx-resizable-handle-thickness-active);
+  width: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: col-resize;
 }
 
@@ -69,7 +72,7 @@
 }
 
 .dsx-resizable-group[data-orientation='vertical'] > .dsx-resizable-handle {
-  height: var(--dsx-resizable-handle-thickness-active);
+  height: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: row-resize;
 }
 
@@ -106,7 +109,7 @@
 }
 
 .dsx-resizable-group-direction-horizontal > .dsx-resizable-handle {
-  width: var(--dsx-resizable-handle-thickness-active);
+  width: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: col-resize;
 }
 
@@ -116,7 +119,7 @@
 }
 
 .dsx-resizable-group-direction-vertical > .dsx-resizable-handle {
-  height: var(--dsx-resizable-handle-thickness-active);
+  height: max(var(--dsx-size-md), var(--dsx-resizable-handle-thickness-active));
   cursor: row-resize;
 }
 
@@ -134,6 +137,19 @@
   border-radius: var(--dsx-resizable-grip-radius);
 }
 
+.dsx-resizable-handle:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+  z-index: var(--dsx-z-index-elevated);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-resizable-handle,
+  .dsx-resizable-handle::before {
+    transition: none;
+  }
+}
+
 .dsx-resizable-group-direction-horizontal > .dsx-resizable-handle-grip .dsx-resizable-handle__grip {
   width: var(--dsx-space-xs);
   height: var(--dsx-size-xs);

package/dist/components/rich-text-editor.css

@@ -41,11 +41,15 @@
   box-shadow: none;
 }
 
-.dsx-rich-text-editor__toolbar {
+.dsx-rich-text-editor__toolbar.dsx-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--dsx-space-xs);
+  gap: var(--dsx-space-sm) var(--dsx-space-md);
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   background: var(--dsx-color-surface-editor-toolbar);
@@ -56,13 +60,15 @@
 
 .dsx-rich-text-editor__toolbar-group {
   display: inline-flex;
+  flex-wrap: wrap;
+  max-width: 100%;
   min-width: 0;
   align-items: center;
   gap: var(--dsx-space-xs);
-  padding: var(--dsx-space-xs);
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-panel-border-translucent);
+  padding: 0;
+  border: 0;
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-effect-gray-alpha-3);
+  background: transparent;
 }
 
 .dsx-rich-text-editor__toolbar-label {
@@ -76,13 +82,14 @@
 }
 
 .dsx-rich-text-editor__toolbar-button {
-  min-height: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
-  min-width: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  min-height: var(--dsx-density-control-height-lg);
+  min-width: var(--dsx-density-control-height-lg);
   padding-inline: var(--dsx-space-xs);
   white-space: nowrap;
 }
 
-.dsx-rich-text-editor__toolbar-button[data-active='true'] {
+.dsx-rich-text-editor__toolbar-button[data-active='true'],
+.dsx-rich-text-editor__toolbar-button[aria-pressed='true'] {
   background: var(--dsx-color-high-contrast);
   color: var(--dsx-color-on-high-contrast);
 }
@@ -111,6 +118,7 @@
   position: absolute;
   inset-block-start: var(--dsx-space-md);
   inset-inline-start: var(--dsx-space-md);
+  inset-inline-end: var(--dsx-space-md);
   pointer-events: none;
   color: var(--dsx-color-on-surface-variant);
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
@@ -123,6 +131,8 @@
 }
 
 .dsx-rich-text-editor__prosemirror {
+  min-width: 0;
+  overflow-wrap: anywhere;
   min-height: var(--dsx-rich-text-editor-min-height, 220px);
   padding: var(--dsx-space-md);
   outline: none;
@@ -180,7 +190,7 @@
   margin: var(--dsx-space-md) 0;
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   padding-inline-start: var(--dsx-space-lg);
-  border-inline-start: var(--dsx-border-width-lg) solid var(--dsx-color-primary);
+  border-inline-start: var(--dsx-border-width-sm) solid var(--dsx-color-accent-border);
   border-radius: 0 var(--dsx-rounded-md) var(--dsx-rounded-md) 0;
   background: var(--dsx-effect-hover-primary);
   color: var(--dsx-color-on-surface-variant);
@@ -198,9 +208,9 @@
 .dsx-rich-text-editor__prosemirror code {
   border-radius: var(--dsx-rounded-sm);
   padding: var(--dsx-space-0-5) var(--dsx-space-xs);
-  background: var(--dsx-color-background);
-  color: var(--dsx-color-primary-container);
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  background: var(--dsx-code-soft-background);
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-code-font-family);
   font-size: 0.92em;
 }
 
@@ -209,8 +219,8 @@
   margin: var(--dsx-space-md) 0;
   padding: var(--dsx-space-md);
   border-radius: var(--dsx-rounded-md);
-  background: var(--dsx-color-background);
-  color: var(--dsx-color-on-background);
+  background: var(--dsx-code-soft-background);
+  color: var(--dsx-color-on-surface);
 }
 
 .dsx-rich-text-editor__prosemirror pre code {
@@ -219,6 +229,19 @@
   color: inherit;
 }
 
+.dsx-rich-text-editor__prosemirror img {
+  max-width: 100%;
+  height: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-rich-text-editor,
+  .dsx-rich-text-editor__toolbar,
+  .dsx-rich-text-editor__area {
+    transition: none;
+  }
+}
+
 .dsx-rich-text-editor__status {
   display: flex;
   align-items: center;
@@ -249,3 +272,16 @@
   background: var(--dsx-color-high-contrast);
   color: var(--dsx-color-on-high-contrast);
 }
+.dsx-rich-text-editor__toolbar-group:empty { display: none; }
+.dsx-editor-tools__popover { display: grid; gap: var(--dsx-space-sm); min-width: 0; width: min(var(--dsx-dialog-content-width-sm), var(--radix-popover-content-available-width)); }
+.dsx-editor-tools__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-sm); }
+.dsx-editor-tools__popover.dsx-editor-tools__link { width: min(var(--dsx-rich-text-editor-link-popover-width), var(--radix-popover-content-available-width)); }
+.dsx-editor-tools__link .dsx-popover__title { font-family: var(--dsx-typography-label-large-font-family), sans-serif; font-size: var(--dsx-typography-label-large-font-size); line-height: var(--dsx-typography-label-large-line-height); }
+.dsx-editor-tools__link .dsx-button { min-height: var(--dsx-size-2xl); }
+.dsx-editor-tools__choices { display: grid; gap: var(--dsx-space-xs); max-height: var(--radix-popover-content-available-height); overflow-y: auto; min-width: 0; }
+.dsx-editor-tools__choices .dsx-button { justify-content: flex-start; text-align: start; white-space: normal; }
+.dsx-editor-tools__choices small { display: block; color: var(--dsx-color-on-surface-variant); overflow-wrap: anywhere; }
+.dsx-editor-token { display: inline; padding: var(--dsx-space-0-5) var(--dsx-space-xs); border: var(--dsx-border-width-sm) solid var(--dsx-color-accent-border); border-radius: var(--dsx-rounded-sm); background: var(--dsx-color-primary-container); color: var(--dsx-color-on-primary-container); white-space: normal; }
+.dsx-editor-token--unknown { border-style: dashed; border-color: var(--dsx-color-error); color: var(--dsx-color-error); background: var(--dsx-color-surface); }
+.dsx-rich-text-editor__prosemirror h4 { font-size: var(--dsx-typography-label-large-font-size); line-height: var(--dsx-typography-label-large-line-height); }
+.dsx-editor-tools__suggestions { display: flex; flex-wrap: wrap; width: 100%; align-items: center; gap: var(--dsx-space-sm); padding: var(--dsx-space-sm); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-raised); }

package/dist/components/richTextEditor/EditorTools.cjs

@@ -0,0 +1,226 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var EditorTools_exports = {};
+__export(EditorTools_exports, {
+  EditorTools: () => EditorTools
+});
+module.exports = __toCommonJS(EditorTools_exports);
+var React = __toESM(require("react"), 1);
+var import_state = require("@tiptap/pm/state");
+var import_Button = require("../button/Button");
+var import_Icon = require("../icon/Icon");
+var import_Toolbar = require("../toolbar/Toolbar");
+var import_DropdownMenu = require("../dropdownMenu/DropdownMenu");
+var import_Popover = require("../popover/Popover");
+var import_TextField = require("../textField/TextField");
+var import_VisuallyHidden = require("../visuallyHidden/VisuallyHidden");
+var import_MentionSuggestions = require("./MentionSuggestions");
+var import_jsx_runtime = require("react/jsx-runtime");
+const defaults = ["style", "bold", "italic", "strike", "code", "bulletList", "orderedList", "blockquote", "codeBlock", "link", "clear", "history"];
+function Control({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Toolbar.Toolbar.Button, { asChild: true, disabled: props.disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "sm", variant: "ghost", className: "dsx-rich-text-editor__toolbar-button", ...props, children }) });
+}
+function TokenPicker({ editor, disabled, records, kind }) {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [active, setActive] = React.useState(0);
+  const listId = React.useId();
+  const matches = records.filter((record) => `${record.label} ${"key" in record ? record.key : record.id}`.toLowerCase().includes(query.toLowerCase()));
+  const insert = (index) => {
+    const record = matches[index];
+    if (!record) return;
+    editor.chain().focus().insertContent({ type: kind === "variable" ? "dsxVariable" : "dsxMention", attrs: "key" in record ? { key: record.key } : { userId: record.id } }).run();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover, { open, onOpenChange: (next) => {
+    setOpen(next);
+    setQuery("");
+    setActive(0);
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled, children: kind === "variable" ? "Variable" : "Mention" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover.Content, { className: "dsx-editor-tools__popover", align: "start", onCloseAutoFocus: (event) => {
+      event.preventDefault();
+      editor.commands.focus();
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Title, { children: kind === "variable" ? "Insert variable" : "Mention someone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Description, { children: kind === "variable" ? "Insert a key. Its value is resolved by your application." : "Select a person to insert their stable identity." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField.Input, { "aria-label": kind === "variable" ? "Search variables" : "Search people", role: "combobox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": matches.length ? `${listId}-${active}` : void 0, value: query, onChange: (event) => {
+        setQuery(event.target.value);
+        setActive(0);
+      }, onKeyDown: (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          setActive((index) => Math.max(0, Math.min(matches.length - 1, index + (event.key === "ArrowDown" ? 1 : -1))));
+        }
+        if (event.key === "Enter") {
+          event.preventDefault();
+          insert(active);
+        }
+      } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: listId, role: "listbox", "aria-label": kind === "variable" ? "Variables" : "People", className: "dsx-editor-tools__choices", children: [
+        matches.map((record, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { id: `${listId}-${index}`, role: "option", "aria-selected": active === index, type: "button", variant: active === index ? "secondary" : "ghost", size: "lg", onClick: () => insert(index), onPointerMove: () => setActive(index), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          record.label,
+          "sensitive" in record && record.sensitive ? " \xB7 Sensitive" : "",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: "key" in record ? record.key : record.id })
+        ] }) }, "key" in record ? record.key : record.id)),
+        !matches.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", children: "No matches" }) : null
+      ] })
+    ] })
+  ] });
+}
+function LinkControl({ editor, disabled }) {
+  const [open, setOpen] = React.useState(false);
+  const [url, setUrl] = React.useState("");
+  const [error, setError] = React.useState("");
+  const urlId = React.useId();
+  const selection = React.useRef({ from: 1, to: 1 });
+  const save = () => {
+    let href;
+    try {
+      const parsed = new URL(url);
+      if (!["https:", "http:", "mailto:", "tel:"].includes(parsed.protocol)) throw new Error();
+      href = parsed.href;
+    } catch {
+      setError("Enter a valid https, http, mailto or tel URL.");
+      return;
+    }
+    const chain = editor.chain().focus().setTextSelection(selection.current);
+    if (selection.current.from === selection.current.to && !editor.isActive("link")) chain.insertContent({ type: "text", text: href, marks: [{ type: "link", attrs: { href } }] }).run();
+    else chain.extendMarkRange("link").setLink({ href }).run();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover, { open, onOpenChange: (next) => {
+    if (next) {
+      selection.current = { from: editor.state.selection.from, to: editor.state.selection.to };
+      setUrl(editor.getAttributes("link").href ?? "");
+      setError("");
+    }
+    ;
+    setOpen(next);
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled, "aria-label": "Link", "aria-pressed": editor.isActive("link"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "link", size: "sm" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover.Content, { className: "dsx-editor-tools__popover dsx-editor-tools__link", align: "start", onCloseAutoFocus: (event) => {
+      event.preventDefault();
+      editor.commands.focus();
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Title, { children: "Edit link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.Popover.Description, { children: "Link the selected text or insert a URL at the caret." }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField, { id: urlId, label: "URL", errorText: error || void 0, invalid: Boolean(error), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.TextField.Input, { value: url, onChange: (event) => {
+        setUrl(event.target.value);
+        setError("");
+      }, onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          save();
+        }
+      } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-editor-tools__actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "md", onClick: save, children: "Save link" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "md", variant: "outline", disabled: !editor.isActive("link"), onClick: () => {
+          editor.chain().focus().setTextSelection(selection.current).extendMarkRange("link").unsetLink().run();
+          setOpen(false);
+        }, children: "Remove link" })
+      ] })
+    ] })
+  ] });
+}
+function EditorTools({ editor, disabled, tools = defaults, headingLevels, insertItems = [], variables = [], mentions = [] }) {
+  const [, refresh] = React.useReducer((value) => value + 1, 0);
+  React.useEffect(() => {
+    if (!editor) return;
+    editor.on("transaction", refresh);
+    return () => {
+      editor.off("transaction", refresh);
+    };
+  }, [editor]);
+  const available = (tool, name) => tools.includes(tool) && (!name || Boolean(editor?.schema.nodes[name] || editor?.schema.marks[name]));
+  const levels = headingLevels ?? editor?.extensionManager.extensions.find((extension) => extension.name === "heading")?.options.levels ?? [1, 2, 3];
+  const format = (label, icon, name, run) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled, "aria-label": label, "aria-pressed": editor?.isActive(name), onMouseDown: (event) => event.preventDefault(), onClick: run, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: icon, size: "sm" }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    available("style") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "Block style", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Control, { disabled, children: [
+        "Text style ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "chevron-down", size: "sm" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu.Content, { onCloseAutoFocus: (event) => {
+        event.preventDefault();
+        editor?.commands.focus();
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => editor?.chain().focus().setParagraph().run(), children: "Paragraph" }),
+        editor?.schema.nodes.heading ? levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => editor.chain().focus().toggleHeading({ level }).run(), children: [
+          "Heading ",
+          level
+        ] }, level)) : null,
+        available("blockquote", "blockquote") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => editor?.chain().focus().toggleBlockquote().run(), children: "Quote block" }) : null,
+        available("codeBlock", "codeBlock") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => editor?.chain().focus().toggleCodeBlock().run(), children: "Code block" }) : null
+      ] })
+    ] }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "Text style", children: [
+      available("bold", "bold") ? format("Bold", "bold", "bold", () => editor?.chain().focus().toggleBold().run()) : null,
+      available("italic", "italic") ? format("Italic", "italic", "italic", () => editor?.chain().focus().toggleItalic().run()) : null,
+      available("strike", "strike") ? format("Strikethrough", "strikethrough", "strike", () => editor?.chain().focus().toggleStrike().run()) : null,
+      available("code", "code") ? format("Inline code", "code", "code", () => editor?.chain().focus().toggleCode().run()) : null,
+      available("bulletList", "bulletList") ? format("Bulleted list", "list", "bulletList", () => editor?.chain().focus().toggleBulletList().run()) : null,
+      available("orderedList", "orderedList") ? format("Numbered list", "list-ordered", "orderedList", () => editor?.chain().focus().toggleOrderedList().run()) : null
+    ] }),
+    editor ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "Insert", children: [
+      available("link", "link") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkControl, { editor, disabled }) : null,
+      insertItems.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Control, { disabled, children: [
+          "Insert ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "plus", size: "sm" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Content, { onCloseAutoFocus: (event) => {
+          event.preventDefault();
+          editor.commands.focus();
+        }, children: insertItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenu.Item, { onSelect: () => {
+          if (editor.state.selection instanceof import_state.NodeSelection) editor.commands.command(({ tr }) => {
+            const paragraph = editor.schema.nodes.paragraph;
+            if (!paragraph) return false;
+            let point = tr.doc.resolve(tr.selection.to);
+            while (point.depth > 0 && !point.parent.canReplaceWith(point.index(), point.index(), paragraph)) point = tr.doc.resolve(point.after());
+            tr.insert(point.pos, paragraph.create());
+            tr.setSelection(import_state.TextSelection.create(tr.doc, point.pos + 1));
+            return true;
+          });
+          item.insert(editor);
+        }, children: item.label }, item.id)) })
+      ] }) : null,
+      variables.length && editor.schema.nodes.dsxVariable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenPicker, { editor, disabled, kind: "variable", records: variables }) : null,
+      mentions.length && editor.schema.nodes.dsxMention ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenPicker, { editor, disabled, kind: "mention", records: mentions }) : null,
+      available("clear") ? format("Clear formatting", "eraser", "", () => editor.chain().focus().clearNodes().unsetAllMarks().run()) : null
+    ] }) : null,
+    available("history") ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "History", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled: disabled || !editor?.can().undo(), "aria-label": "Undo", onMouseDown: (event) => event.preventDefault(), onClick: () => editor?.chain().focus().undo().run(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "undo", size: "sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Control, { disabled: disabled || !editor?.can().redo(), "aria-label": "Redo", onMouseDown: (event) => event.preventDefault(), onClick: () => editor?.chain().focus().redo().run(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "redo", size: "sm" }) })
+    ] }) : null,
+    editor && mentions.length && editor.schema.nodes.dsxMention ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MentionSuggestions.MentionSuggestions, { editor, mentions }) : null
+  ] });
+}
+//# sourceMappingURL=EditorTools.cjs.map