@crystallize/design-system 1.23.2 → 1.23.4

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-VYFBR7S4.mjs";
+} from "./chunk-XAHDYFIZ.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -312,7 +312,7 @@ function StackIcon({ type, children, size = 18 }) {
 }
 
 // src/tag/tag.tsx
-import { cva as cva5 } from "class-variance-authority";
+import { cva as cva5, cx as cx4 } from "class-variance-authority";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var tagStyles = cva5("c-tag", {
   variants: {
@@ -333,7 +333,16 @@ var tagStyles = cva5("c-tag", {
     size: "xs"
   }
 });
-function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }) {
+function Tag({
+  children,
+  className,
+  variant,
+  size,
+  prepend,
+  onRemove,
+  showRemoveOnHover,
+  ...delegated
+}) {
   return /* @__PURE__ */ jsxs6("div", {
     className: tagStyles({ className, variant, size }),
     ...delegated,
@@ -345,7 +354,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
       children,
       onRemove && /* @__PURE__ */ jsxs6("button", {
         type: "button",
-        className: "c-tag__remove-button",
+        className: cx4("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
           e.stopPropagation();
           onRemove();
@@ -368,7 +377,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-PXZQZRPK.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-3M2LH5IE.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx12(Suspense, {
     fallback: null,
@@ -382,7 +391,7 @@ var RichTextEditor = (props) => {
 import { Toaster } from "sonner";
 
 // src/toast/toast.tsx
-import { cva as cva6, cx as cx4 } from "class-variance-authority";
+import { cva as cva6, cx as cx5 } from "class-variance-authority";
 import { toast as sonnerToast } from "sonner";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var toastStyles = cva6("c-toast", {
@@ -411,7 +420,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   sonnerToast.custom(
     (id) => /* @__PURE__ */ jsxs7("div", {
       "data-testid": `toast-${type}`,
-      className: cx4(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
+      className: cx5(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
         /* @__PURE__ */ jsx13("div", {
           children: /* @__PURE__ */ jsx13(ToastIcon, {

package/dist/{rich-text-editor-PXZQZRPK.mjs → rich-text-editor-3M2LH5IE.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-VYFBR7S4.mjs";
+} from "./chunk-XAHDYFIZ.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.23.2",
+  "version": "1.23.4",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/iconography/battery.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef, SVGProps } from 'react';
+
+type BatteryProps = SVGProps<SVGSVGElement>;
+
+type BatteryRef = SVGSVGElement;
+
+export const Battery = forwardRef<BatteryRef, BatteryProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
+      <path
+        fill="#BFF6F8"
+        d="M10.064 2.638a1.426 1.426 0 0 1 1.948-.522l6.176 3.565c.682.394.916 1.266.522 1.948l-6.774 11.733a1.426 1.426 0 0 1-1.948.522L3.812 16.32a1.426 1.426 0 0 1-.522-1.948l6.774-11.733Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="m17.831 6.299-6.175-3.566a.713.713 0 0 0-.974.261L3.908 14.727a.713.713 0 0 0 .26.974l6.176 3.566c.341.197.777.08.974-.261l6.774-11.733a.713.713 0 0 0-.26-.974Zm-5.819-4.183a1.426 1.426 0 0 0-1.948.522L3.29 14.37a1.426 1.426 0 0 0 .522 1.948l6.176 3.565c.682.394 1.554.16 1.948-.522L18.71 7.63a1.426 1.426 0 0 0-.522-1.948l-6.175-3.565Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="m13.95 8.997-1.882-1.086a.143.143 0 0 0-.155.008L9.326 9.801a.143.143 0 0 0 .012.24l.9.518a.143.143 0 0 1 .038.215L8.007 13.53c-.095.116.03.282.168.221l5.264-2.316a.143.143 0 0 0 .014-.254l-1.1-.635a.143.143 0 0 1-.007-.243l1.61-1.063a.143.143 0 0 0-.007-.243Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M11.702 7.63a.5.5 0 0 1 .543-.028l1.882 1.086a.5.5 0 0 1 .025.85l-1.322.872.8.462a.5.5 0 0 1-.048.89l-5.264 2.315-.144-.326.144.326c-.482.212-.92-.368-.587-.774l2.109-2.561-.68-.393a.5.5 0 0 1-.045-.836l2.587-1.882Zm.307.66L9.801 9.895l.614.354a.5.5 0 0 1 .136.75l-1.698 2.063 4.056-1.785-.735-.424a.5.5 0 0 1-.025-.848l.196.297-.196-.297 1.322-.873-1.462-.844Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="M13.605 2.212a.713.713 0 0 1 .974-.261l2.47 1.426a.713.713 0 0 1 .26.974l-.712 1.235-3.705-2.14.713-1.234Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="m16.692 3.994-2.47-1.426-.356.618 2.47 1.426.356-.618ZM14.58 1.951a.713.713 0 0 0-.974.26l-.713 1.236 3.705 2.139.713-1.235a.713.713 0 0 0-.261-.974l-2.47-1.426Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+Battery.displayName = 'BatteryIcon';

package/src/iconography/caret.tsx

@@ -6,8 +6,8 @@ type CaretRef = SVGSVGElement;
 
 export const Caret = forwardRef<CaretRef, CaretProps>((delegated, ref) => {
   return (
-    <svg ref={ref} width="8" height="8" viewBox="0 0 17 15" fill="none" {...delegated}>
-      <path d="M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z" stroke="#5B5178" strokeWidth={2.4} />
+    <svg ref={ref} width="8" height="8" viewBox="0 0 8 8" fill="none" {...delegated}>
+      <path d="M4.36763 6.81306C4.21367 7.07973 3.82877 7.07973 3.67481 6.81306L0.921902 2.04489C0.767942 1.77822 0.960391 1.44489 1.26831 1.44489L6.77412 1.44489C7.08204 1.44489 7.27449 1.77822 7.12053 2.04489L4.36763 6.81306Z" />
     </svg>
   );
 });

package/src/iconography/index.ts

@@ -3,6 +3,7 @@ import { App } from './app';
 import { Archive } from './archive';
 import { Arrow } from './arrow';
 import { Atom } from './atom';
+import { Battery } from './battery';
 import { Bell } from './bell';
 import { BillingPayments } from './billing-payments';
 import { Bin } from './bin';
@@ -104,6 +105,7 @@ export const Icon = {
   Add,
   Archive,
   App,
+  Battery,
   BillingPayments,
   Bin,
   Bell,

package/src/switch/switch.css

@@ -1,5 +1,5 @@
 .c-switch-root {
-  @apply relative h-6 w-11 rounded-full border border-solid border-purple-200-700 bg-purple-50-900 pl-0.5 transition-all hover:border-purple-300-600 focus:outline-none enabled:cursor-pointer disabled:opacity-40 data-[state=checked]:border-green-400-500 data-[state=checked]:bg-cyan-100-800;
+  @apply relative rounded-full border border-solid border-purple-200-700 bg-purple-50-900 pl-0.5 transition-all hover:border-purple-300-600 focus:outline-none enabled:cursor-pointer disabled:opacity-40 data-[state=checked]:border-green-400-500 data-[state=checked]:bg-cyan-100-800;
 
   &-sm {
     @apply h-6 w-11;

package/src/tag/tag.css

@@ -14,6 +14,16 @@
   &__remove-button-text {
     @apply sr-only;
   }
+
+  &__remove-button--hover {
+    @apply opacity-0 transition;
+  }
+
+  &:hover {
+    .c-tag__remove-button--hover {
+      @apply opacity-100;
+    }
+  }
 }
 
 .c-tag-default {

package/src/tag/tag.tsx

@@ -1,4 +1,4 @@
-import { cva, VariantProps } from 'class-variance-authority';
+import { cva, VariantProps, cx } from 'class-variance-authority';
 
 import { Icon } from '../iconography';
 import './tag.css';
@@ -28,9 +28,19 @@ export type TagProps = React.ComponentProps<'div'> &
   TagStylesProps & {
     prepend?: React.ReactNode;
     onRemove?: () => void;
+    showRemoveOnHover?: boolean;
   };
 
-export function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }: TagProps) {
+export function Tag({
+  children,
+  className,
+  variant,
+  size,
+  prepend,
+  onRemove,
+  showRemoveOnHover,
+  ...delegated
+}: TagProps) {
   return (
     <div className={tagStyles({ className, variant, size })} {...delegated}>
       {!prepend ? null : <span className="c-tag__prepend">{prepend}</span>}
@@ -38,7 +48,7 @@ export function Tag({ children, className, variant, size, prepend, onRemove, ...
       {onRemove && (
         <button
           type="button"
-          className="c-tag__remove-button"
+          className={cx('c-tag__remove-button', showRemoveOnHover ? 'c-tag__remove-button--hover' : '')}
           onClick={e => {
             e.stopPropagation();
             onRemove();