@common-origin/design-system 2.20.0 → 2.21.0

package/dist/tokens.css

@@ -118,6 +118,246 @@
   --co-base-color-gray-alpha-1000: rgba(34, 34, 34, 0.606); /** Solid fill on hover. Composites to gray.1000 over white. */
   --co-base-color-gray-alpha-1100: rgba(34, 34, 34, 0.706); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to gray.1100 over white. */
   --co-base-color-gray-alpha-1200: rgba(34, 34, 34, 1); /** Primary text, and the darkest step. Composites to gray.1200 over white. */
+  --co-base-color-accent-100: #fbfcfd; /** Page background. oklch(0.991 0.002 248), 1.03:1 on white. */
+  --co-base-color-accent-200: #f7f9fc; /** Subtle background. oklch(0.981 0.005 258), 1.05:1 on white. */
+  --co-base-color-accent-300: #edf3fa; /** Component fill at rest. oklch(0.962 0.011 252), 1.12:1 on white. */
+  --co-base-color-accent-400: #e3ecf8; /** Component fill on hover. oklch(0.940 0.019 256), 1.19:1 on white. */
+  --co-base-color-accent-500: #d8e5f6; /** Component fill pressed or selected. oklch(0.917 0.027 255), 1.28:1 on white. */
+  --co-base-color-accent-600: #cbdef7; /** Subtle border. oklch(0.894 0.040 255), 1.37:1 on white. */
+  --co-base-color-accent-700: #b9d3f5; /** Default border, for dividers and decorative outlines. oklch(0.859 0.055 255), 1.53:1 on white. */
+  --co-base-color-accent-800: #3190fe; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.655 0.185 255), 3.21:1 on white. */
+  --co-base-color-accent-900: #0082fc; /** Solid fill. oklch(0.617 0.205 255), 3.75:1 on white. */
+  --co-base-color-accent-1000: #0278e7; /** Solid fill on hover. oklch(0.581 0.190 255), 4.34:1 on white. */
+  --co-base-color-accent-1100: #0162bf; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.504 0.165 255), 6.00:1 on white. */
+  --co-base-color-accent-1200: #0f2339; /** Primary text, and the darkest step. oklch(0.252 0.049 252), 15.91:1 on white. */
+  --co-base-color-accent-alpha-100: rgba(5, 68, 130, 0.016); /** Page background. Composites to accent.100 over white. */
+  --co-base-color-accent-alpha-200: rgba(5, 68, 161, 0.032); /** Subtle background. Composites to accent.200 over white. */
+  --co-base-color-accent-alpha-300: rgba(1, 86, 185, 0.071); /** Component fill at rest. Composites to accent.300 over white. */
+  --co-base-color-accent-alpha-400: rgba(0, 82, 191, 0.11); /** Component fill on hover. Composites to accent.400 over white. */
+  --co-base-color-accent-alpha-500: rgba(0, 85, 196, 0.153); /** Component fill pressed or selected. Composites to accent.500 over white. */
+  --co-base-color-accent-alpha-600: rgba(0, 93, 216, 0.204); /** Subtle border. Composites to accent.600 over white. */
+  --co-base-color-accent-alpha-700: rgba(0, 95, 219, 0.275); /** Default border, for dividers and decorative outlines. Composites to accent.700 over white. */
+  --co-base-color-accent-alpha-800: rgba(0, 118, 254, 0.808); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to accent.800 over white. */
+  --co-base-color-accent-alpha-900: rgba(0, 130, 252, 1); /** Solid fill. Composites to accent.900 over white. */
+  --co-base-color-accent-alpha-1000: rgba(0, 119, 231, 0.993); /** Solid fill on hover. Composites to accent.1000 over white. */
+  --co-base-color-accent-alpha-1100: rgba(0, 98, 191, 0.997); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to accent.1100 over white. */
+  --co-base-color-accent-alpha-1200: rgba(0, 21, 45, 0.942); /** Primary text, and the darkest step. Composites to accent.1200 over white. */
+  --co-base-color-success-100: #f9fdfa; /** Page background. oklch(0.990 0.006 154), 1.03:1 on white. */
+  --co-base-color-success-200: #f0fcf5; /** Subtle background. oklch(0.980 0.016 161), 1.05:1 on white. */
+  --co-base-color-success-300: #dbf9e8; /** Component fill at rest. oklch(0.956 0.039 161), 1.12:1 on white. */
+  --co-base-color-success-400: #c4f7da; /** Component fill on hover. oklch(0.933 0.065 160), 1.19:1 on white. */
+  --co-base-color-success-500: #aff3ce; /** Component fill pressed or selected. oklch(0.909 0.085 160), 1.27:1 on white. */
+  --co-base-color-success-600: #98eec0; /** Subtle border. oklch(0.882 0.106 160), 1.37:1 on white. */
+  --co-base-color-success-700: #77e6af; /** Default border, for dividers and decorative outlines. oklch(0.844 0.130 160), 1.53:1 on white. */
+  --co-base-color-success-800: #02a56c; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.637 0.144 160), 3.18:1 on white. */
+  --co-base-color-success-900: #009762; /** Solid fill. oklch(0.597 0.136 160), 3.75:1 on white. */
+  --co-base-color-success-1000: #018b5a; /** Solid fill on hover. oklch(0.562 0.127 160), 4.34:1 on white. */
+  --co-base-color-success-1100: #017249; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.487 0.110 160), 5.99:1 on white. */
+  --co-base-color-success-1200: #12261b; /** Primary text, and the darkest step. oklch(0.248 0.034 159), 15.92:1 on white. */
+  --co-base-color-success-alpha-100: rgba(5, 172, 47, 0.024); /** Page background. Composites to success.100 over white. */
+  --co-base-color-success-alpha-200: rgba(1, 204, 86, 0.059); /** Subtle background. Composites to success.200 over white. */
+  --co-base-color-success-alpha-300: rgba(1, 213, 93, 0.142); /** Component fill at rest. Composites to success.300 over white. */
+  --co-base-color-success-alpha-400: rgba(1, 221, 96, 0.232); /** Component fill on hover. Composites to success.400 over white. */
+  --co-base-color-success-alpha-500: rgba(0, 217, 99, 0.314); /** Component fill pressed or selected. Composites to success.500 over white. */
+  --co-base-color-success-alpha-600: rgba(0, 213, 99, 0.404); /** Subtle border. Composites to success.600 over white. */
+  --co-base-color-success-alpha-700: rgba(0, 208, 105, 0.534); /** Default border, for dividers and decorative outlines. Composites to success.700 over white. */
+  --co-base-color-success-alpha-800: rgba(0, 164, 107, 0.993); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to success.800 over white. */
+  --co-base-color-success-alpha-900: rgba(0, 151, 98, 1); /** Solid fill. Composites to success.900 over white. */
+  --co-base-color-success-alpha-1000: rgba(0, 139, 90, 0.997); /** Solid fill on hover. Composites to success.1000 over white. */
+  --co-base-color-success-alpha-1100: rgba(0, 114, 72, 0.997); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to success.1100 over white. */
+  --co-base-color-success-alpha-1200: rgba(0, 22, 10, 0.93); /** Primary text, and the darkest step. Composites to success.1200 over white. */
+  --co-base-color-warning-100: #fdfcfa; /** Page background. oklch(0.991 0.003 85), 1.03:1 on white. */
+  --co-base-color-warning-200: #fcf9f4; /** Subtle background. oklch(0.983 0.007 81), 1.05:1 on white. */
+  --co-base-color-warning-300: #faf1e3; /** Component fill at rest. oklch(0.961 0.021 79), 1.12:1 on white. */
+  --co-base-color-warning-400: #f8e9d1; /** Component fill on hover. oklch(0.940 0.036 80), 1.20:1 on white. */
+  --co-base-color-warning-500: #f7e1be; /** Component fill pressed or selected. oklch(0.919 0.052 79), 1.28:1 on white. */
+  --co-base-color-warning-600: #f7d8a5; /** Subtle border. oklch(0.896 0.074 80), 1.37:1 on white. */
+  --co-base-color-warning-700: #f7cb80; /** Default border, for dividers and decorative outlines. oklch(0.864 0.106 80), 1.52:1 on white. */
+  --co-base-color-warning-800: #bd8600; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.658 0.136 80), 3.19:1 on white. */
+  --co-base-color-warning-900: #ad7b00; /** Solid fill. oklch(0.617 0.128 80), 3.74:1 on white. */
+  --co-base-color-warning-1000: #9f7102; /** Solid fill on hover. oklch(0.580 0.120 80), 4.34:1 on white. */
+  --co-base-color-warning-1100: #835c00; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.503 0.104 80), 6.01:1 on white. */
+  --co-base-color-warning-1200: #292111; /** Primary text, and the darkest step. oklch(0.252 0.030 84), 15.91:1 on white. */
+  --co-base-color-warning-alpha-100: rgba(155, 105, 5, 0.02); /** Page background. Composites to warning.100 over white. */
+  --co-base-color-warning-alpha-200: rgba(187, 119, 5, 0.044); /** Subtle background. Composites to warning.200 over white. */
+  --co-base-color-warning-alpha-300: rgba(210, 128, 0, 0.11); /** Component fill at rest. Composites to warning.300 over white. */
+  --co-base-color-warning-alpha-400: rgba(216, 133, 1, 0.181); /** Component fill on hover. Composites to warning.400 over white. */
+  --co-base-color-warning-alpha-500: rgba(224, 137, 0, 0.255); /** Component fill pressed or selected. Composites to warning.500 over white. */
+  --co-base-color-warning-alpha-600: rgba(232, 145, 0, 0.353); /** Subtle border. Composites to warning.600 over white. */
+  --co-base-color-warning-alpha-700: rgba(239, 151, 0, 0.499); /** Default border, for dividers and decorative outlines. Composites to warning.700 over white. */
+  --co-base-color-warning-alpha-800: rgba(189, 134, 0, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to warning.800 over white. */
+  --co-base-color-warning-alpha-900: rgba(173, 123, 0, 1); /** Solid fill. Composites to warning.900 over white. */
+  --co-base-color-warning-alpha-1000: rgba(158, 112, 0, 0.993); /** Solid fill on hover. Composites to warning.1000 over white. */
+  --co-base-color-warning-alpha-1100: rgba(131, 92, 0, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to warning.1100 over white. */
+  --co-base-color-warning-alpha-1200: rgba(26, 17, 0, 0.934); /** Primary text, and the darkest step. Composites to warning.1200 over white. */
+  --co-base-color-serious-100: #fefcfb; /** Page background. oklch(0.992 0.003 49), 1.02:1 on white. */
+  --co-base-color-serious-200: #fcf8f6; /** Subtle background. oklch(0.982 0.005 49), 1.06:1 on white. */
+  --co-base-color-serious-300: #faf0eb; /** Component fill at rest. oklch(0.962 0.013 49), 1.12:1 on white. */
+  --co-base-color-serious-400: #f8e8e0; /** Component fill on hover. oklch(0.942 0.021 48), 1.19:1 on white. */
+  --co-base-color-serious-500: #f7dfd4; /** Component fill pressed or selected. oklch(0.920 0.030 46), 1.28:1 on white. */
+  --co-base-color-serious-600: #f6d5c5; /** Subtle border. oklch(0.896 0.043 47), 1.38:1 on white. */
+  --co-base-color-serious-700: #f7c7b0; /** Default border, for dividers and decorative outlines. oklch(0.866 0.063 47), 1.53:1 on white. */
+  --co-base-color-serious-800: #ed6800; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.671 0.186 47), 3.19:1 on white. */
+  --co-base-color-serious-900: #da5f00; /** Solid fill. oklch(0.630 0.175 47), 3.74:1 on white. */
+  --co-base-color-serious-1000: #c85701; /** Solid fill on hover. oklch(0.592 0.163 47), 4.36:1 on white. */
+  --co-base-color-serious-1100: #a54703; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.514 0.141 47), 6.00:1 on white. */
+  --co-base-color-serious-1200: #341c10; /** Primary text, and the darkest step. oklch(0.256 0.043 47), 15.91:1 on white. */
+  --co-base-color-serious-alpha-100: rgba(193, 68, 5, 0.016); /** Page background. Composites to serious.100 over white. */
+  --co-base-color-serious-alpha-200: rgba(172, 61, 5, 0.036); /** Subtle background. Composites to serious.200 over white. */
+  --co-base-color-serious-alpha-300: rgba(192, 65, 2, 0.079); /** Component fill at rest. Composites to serious.300 over white. */
+  --co-base-color-serious-alpha-400: rgba(198, 66, 1, 0.122); /** Component fill on hover. Composites to serious.400 over white. */
+  --co-base-color-serious-alpha-500: rgba(208, 66, 1, 0.169); /** Component fill pressed or selected. Composites to serious.500 over white. */
+  --co-base-color-serious-alpha-600: rgba(216, 71, 1, 0.228); /** Subtle border. Composites to serious.600 over white. */
+  --co-base-color-serious-alpha-700: rgba(229, 74, 0, 0.31); /** Default border, for dividers and decorative outlines. Composites to serious.700 over white. */
+  --co-base-color-serious-alpha-800: rgba(237, 104, 0, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to serious.800 over white. */
+  --co-base-color-serious-alpha-900: rgba(218, 95, 0, 1); /** Solid fill. Composites to serious.900 over white. */
+  --co-base-color-serious-alpha-1000: rgba(200, 86, 0, 0.997); /** Solid fill on hover. Composites to serious.1000 over white. */
+  --co-base-color-serious-alpha-1100: rgba(164, 69, 0, 0.989); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to serious.1100 over white. */
+  --co-base-color-serious-alpha-1200: rgba(39, 13, 0, 0.938); /** Primary text, and the darkest step. Composites to serious.1200 over white. */
+  --co-base-color-danger-100: #fefcfc; /** Page background. oklch(0.993 0.002 17), 1.02:1 on white. */
+  --co-base-color-danger-200: #fcf8f7; /** Subtle background. oklch(0.982 0.004 34), 1.05:1 on white. */
+  --co-base-color-danger-300: #faf0ee; /** Component fill at rest. oklch(0.962 0.011 31), 1.12:1 on white. */
+  --co-base-color-danger-400: #f8e7e4; /** Component fill on hover. oklch(0.941 0.019 30), 1.20:1 on white. */
+  --co-base-color-danger-500: #f8dfdb; /** Component fill pressed or selected. oklch(0.923 0.028 29), 1.27:1 on white. */
+  --co-base-color-danger-600: #f7d4ce; /** Subtle border. oklch(0.898 0.040 29), 1.38:1 on white. */
+  --co-base-color-danger-700: #f7c6be; /** Default border, for dividers and decorative outlines. oklch(0.867 0.057 29), 1.52:1 on white. */
+  --co-base-color-danger-800: #ff5444; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.679 0.210 29), 3.18:1 on white. */
+  --co-base-color-danger-900: #ff2b21; /** Solid fill. oklch(0.643 0.243 29), 3.74:1 on white. */
+  --co-base-color-danger-1000: #f30004; /** Solid fill on hover. oklch(0.606 0.248 29), 4.36:1 on white. */
+  --co-base-color-danger-1100: #c90002; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.525 0.215 29), 6.03:1 on white. */
+  --co-base-color-danger-1200: #3d1611; /** Primary text, and the darkest step. oklch(0.259 0.063 29), 15.89:1 on white. */
+  --co-base-color-danger-alpha-100: rgba(172, 5, 5, 0.012); /** Page background. Composites to danger.100 over white. */
+  --co-base-color-danger-alpha-200: rgba(161, 36, 5, 0.032); /** Subtle background. Composites to danger.200 over white. */
+  --co-base-color-danger-alpha-300: rgba(180, 31, 1, 0.067); /** Component fill at rest. Composites to danger.300 over white. */
+  --co-base-color-danger-alpha-400: rgba(189, 29, 0, 0.106); /** Component fill on hover. Composites to danger.400 over white. */
+  --co-base-color-danger-alpha-500: rgba(206, 30, 1, 0.142); /** Component fill pressed or selected. Composites to danger.500 over white. */
+  --co-base-color-danger-alpha-600: rgba(214, 32, 1, 0.193); /** Subtle border. Composites to danger.600 over white. */
+  --co-base-color-danger-alpha-700: rgba(224, 31, 0, 0.255); /** Default border, for dividers and decorative outlines. Composites to danger.700 over white. */
+  --co-base-color-danger-alpha-800: rgba(255, 22, 0, 0.734); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to danger.800 over white. */
+  --co-base-color-danger-alpha-900: rgba(255, 12, 0, 0.871); /** Solid fill. Composites to danger.900 over white. */
+  --co-base-color-danger-alpha-1000: rgba(243, 0, 4, 1); /** Solid fill on hover. Composites to danger.1000 over white. */
+  --co-base-color-danger-alpha-1100: rgba(201, 0, 2, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to danger.1100 over white. */
+  --co-base-color-danger-alpha-1200: rgba(47, 6, 0, 0.934); /** Primary text, and the darkest step. Composites to danger.1200 over white. */
+  --co-base-color-ai-100: #fdfcfe; /** Page background. oklch(0.992 0.003 308), 1.02:1 on white. */
+  --co-base-color-ai-200: #faf8fc; /** Subtle background. oklch(0.982 0.006 308), 1.06:1 on white. */
+  --co-base-color-ai-300: #f4f0fa; /** Component fill at rest. oklch(0.961 0.014 304), 1.12:1 on white. */
+  --co-base-color-ai-400: #efe8f8; /** Component fill on hover. oklch(0.941 0.023 306), 1.20:1 on white. */
+  --co-base-color-ai-500: #eae0f7; /** Component fill pressed or selected. oklch(0.921 0.033 305), 1.27:1 on white. */
+  --co-base-color-ai-600: #e4d6f6; /** Subtle border. oklch(0.897 0.046 305), 1.38:1 on white. */
+  --co-base-color-ai-700: #ddc9f7; /** Default border, for dividers and decorative outlines. oklch(0.867 0.066 305), 1.52:1 on white. */
+  --co-base-color-ai-800: #b76bff; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.677 0.215 305), 3.20:1 on white. */
+  --co-base-color-ai-900: #b056ff; /** Solid fill. oklch(0.642 0.241 305), 3.74:1 on white. */
+  --co-base-color-ai-1000: #aa3dff; /** Solid fill on hover. oklch(0.610 0.267 305), 4.36:1 on white. */
+  --co-base-color-ai-1100: #9602eb; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.539 0.279 305), 5.99:1 on white. */
+  --co-base-color-ai-1200: #2e1743; /** Primary text, and the darkest step. oklch(0.261 0.082 306), 15.91:1 on white. */
+  --co-base-color-ai-alpha-100: rgba(88, 5, 172, 0.012); /** Page background. Composites to ai.100 over white. */
+  --co-base-color-ai-alpha-200: rgba(76, 5, 148, 0.028); /** Subtle background. Composites to ai.200 over white. */
+  --co-base-color-ai-alpha-300: rgba(69, 1, 170, 0.059); /** Component fill at rest. Composites to ai.300 over white. */
+  --co-base-color-ai-alpha-400: rgba(79, 2, 178, 0.091); /** Component fill on hover. Composites to ai.400 over white. */
+  --co-base-color-ai-alpha-500: rgba(83, 1, 189, 0.122); /** Component fill pressed or selected. Composites to ai.500 over white. */
+  --co-base-color-ai-alpha-600: rgba(87, 0, 199, 0.161); /** Subtle border. Composites to ai.600 over white. */
+  --co-base-color-ai-alpha-700: rgba(95, 0, 217, 0.212); /** Default border, for dividers and decorative outlines. Composites to ai.700 over white. */
+  --co-base-color-ai-alpha-800: rgba(131, 0, 255, 0.581); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to ai.800 over white. */
+  --co-base-color-ai-alpha-900: rgba(136, 0, 255, 0.663); /** Solid fill. Composites to ai.900 over white. */
+  --co-base-color-ai-alpha-1000: rgba(143, 0, 255, 0.761); /** Solid fill on hover. Composites to ai.1000 over white. */
+  --co-base-color-ai-alpha-1100: rgba(149, 0, 235, 0.993); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to ai.1100 over white. */
+  --co-base-color-ai-alpha-1200: rgba(25, 0, 48, 0.91); /** Primary text, and the darkest step. Composites to ai.1200 over white. */
+  --co-base-color-olive-100: #fbfdf4; /** Page background. oklch(0.990 0.012 117), 1.03:1 on white. */
+  --co-base-color-olive-200: #f7fbe8; /** Subtle background. oklch(0.980 0.025 117), 1.05:1 on white. */
+  --co-base-color-olive-300: #eff6d4; /** Component fill at rest. oklch(0.959 0.045 117), 1.12:1 on white. */
+  --co-base-color-olive-400: #e6f0bf; /** Component fill on hover. oklch(0.935 0.065 117), 1.19:1 on white. */
+  --co-base-color-olive-500: #deebaa; /** Component fill pressed or selected. oklch(0.915 0.085 117), 1.27:1 on white. */
+  --co-base-color-olive-600: #d5e493; /** Subtle border. oklch(0.889 0.105 117), 1.37:1 on white. */
+  --co-base-color-olive-700: #c9da73; /** Default border, for dividers and decorative outlines. oklch(0.854 0.130 117), 1.53:1 on white. */
+  --co-base-color-olive-800: #889903; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.647 0.149 117), 3.18:1 on white. */
+  --co-base-color-olive-900: #7d8c02; /** Solid fill. oklch(0.607 0.139 117), 3.73:1 on white. */
+  --co-base-color-olive-1000: #738000; /** Solid fill on hover. oklch(0.569 0.131 117), 4.36:1 on white. */
+  --co-base-color-olive-1100: #5d6900; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.493 0.114 117), 6.02:1 on white. */
+  --co-base-color-olive-1200: #202410; /** Primary text, and the darkest step. oklch(0.250 0.035 118), 15.89:1 on white. */
+  --co-base-color-olive-alpha-100: rgba(164, 210, 5, 0.044); /** Page background. Composites to olive.100 over white. */
+  --co-base-color-olive-alpha-200: rgba(167, 211, 2, 0.091); /** Subtle background. Composites to olive.200 over white. */
+  --co-base-color-olive-alpha-300: rgba(160, 202, 1, 0.169); /** Component fill at rest. Composites to olive.300 over white. */
+  --co-base-color-olive-alpha-400: rgba(155, 195, 0, 0.251); /** Component fill on hover. Composites to olive.400 over white. */
+  --co-base-color-olive-alpha-500: rgba(156, 195, 1, 0.334); /** Component fill pressed or selected. Composites to olive.500 over white. */
+  --co-base-color-olive-alpha-600: rgba(156, 191, 0, 0.424); /** Subtle border. Composites to olive.600 over white. */
+  --co-base-color-olive-alpha-700: rgba(157, 188, 0, 0.55); /** Default border, for dividers and decorative outlines. Composites to olive.700 over white. */
+  --co-base-color-olive-alpha-800: rgba(135, 152, 0, 0.989); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to olive.800 over white. */
+  --co-base-color-olive-alpha-900: rgba(124, 139, 0, 0.993); /** Solid fill. Composites to olive.900 over white. */
+  --co-base-color-olive-alpha-1000: rgba(115, 128, 0, 1); /** Solid fill on hover. Composites to olive.1000 over white. */
+  --co-base-color-olive-alpha-1100: rgba(93, 105, 0, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to olive.1100 over white. */
+  --co-base-color-olive-alpha-1200: rgba(17, 22, 0, 0.938); /** Primary text, and the darkest step. Composites to olive.1200 over white. */
+  --co-base-color-periwinkle-100: #fcfcfd; /** Page background. oklch(0.991 0.001 286), 1.03:1 on white. */
+  --co-base-color-periwinkle-200: #f8f9fc; /** Subtle background. oklch(0.982 0.004 271), 1.05:1 on white. */
+  --co-base-color-periwinkle-300: #f0f2fa; /** Component fill at rest. oklch(0.962 0.011 275), 1.12:1 on white. */
+  --co-base-color-periwinkle-400: #e8ebf9; /** Component fill on hover. oklch(0.942 0.019 276), 1.19:1 on white. */
+  --co-base-color-periwinkle-500: #dfe3f7; /** Component fill pressed or selected. oklch(0.919 0.027 277), 1.28:1 on white. */
+  --co-base-color-periwinkle-600: #d6dbf7; /** Subtle border. oklch(0.896 0.039 278), 1.37:1 on white. */
+  --co-base-color-periwinkle-700: #c8cff6; /** Default border, for dividers and decorative outlines. oklch(0.862 0.055 277), 1.53:1 on white. */
+  --co-base-color-periwinkle-800: #7a84ff; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.665 0.180 277), 3.20:1 on white. */
+  --co-base-color-periwinkle-900: #6e74fe; /** Solid fill. oklch(0.627 0.201 277), 3.76:1 on white. */
+  --co-base-color-periwinkle-1000: #6464ff; /** Solid fill on hover. oklch(0.593 0.224 277), 4.37:1 on white. */
+  --co-base-color-periwinkle-1100: #533eff; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.528 0.267 277), 6.00:1 on white. */
+  --co-base-color-periwinkle-1200: #1a1b51; /** Primary text, and the darkest step. oklch(0.259 0.096 277), 15.91:1 on white. */
+  --co-base-color-periwinkle-alpha-100: rgba(5, 5, 88, 0.012); /** Page background. Composites to periwinkle.100 over white. */
+  --co-base-color-periwinkle-alpha-200: rgba(5, 41, 148, 0.028); /** Subtle background. Composites to periwinkle.200 over white. */
+  --co-base-color-periwinkle-alpha-300: rgba(1, 35, 170, 0.059); /** Component fill at rest. Composites to periwinkle.300 over white. */
+  --co-base-color-periwinkle-alpha-400: rgba(2, 35, 189, 0.091); /** Component fill on hover. Composites to periwinkle.400 over white. */
+  --co-base-color-periwinkle-alpha-500: rgba(1, 33, 192, 0.126); /** Component fill pressed or selected. Composites to periwinkle.500 over white. */
+  --co-base-color-periwinkle-alpha-600: rgba(0, 31, 205, 0.161); /** Subtle border. Composites to periwinkle.600 over white. */
+  --co-base-color-periwinkle-alpha-700: rgba(0, 33, 213, 0.216); /** Default border, for dividers and decorative outlines. Composites to periwinkle.700 over white. */
+  --co-base-color-periwinkle-alpha-800: rgba(0, 19, 255, 0.522); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to periwinkle.800 over white. */
+  --co-base-color-periwinkle-alpha-900: rgba(0, 11, 253, 0.569); /** Solid fill. Composites to periwinkle.900 over white. */
+  --co-base-color-periwinkle-alpha-1000: rgba(0, 0, 255, 0.608); /** Solid fill on hover. Composites to periwinkle.1000 over white. */
+  --co-base-color-periwinkle-alpha-1100: rgba(28, 0, 255, 0.757); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to periwinkle.1100 over white. */
+  --co-base-color-periwinkle-alpha-1200: rgba(0, 1, 61, 0.899); /** Primary text, and the darkest step. Composites to periwinkle.1200 over white. */
+  --co-base-color-rose-100: #fefcfc; /** Page background. oklch(0.993 0.002 17), 1.02:1 on white. */
+  --co-base-color-rose-200: #fcf8f9; /** Subtle background. oklch(0.982 0.004 360), 1.05:1 on white. */
+  --co-base-color-rose-300: #faeff1; /** Component fill at rest. oklch(0.961 0.012 5), 1.12:1 on white. */
+  --co-base-color-rose-400: #f8e7ea; /** Component fill on hover. oklch(0.942 0.019 5), 1.19:1 on white. */
+  --co-base-color-rose-500: #f8dee3; /** Component fill pressed or selected. oklch(0.923 0.029 5), 1.27:1 on white. */
+  --co-base-color-rose-600: #f7d3da; /** Subtle border. oklch(0.899 0.041 5), 1.37:1 on white. */
+  --co-base-color-rose-700: #f7c4cf; /** Default border, for dividers and decorative outlines. oklch(0.868 0.060 4), 1.53:1 on white. */
+  --co-base-color-rose-800: #ff4989; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.682 0.221 4), 3.20:1 on white. */
+  --co-base-color-rose-900: #ff0f7c; /** Solid fill. oklch(0.647 0.256 4), 3.74:1 on white. */
+  --co-base-color-rose-1000: #ec0071; /** Solid fill on hover. oklch(0.607 0.244 4), 4.37:1 on white. */
+  --co-base-color-rose-1100: #c4005d; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.528 0.213 4), 5.99:1 on white. */
+  --co-base-color-rose-1200: #3c1520; /** Primary text, and the darkest step. oklch(0.260 0.063 5), 15.91:1 on white. */
+  --co-base-color-rose-alpha-100: rgba(172, 5, 5, 0.012); /** Page background. Composites to rose.100 over white. */
+  --co-base-color-rose-alpha-200: rgba(148, 5, 41, 0.028); /** Subtle background. Composites to rose.200 over white. */
+  --co-base-color-rose-alpha-300: rgba(176, 1, 33, 0.063); /** Component fill at rest. Composites to rose.300 over white. */
+  --co-base-color-rose-alpha-400: rgba(181, 2, 34, 0.095); /** Component fill on hover. Composites to rose.400 over white. */
+  --co-base-color-rose-alpha-500: rgba(201, 1, 40, 0.13); /** Component fill pressed or selected. Composites to rose.500 over white. */
+  --co-base-color-rose-alpha-600: rgba(209, 1, 41, 0.173); /** Subtle border. Composites to rose.600 over white. */
+  --co-base-color-rose-alpha-700: rgba(221, 1, 48, 0.232); /** Default border, for dividers and decorative outlines. Composites to rose.700 over white. */
+  --co-base-color-rose-alpha-800: rgba(255, 0, 90, 0.714); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to rose.800 over white. */
+  --co-base-color-rose-alpha-900: rgba(255, 0, 116, 0.942); /** Solid fill. Composites to rose.900 over white. */
+  --co-base-color-rose-alpha-1000: rgba(236, 0, 113, 1); /** Solid fill on hover. Composites to rose.1000 over white. */
+  --co-base-color-rose-alpha-1100: rgba(196, 0, 93, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to rose.1100 over white. */
+  --co-base-color-rose-alpha-1200: rgba(43, 0, 12, 0.918); /** Primary text, and the darkest step. Composites to rose.1200 over white. */
+  --co-base-color-magenta-100: #fdfbfd; /** Page background. oklch(0.990 0.003 326), 1.03:1 on white. */
+  --co-base-color-magenta-200: #fdf8fc; /** Subtle background. oklch(0.984 0.007 332), 1.05:1 on white. */
+  --co-base-color-magenta-300: #faeff9; /** Component fill at rest. oklch(0.964 0.018 328), 1.12:1 on white. */
+  --co-base-color-magenta-400: #f9e6f7; /** Component fill on hover. oklch(0.945 0.030 329), 1.19:1 on white. */
+  --co-base-color-magenta-500: #f8dcf5; /** Component fill pressed or selected. oklch(0.925 0.045 329), 1.27:1 on white. */
+  --co-base-color-magenta-600: #f7d0f3; /** Subtle border. oklch(0.901 0.063 329), 1.38:1 on white. */
+  --co-base-color-magenta-700: #f7bff2; /** Default border, for dividers and decorative outlines. oklch(0.870 0.092 329), 1.53:1 on white. */
+  --co-base-color-magenta-800: #fd00fa; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.696 0.319 329), 3.20:1 on white. */
+  --co-base-color-magenta-900: #e900e6; /** Solid fill. oklch(0.654 0.299 329), 3.75:1 on white. */
+  --co-base-color-magenta-1000: #d700d4; /** Solid fill on hover. oklch(0.615 0.282 329), 4.34:1 on white. */
+  --co-base-color-magenta-1100: #b100af; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.532 0.244 329), 6.02:1 on white. */
+  --co-base-color-magenta-1200: #371535; /** Primary text, and the darkest step. oklch(0.262 0.073 330), 15.90:1 on white. */
+  --co-base-color-magenta-alpha-100: rgba(130, 5, 130, 0.016); /** Page background. Composites to magenta.100 over white. */
+  --co-base-color-magenta-alpha-200: rgba(184, 5, 148, 0.028); /** Subtle background. Composites to magenta.200 over white. */
+  --co-base-color-magenta-alpha-300: rgba(176, 1, 160, 0.063); /** Component fill at rest. Composites to magenta.300 over white. */
+  --co-base-color-magenta-alpha-400: rgba(194, 2, 174, 0.099); /** Component fill on hover. Composites to magenta.400 over white. */
+  --co-base-color-magenta-alpha-500: rgba(204, 1, 183, 0.138); /** Component fill pressed or selected. Composites to magenta.500 over white. */
+  --co-base-color-magenta-alpha-600: rgba(212, 1, 190, 0.185); /** Subtle border. Composites to magenta.600 over white. */
+  --co-base-color-magenta-alpha-700: rgba(223, 0, 203, 0.251); /** Default border, for dividers and decorative outlines. Composites to magenta.700 over white. */
+  --co-base-color-magenta-alpha-800: rgba(253, 0, 250, 1); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to magenta.800 over white. */
+  --co-base-color-magenta-alpha-900: rgba(233, 0, 230, 1); /** Solid fill. Composites to magenta.900 over white. */
+  --co-base-color-magenta-alpha-1000: rgba(215, 0, 212, 1); /** Solid fill on hover. Composites to magenta.1000 over white. */
+  --co-base-color-magenta-alpha-1100: rgba(177, 0, 175, 1); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to magenta.1100 over white. */
+  --co-base-color-magenta-alpha-1200: rgba(37, 0, 35, 0.918); /** Primary text, and the darkest step. Composites to magenta.1200 over white. */
   --co-base-color-neutral-100: #f8f9fa;
   --co-base-color-neutral-200: #e9ecef;
   --co-base-color-neutral-300: #dee2e6;
@@ -535,6 +775,7 @@
   --co-semantic-color-text-accent-hover: var(--co-base-color-blue-1000); /** Text of a hovered selected item, on the accent-muted-hover fill. */
   --co-semantic-color-text-accent-pressed: var(--co-base-color-blue-1100); /** Text of a pressed selected item, on the accent-muted-pressed fill. */
   --co-semantic-color-text-danger: var(--co-base-color-red-900); /** Error text: field error messages, InlineAlert errors. */
+  --co-semantic-color-text-ai: var(--co-base-color-ai-1100); /** AI-generated content and agent actions, such as the label on proposed content (0046); always with the AI icon and a label, never colour alone (0043). 5.99:1 on white, 5.68:1 on the page. */
   --co-semantic-color-background-default: var(--co-base-color-neutral-100); /** Deprecated: Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0. */
   --co-semantic-color-background-subtle: var(--co-base-color-neutral-000); /** Deprecated: Split by use (decision 0031): semantic.surface.raised for surfaces such as cards, inputs and sheets; component.slider.thumb.background for Slider's thumb. Removed in 3.0. */
   --co-semantic-color-background-emphasis: var(--co-base-color-neutral-900); /** Deprecated: Renamed to semantic.color.fill.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
@@ -594,6 +835,7 @@
   --co-semantic-color-icon-accent-hover: var(--co-base-color-blue-1000); /** Icon of a hovered selected item, matching color.text.accent-hover. */
   --co-semantic-color-icon-accent-pressed: var(--co-base-color-blue-1100); /** Icon of a pressed selected item, matching color.text.accent-pressed. */
   --co-semantic-color-icon-danger: var(--co-base-color-red-900); /** Error icons, such as in Alert and EmptyState. */
+  --co-semantic-color-icon-ai: var(--co-base-color-ai-1100); /** The AI icon on AI-generated content and agent actions (0043, 0046), next to its label. 5.99:1 on white, 5.68:1 on the page. */
   --co-semantic-color-financial-credit: var(--co-base-color-green-700); /** Deprecated: Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0. */
   --co-semantic-color-financial-credit-hover: var(--co-base-color-green-800); /** Deprecated: Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0. */
   --co-semantic-color-financial-debit: var(--co-base-color-red-900); /** Deprecated: Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0. */

package/dist/types/icons.d.mts

@@ -1,4 +1,4 @@
-export type IconName = 'add' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'creditCard' | 'crossCircle' | 'directionRight' | 'directionUp' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'info' | 'kebab' | 'lamp' | 'lineOut' | 'link' | 'meatballs' | 'menu' | 'message' | 'move' | 'mic' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'star' | 'starFilled' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide' | 'wallet';
+export type IconName = 'add' | 'ai' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'creditCard' | 'crossCircle' | 'directionRight' | 'directionUp' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'info' | 'kebab' | 'lamp' | 'lineOut' | 'link' | 'meatballs' | 'menu' | 'message' | 'move' | 'mic' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'star' | 'starFilled' | 'stop' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide' | 'wallet';
 /** Semantic category for grouping icons by purpose */
 export type IconCategory = 'action' | 'communication' | 'content' | 'feedback' | 'media' | 'navigation' | 'object' | 'status' | 'user';
 /** Enriched metadata for each icon entry in icons.json */

package/dist/types/icons.d.ts

@@ -1,4 +1,4 @@
-export type IconName = 'add' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'creditCard' | 'crossCircle' | 'directionRight' | 'directionUp' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'info' | 'kebab' | 'lamp' | 'lineOut' | 'link' | 'meatballs' | 'menu' | 'message' | 'move' | 'mic' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'star' | 'starFilled' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide' | 'wallet';
+export type IconName = 'add' | 'ai' | 'addRing' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'back' | 'bell' | 'cancel' | 'caret' | 'caretDown' | 'caretUp' | 'check' | 'checkRing' | 'close' | 'copy' | 'creditCard' | 'crossCircle' | 'directionRight' | 'directionUp' | 'edit' | 'export' | 'fileDocSearch' | 'filter' | 'info' | 'kebab' | 'lamp' | 'lineOut' | 'link' | 'meatballs' | 'menu' | 'message' | 'move' | 'mic' | 'order' | 'paper' | 'pause' | 'play' | 'playBack' | 'refresh' | 'remove' | 'search' | 'star' | 'starFilled' | 'stop' | 'table' | 'trash' | 'userBox' | 'view' | 'viewHide' | 'wallet';
 /** Semantic category for grouping icons by purpose */
 export type IconCategory = 'action' | 'communication' | 'content' | 'feedback' | 'media' | 'navigation' | 'object' | 'status' | 'user';
 /** Enriched metadata for each icon entry in icons.json */

package/dist/types/icons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icons.mjs","sources":["../../src/types/icons.ts"],"sourcesContent":["// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["iconsData","iconsJson"],"mappings":";;AAAA;AACA;AACA;AA2FA;AACO,IAAMA,SAAS,GAAGC;;;;"}
+{"version":3,"file":"icons.mjs","sources":["../../src/types/icons.ts"],"sourcesContent":["// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'ai'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'stop'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["iconsData","iconsJson"],"mappings":";;AAAA;AACA;AACA;AA6FA;AACO,IAAMA,SAAS,GAAGC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@common-origin/design-system",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "description": "Common Origin Design System - Framework-agnostic atomic design components with comprehensive WCAG 2.2 AA testing",
   "private": false,
   "main": "dist/index.js",