@crystallize/design-system 1.24.0 → 1.24.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.24.2
+
+### Patch Changes
+
+- 573bdb7: remove @tailwindcss/container-queries from tailwind config, which was redundant there
+
+## 1.24.1
+
+### Patch Changes
+
+- bbf1dba: Fix select item classname passing
+
 ## 1.24.0
 
 ### Minor Changes

package/dist/{chunk-FWRBC56V.mjs → chunk-7K3KQDTQ.mjs}

@@ -3969,7 +3969,8 @@ var Piece = forwardRef71((delegated, ref) => {
         children: [
           /* @__PURE__ */ jsx77("path", {
             fill: "#BFF6F8",
-            d: "M1.67 1.89h18.491v18.157H1.671V1.891Z"
+            d: "M1.67 1.89h18.491v18.157H1.671V1.891Z",
+            className: "c-icon-fill"
           }),
           /* @__PURE__ */ jsx77("path", {
             fill: "#fff",

package/dist/index.css

@@ -1787,7 +1787,7 @@
 }
 .c-tag__remove-button {
   margin: 0px;
-  margin-right: -0.5rem;
+  margin-right: -0.25rem;
   cursor: pointer;
   border-style: none;
   background-color: transparent;

package/dist/index.js

@@ -4515,7 +4515,8 @@ var init_piece = __esm({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", {
                 fill: "#BFF6F8",
-                d: "M1.67 1.89h18.491v18.157H1.671V1.891Z"
+                d: "M1.67 1.89h18.491v18.157H1.671V1.891Z",
+                className: "c-icon-fill"
               }),
               /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", {
                 fill: "#fff",
@@ -39957,12 +39958,13 @@ var Radio = {
 
 // src/select/select-item.tsx
 var import_react113 = require("react");
+var import_class_variance_authority18 = require("class-variance-authority");
 var SelectPrimitives = __toESM(require("@radix-ui/react-select"));
 var import_jsx_runtime128 = require("react/jsx-runtime");
 var SelectItem = (0, import_react113.forwardRef)((props, ref) => {
-  const { children, ...delegated } = props;
+  const { children, className, ...delegated } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(SelectPrimitives.Item, {
-    className: "c-select-item",
+    className: (0, import_class_variance_authority18.cx)("c-select-item", className),
     ref,
     ...delegated,
     children: [
@@ -39977,11 +39979,11 @@ SelectItem.displayName = "SelectItem";
 
 // src/select/select-root.tsx
 var import_react114 = require("react");
-var import_class_variance_authority18 = require("class-variance-authority");
+var import_class_variance_authority19 = require("class-variance-authority");
 var SelectPrimitives2 = __toESM(require("@radix-ui/react-select"));
 init_iconography();
 var import_jsx_runtime129 = require("react/jsx-runtime");
-var selectTriggerStyles = (0, import_class_variance_authority18.cva)("c-select-trigger", {
+var selectTriggerStyles = (0, import_class_variance_authority19.cva)("c-select-trigger", {
   variants: {
     size: {
       xs: "c-select-trigger-xs",
@@ -40041,12 +40043,12 @@ var Select = {
 
 // src/slider/slider.tsx
 var import_react115 = require("react");
-var import_class_variance_authority19 = require("class-variance-authority");
+var import_class_variance_authority20 = require("class-variance-authority");
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
 var import_jsx_runtime130 = require("react/jsx-runtime");
 var Slider = (0, import_react115.forwardRef)(({ className, transparentRange, ...delegated }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(SliderPrimitive.Root, {
-    className: (0, import_class_variance_authority19.cx)("c-slider-root", className),
+    className: (0, import_class_variance_authority20.cx)("c-slider-root", className),
     ref,
     ...delegated,
     children: [
@@ -40087,10 +40089,10 @@ function StackIcon({ type, children, size = 18 }) {
 }
 
 // src/tag/tag.tsx
-var import_class_variance_authority20 = require("class-variance-authority");
+var import_class_variance_authority21 = require("class-variance-authority");
 init_iconography();
 var import_jsx_runtime132 = require("react/jsx-runtime");
-var tagStyles = (0, import_class_variance_authority20.cva)("c-tag", {
+var tagStyles = (0, import_class_variance_authority21.cva)("c-tag", {
   variants: {
     variant: {
       default: "c-tag-default",
@@ -40130,7 +40132,7 @@ function Tag({
       children,
       onRemove && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("button", {
         type: "button",
-        className: (0, import_class_variance_authority20.cx)("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
+        className: (0, import_class_variance_authority21.cx)("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
           e.stopPropagation();
           onRemove();
@@ -40167,12 +40169,12 @@ var RichTextEditor2 = (props) => {
 var import_sonner2 = require("sonner");
 
 // src/toast/toast.tsx
-var import_class_variance_authority21 = require("class-variance-authority");
+var import_class_variance_authority22 = require("class-variance-authority");
 var import_sonner = require("sonner");
 init_icon_button2();
 init_iconography();
 var import_jsx_runtime149 = require("react/jsx-runtime");
-var toastStyles = (0, import_class_variance_authority21.cva)("c-toast", {
+var toastStyles = (0, import_class_variance_authority22.cva)("c-toast", {
   variants: {
     type: {
       info: "c-toast-info",
@@ -40198,7 +40200,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   import_sonner.toast.custom(
     (id) => /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", {
       "data-testid": `toast-${type}`,
-      className: (0, import_class_variance_authority21.cx)(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
+      className: (0, import_class_variance_authority22.cx)(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", {
           children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(ToastIcon, {
@@ -40245,10 +40247,10 @@ toast.dismiss = import_sonner.toast.dismiss;
 init_tooltip2();
 
 // src/switch/switch.tsx
-var import_class_variance_authority22 = require("class-variance-authority");
+var import_class_variance_authority23 = require("class-variance-authority");
 var RadixSwitch = __toESM(require("@radix-ui/react-switch"));
 var import_jsx_runtime150 = require("react/jsx-runtime");
-var switchStyles = (0, import_class_variance_authority22.cva)(["c-switch-root"], {
+var switchStyles = (0, import_class_variance_authority23.cva)(["c-switch-root"], {
   variants: {
     size: {
       xs: "c-switch-root-xs",

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-FWRBC56V.mjs";
+} from "./chunk-7K3KQDTQ.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -226,12 +226,13 @@ var Radio = {
 
 // src/select/select-item.tsx
 import { forwardRef as forwardRef3 } from "react";
+import { cx as cx4 } from "class-variance-authority";
 import * as SelectPrimitives from "@radix-ui/react-select";
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var SelectItem = forwardRef3((props, ref) => {
-  const { children, ...delegated } = props;
+  const { children, className, ...delegated } = props;
   return /* @__PURE__ */ jsxs3(SelectPrimitives.Item, {
-    className: "c-select-item",
+    className: cx4("c-select-item", className),
     ref,
     ...delegated,
     children: [
@@ -309,12 +310,12 @@ var Select = {
 
 // src/slider/slider.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { cx as cx4 } from "class-variance-authority";
+import { cx as cx5 } from "class-variance-authority";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var Slider = forwardRef5(({ className, transparentRange, ...delegated }, ref) => {
   return /* @__PURE__ */ jsxs5(SliderPrimitive.Root, {
-    className: cx4("c-slider-root", className),
+    className: cx5("c-slider-root", className),
     ref,
     ...delegated,
     children: [
@@ -351,7 +352,7 @@ function StackIcon({ type, children, size = 18 }) {
 }
 
 // src/tag/tag.tsx
-import { cva as cva5, cx as cx5 } from "class-variance-authority";
+import { cva as cva5, cx as cx6 } from "class-variance-authority";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var tagStyles = cva5("c-tag", {
   variants: {
@@ -393,7 +394,7 @@ function Tag({
       children,
       onRemove && /* @__PURE__ */ jsxs7("button", {
         type: "button",
-        className: cx5("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
+        className: cx6("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
           e.stopPropagation();
           onRemove();
@@ -416,7 +417,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-6PGBZV6U.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-ZJS3XSIV.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx13(Suspense, {
     fallback: null,
@@ -430,7 +431,7 @@ var RichTextEditor = (props) => {
 import { Toaster } from "sonner";
 
 // src/toast/toast.tsx
-import { cva as cva6, cx as cx6 } from "class-variance-authority";
+import { cva as cva6, cx as cx7 } from "class-variance-authority";
 import { toast as sonnerToast } from "sonner";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var toastStyles = cva6("c-toast", {
@@ -459,7 +460,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   sonnerToast.custom(
     (id) => /* @__PURE__ */ jsxs8("div", {
       "data-testid": `toast-${type}`,
-      className: cx6(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
+      className: cx7(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
         /* @__PURE__ */ jsx14("div", {
           children: /* @__PURE__ */ jsx14(ToastIcon, {

package/dist/{rich-text-editor-6PGBZV6U.mjs → rich-text-editor-ZJS3XSIV.mjs}

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

package/src/collapsible/collapsible.tsx

@@ -4,7 +4,6 @@ import * as CollapsiblePrimitives from '@radix-ui/react-collapsible';
 import type { CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 
 import './collapsible.css';
-
 import { Icon } from '../iconography';
 
 type CollapsibleContentProps = ComponentProps<typeof CollapsiblePrimitives.Content>;

package/src/iconography/piece.tsx

@@ -8,7 +8,7 @@ export const Piece = forwardRef<PieceRef, PieceProps>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <g clipPath="url(#a)">
-        <path fill="#BFF6F8" d="M1.67 1.89h18.491v18.157H1.671V1.891Z" />
+        <path fill="#BFF6F8" d="M1.67 1.89h18.491v18.157H1.671V1.891Z" className="c-icon-fill" />
         <path
           fill="#fff"
           d="M11.232 10.957h2.232l1.159-3.053H16.5l1.43 3.053h2.232v9.091h-8.93v-2.842l3.063-.346v-2.136l-3.063-.361v-3.406Z"

package/src/select/select-item.tsx

@@ -1,14 +1,15 @@
 import { ComponentProps, forwardRef } from 'react';
+import { cx } from 'class-variance-authority';
 import * as SelectPrimitives from '@radix-ui/react-select';
 
 export type SelectItemRef = HTMLDivElement;
 export type SelectItemProps = ComponentProps<typeof SelectPrimitives.Item>;
 
 export const SelectItem = forwardRef<SelectItemRef, SelectItemProps>((props, ref) => {
-  const { children, ...delegated } = props;
+  const { children, className, ...delegated } = props;
 
   return (
-    <SelectPrimitives.Item className="c-select-item" ref={ref} {...delegated}>
+    <SelectPrimitives.Item className={cx('c-select-item', className)} ref={ref} {...delegated}>
       <SelectPrimitives.ItemText>{children}</SelectPrimitives.ItemText>
       <SelectPrimitives.ItemIndicator />
     </SelectPrimitives.Item>

package/src/tag/tag.css

@@ -8,7 +8,7 @@
   }
 
   &__remove-button {
-    @apply m-0 -mr-2 cursor-pointer border-none bg-transparent p-0 text-[0];
+    @apply m-0 -mr-1 cursor-pointer border-none bg-transparent p-0 text-[0];
   }
 
   &__remove-button-text {

package/tailwind.config.cjs

@@ -74,5 +74,5 @@ module.exports = {
       },
     },
   },
-  plugins: [colorsPlugin, require('tailwindcss-radix')(), require('@tailwindcss/container-queries')],
+  plugins: [colorsPlugin, require('tailwindcss-radix')()],
 };