@crystallize/design-system 1.24.17 → 1.24.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.24.19
+
+### Patch Changes
+
+- 95af095: Add discovatable flag to all shape components
+
+## 1.24.18
+
+### Patch Changes
+
+- 1e62463: Adjust switch component types
+
 ## 1.24.17
 
 ### Patch Changes

package/dist/{chunk-GAFUHKHL.mjs → chunk-7ZEBQCV7.mjs}

@@ -2726,7 +2726,6 @@ import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
 var Info = forwardRef52((delegated, ref) => {
   return /* @__PURE__ */ jsxs49("svg", {
     ref,
-    xmlns: "http://www.w3.org/2000/svg",
     width: "22",
     height: "22",
     fill: "none",
@@ -2735,7 +2734,8 @@ var Info = forwardRef52((delegated, ref) => {
     children: [
       /* @__PURE__ */ jsx58("path", {
         d: "M17.593 3.85212C17.593 4.67937 16.9224 5.34999 16.0952 5.34999C15.2679 5.34999 14.5973 4.67937 14.5973 3.85212C14.5973 3.02487 15.2679 2.35425 16.0952 2.35425C16.9224 2.35425 17.593 3.02487 17.593 3.85212Z",
-        fill: "#BFF6F8"
+        fill: "#BFF6F8",
+        className: "c-icon-fill"
       }),
       /* @__PURE__ */ jsx58("path", {
         fillRule: "evenodd",
@@ -2745,7 +2745,8 @@ var Info = forwardRef52((delegated, ref) => {
       }),
       /* @__PURE__ */ jsx58("path", {
         d: "M11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8385 13.118 13.6419 13.3464 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338Z",
-        fill: "#BFF6F8"
+        fill: "#BFF6F8",
+        className: "c-icon-fill"
       }),
       /* @__PURE__ */ jsx58("path", {
         fillRule: "evenodd",
@@ -6019,7 +6020,8 @@ var Warning = forwardRef109((delegated, ref) => {
     children: [
       /* @__PURE__ */ jsx115("path", {
         d: "M9.67541 3.72993C10.2804 2.68198 11.793 2.68198 12.398 3.72993L19.8853 16.6982C20.4903 17.7462 19.734 19.0561 18.524 19.0561H3.54948C2.33942 19.0561 1.58313 17.7462 2.18816 16.6982L9.67541 3.72993Z",
-        fill: "#FFDE99"
+        fill: "#FFDE99",
+        className: "c-icon-fill"
       }),
       /* @__PURE__ */ jsx115("path", {
         fillRule: "evenodd",

package/dist/index.d.ts

@@ -477,7 +477,7 @@ type SwitchStylesProps = VariantProps<typeof switchStyles>;
 declare const switchStyles: (props?: ({
     size?: "xs" | "sm" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-type CustomSwitchProps = SwitchStylesProps & Exclude<SwitchProps, 'checked'> & {
+type CustomSwitchProps = SwitchStylesProps & Omit<SwitchProps, 'checked'> & {
     checked?: boolean | null;
 };
 declare function Switch({ size, checked, ...props }: CustomSwitchProps): JSX.Element;

package/dist/index.js

@@ -3158,7 +3158,6 @@ var init_info = __esm({
     Info = (0, import_react54.forwardRef)((delegated, ref) => {
       return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("svg", {
         ref,
-        xmlns: "http://www.w3.org/2000/svg",
         width: "22",
         height: "22",
         fill: "none",
@@ -3167,7 +3166,8 @@ var init_info = __esm({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", {
             d: "M17.593 3.85212C17.593 4.67937 16.9224 5.34999 16.0952 5.34999C15.2679 5.34999 14.5973 4.67937 14.5973 3.85212C14.5973 3.02487 15.2679 2.35425 16.0952 2.35425C16.9224 2.35425 17.593 3.02487 17.593 3.85212Z",
-            fill: "#BFF6F8"
+            fill: "#BFF6F8",
+            className: "c-icon-fill"
           }),
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", {
             fillRule: "evenodd",
@@ -3177,7 +3177,8 @@ var init_info = __esm({
           }),
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", {
             d: "M11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8385 13.118 13.6419 13.3464 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338Z",
-            fill: "#BFF6F8"
+            fill: "#BFF6F8",
+            className: "c-icon-fill"
           }),
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", {
             fillRule: "evenodd",
@@ -6793,7 +6794,8 @@ var init_warning = __esm({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("path", {
             d: "M9.67541 3.72993C10.2804 2.68198 11.793 2.68198 12.398 3.72993L19.8853 16.6982C20.4903 17.7462 19.734 19.0561 18.524 19.0561H3.54948C2.33942 19.0561 1.58313 17.7462 2.18816 16.6982L9.67541 3.72993Z",
-            fill: "#FFDE99"
+            fill: "#FFDE99",
+            className: "c-icon-fill"
           }),
           /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("path", {
             fillRule: "evenodd",
@@ -40528,6 +40530,7 @@ var toast = ({ title, message, id, type = "success", timeout = 6e3 }) => {
         }),
         /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", {
           className: "c-toast-close",
+          "data-testid": "toast-close",
           children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(IconButton, {
             onClick: () => import_sonner.toast.dismiss(id2),
             size: "xs",
@@ -40570,7 +40573,7 @@ var switchStyles = (0, import_class_variance_authority24.cva)(["c-switch-root"],
 function Switch2({ size, checked, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(RadixSwitch.Root, {
     ...props,
-    checked,
+    checked: checked === null ? false : checked,
     className: switchStyles({ size }),
     children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(RadixSwitch.Thumb, {
       className: (0, import_class_variance_authority24.cx)("c-switch-thumb", checked === null ? "middle-position" : "")

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-GAFUHKHL.mjs";
+} from "./chunk-7ZEBQCV7.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -480,7 +480,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-REO7ES7Q.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-OKFI7OCV.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,
@@ -545,6 +545,7 @@ var toast = ({ title, message, id, type = "success", timeout = 6e3 }) => {
         }),
         /* @__PURE__ */ jsx16("div", {
           className: "c-toast-close",
+          "data-testid": "toast-close",
           children: /* @__PURE__ */ jsx16(IconButton, {
             onClick: () => sonnerToast.dismiss(id2),
             size: "xs",
@@ -584,7 +585,7 @@ var switchStyles = cva7(["c-switch-root"], {
 function Switch({ size, checked, ...props }) {
   return /* @__PURE__ */ jsx17(RadixSwitch.Root, {
     ...props,
-    checked,
+    checked: checked === null ? false : checked,
     className: switchStyles({ size }),
     children: /* @__PURE__ */ jsx17(RadixSwitch.Thumb, {
       className: cx9("c-switch-thumb", checked === null ? "middle-position" : "")

package/dist/{rich-text-editor-REO7ES7Q.mjs → rich-text-editor-OKFI7OCV.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-GAFUHKHL.mjs";
+} from "./chunk-7ZEBQCV7.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.24.17",
+  "version": "1.24.19",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/iconography/info.tsx

@@ -5,18 +5,11 @@ type InfoRef = SVGSVGElement;
 
 export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
   return (
-    <svg
-      ref={ref}
-      xmlns="http://www.w3.org/2000/svg"
-      width="22"
-      height="22"
-      fill="none"
-      viewBox="0 0 22 22"
-      {...delegated}
-    >
+    <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
       <path
         d="M17.593 3.85212C17.593 4.67937 16.9224 5.34999 16.0952 5.34999C15.2679 5.34999 14.5973 4.67937 14.5973 3.85212C14.5973 3.02487 15.2679 2.35425 16.0952 2.35425C16.9224 2.35425 17.593 3.02487 17.593 3.85212Z"
         fill="#BFF6F8"
+        className="c-icon-fill"
       />
       <path
         fillRule="evenodd"
@@ -27,6 +20,7 @@ export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
       <path
         d="M11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8385 13.118 13.6419 13.3464 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338Z"
         fill="#BFF6F8"
+        className="c-icon-fill"
       />
       <path
         fillRule="evenodd"

package/src/iconography/warning.tsx

@@ -9,6 +9,7 @@ export const Warning = forwardRef<WarningRef, WarningProps>((delegated, ref) =>
       <path
         d="M9.67541 3.72993C10.2804 2.68198 11.793 2.68198 12.398 3.72993L19.8853 16.6982C20.4903 17.7462 19.734 19.0561 18.524 19.0561H3.54948C2.33942 19.0561 1.58313 17.7462 2.18816 16.6982L9.67541 3.72993Z"
         fill="#FFDE99"
+        className="c-icon-fill"
       />
       <path
         fillRule="evenodd"

package/src/switch/switch.tsx

@@ -16,13 +16,13 @@ const switchStyles = cva(['c-switch-root'], {
 });
 
 export type CustomSwitchProps = SwitchStylesProps &
-  Exclude<SwitchProps, 'checked'> & {
+  Omit<SwitchProps, 'checked'> & {
     checked?: boolean | null;
   };
 
 export function Switch({ size, checked, ...props }: CustomSwitchProps) {
   return (
-    <RadixSwitch.Root {...props} checked={checked} className={switchStyles({ size })}>
+    <RadixSwitch.Root {...props} checked={checked === null ? false : checked} className={switchStyles({ size })}>
       <RadixSwitch.Thumb className={cx('c-switch-thumb', checked === null ? 'middle-position' : '')} />
     </RadixSwitch.Root>
   );

package/src/toast/toast.tsx

@@ -53,7 +53,7 @@ export const toast = ({ title, message, id, type = 'success', timeout = 6000 }:
           <div className="c-toast-title">{title}</div>
           {!!message && <div className="c-toast-message">{message}</div>}
         </div>
-        <div className="c-toast-close">
+        <div className="c-toast-close" data-testid="toast-close">
           <IconButton onClick={() => sonnerToast.dismiss(id)} size="xs">
             <Icon.Cancel width={12} height={12} />
           </IconButton>