@cnc-ti/layout-basic 8.5.0 → 8.6.0

package/dist/index.css

@@ -328,6 +328,8 @@ video {
   display: none;
 }
 :root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
   --ring: 222.2 84% 4.9%;
   --muted: 210 40% 96.1%;
   --muted-foreground: 215.4 16.3% 46.9%;
@@ -447,12 +449,28 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-inset-0 {
   inset: 0px;
 }
+.cnc-inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
 .-cnc-right-0\.5 {
   right: -0.125rem;
 }
 .-cnc-top-0\.5 {
   top: -0.125rem;
 }
+.cnc-bottom-1 {
+  bottom: 0.25rem;
+}
+.cnc-bottom-full {
+  bottom: 100%;
+}
+.cnc-left-0 {
+  left: 0px;
+}
+.cnc-left-1\/2 {
+  left: 50%;
+}
 .cnc-left-2 {
   left: 0.5rem;
 }
@@ -546,6 +564,9 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-mr-2 {
   margin-right: 0.5rem;
 }
+.cnc-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .cnc-mt-1 {
   margin-top: 0.25rem;
 }
@@ -582,10 +603,42 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-grid {
   display: grid;
 }
+.cnc-size-1 {
+  width: 0.25rem;
+  height: 0.25rem;
+}
+.cnc-size-12 {
+  width: 3rem;
+  height: 3rem;
+}
+.cnc-size-16 {
+  width: 4rem;
+  height: 4rem;
+}
+.cnc-size-24 {
+  width: 6rem;
+  height: 6rem;
+}
+.cnc-size-3\.5 {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.cnc-size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+.cnc-size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .cnc-size-6 {
   width: 1.5rem;
   height: 1.5rem;
 }
+.cnc-size-8 {
+  width: 2rem;
+  height: 2rem;
+}
 .cnc-h-10 {
   height: 2.5rem;
 }
@@ -661,6 +714,12 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-max-h-\[70px\] {
   max-height: 70px;
 }
+.cnc-min-h-48 {
+  min-height: 12rem;
+}
+.cnc-min-h-\[96px\] {
+  min-height: 96px;
+}
 .cnc-w-1\/2 {
   width: 50%;
 }
@@ -715,6 +774,10 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-w-full {
   width: 100%;
 }
+.cnc-w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
 .cnc-min-w-0 {
   min-width: 0px;
 }
@@ -730,6 +793,9 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-min-w-\[var\(--radix-select-trigger-width\)\] {
   min-width: var(--radix-select-trigger-width);
 }
+.cnc-min-w-full {
+  min-width: 100%;
+}
 .cnc-max-w-\[42rem\] {
   max-width: 42rem;
 }
@@ -742,6 +808,12 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-max-w-full {
   max-width: 100%;
 }
+.cnc-max-w-md {
+  max-width: 28rem;
+}
+.cnc-max-w-xs {
+  max-width: 20rem;
+}
 .cnc-flex-1 {
   flex: 1 1 0%;
 }
@@ -751,6 +823,10 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-origin-\[--radix-popover-content-transform-origin\] {
   transform-origin: var(--radix-popover-content-transform-origin);
 }
+.cnc--translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .cnc-translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -771,6 +847,10 @@ input[type=date]::-webkit-calendar-picker-indicator {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.cnc-rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .cnc-rotate-45 {
   --tw-rotate: 45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -792,9 +872,15 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-list-none {
   list-style-type: none;
 }
+.cnc-grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
 .cnc-grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.cnc-grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
 .cnc-flex-row {
   flex-direction: row;
 }
@@ -819,6 +905,9 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-items-baseline {
   align-items: baseline;
 }
+.cnc-justify-start {
+  justify-content: flex-start;
+}
 .cnc-justify-end {
   justify-content: flex-end;
 }
@@ -849,6 +938,16 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-gap-\[2px\] {
   gap: 2px;
 }
+.cnc-gap-x-2 {
+  -moz-column-gap: 0.5rem;
+  column-gap: 0.5rem;
+}
+.cnc-gap-y-1 {
+  row-gap: 0.25rem;
+}
+.cnc-gap-y-3 {
+  row-gap: 0.75rem;
+}
 .cnc-space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
@@ -859,6 +958,23 @@ input[type=date]::-webkit-calendar-picker-indicator {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.cnc-divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.cnc-divide-brand-gray-50 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
+}
+.cnc-divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
+}
+.cnc-divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
+}
 .cnc-overflow-hidden {
   overflow: hidden;
 }
@@ -879,6 +995,9 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-whitespace-nowrap {
   white-space: nowrap;
 }
+.cnc-break-all {
+  word-break: break-all;
+}
 .cnc-rounded {
   border-radius: 0.25rem;
 }
@@ -942,6 +1061,9 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-border-solid {
   border-style: solid;
 }
+.cnc-border-dashed {
+  border-style: dashed;
+}
 .cnc-border-brand-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(3 40 132 / var(--tw-border-opacity, 1));
@@ -973,10 +1095,18 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-border-input {
   border-color: hsl(var(--input));
 }
+.cnc-border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
+}
 .cnc-border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
 }
+.cnc-border-slate-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
+}
 .cnc-border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
@@ -991,6 +1121,13 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-bg-\[\#00000005\] {
   background-color: #00000005;
 }
+.cnc-bg-background {
+  background-color: hsl(var(--background));
+}
+.cnc-bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+}
 .cnc-bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
@@ -1029,10 +1166,17 @@ input[type=date]::-webkit-calendar-picker-indicator {
   --tw-bg-opacity: 1;
   background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
 }
+.cnc-bg-brand-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
+}
 .cnc-bg-brand-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 207 96 / var(--tw-bg-opacity, 1));
 }
+.cnc-bg-brand-green-100\/20 {
+  background-color: rgb(37 207 96 / 0.2);
+}
 .cnc-bg-brand-green-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(27 185 82 / var(--tw-bg-opacity, 1));
@@ -1059,6 +1203,10 @@ input[type=date]::-webkit-calendar-picker-indicator {
   --tw-bg-opacity: 1;
   background-color: rgb(0 25 87 / var(--tw-bg-opacity, 1));
 }
+.cnc-bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
 .cnc-bg-transparent {
   background-color: transparent;
 }
@@ -1073,12 +1221,22 @@ input[type=date]::-webkit-calendar-picker-indicator {
   -o-object-fit: contain;
   object-fit: contain;
 }
+.cnc-object-cover {
+  -o-object-fit: cover;
+  object-fit: cover;
+}
 .cnc-p-0 {
   padding: 0px;
 }
 .cnc-p-1 {
   padding: 0.25rem;
 }
+.cnc-p-1\.5 {
+  padding: 0.375rem;
+}
+.cnc-p-2 {
+  padding: 0.5rem;
+}
 .cnc-p-3 {
   padding: 0.75rem;
 }
@@ -1091,6 +1249,10 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-p-6 {
   padding: 1.5rem;
 }
+.cnc-px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 .cnc-px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1199,6 +1361,9 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-text-center {
   text-align: center;
 }
+.cnc-text-right {
+  text-align: right;
+}
 .cnc-text-end {
   text-align: end;
 }
@@ -1236,6 +1401,10 @@ input[type=date]::-webkit-calendar-picker-indicator {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.cnc-text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
 .cnc-text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1255,9 +1424,18 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-font-semibold {
   font-weight: 600;
 }
+.cnc-uppercase {
+  text-transform: uppercase;
+}
+.cnc-italic {
+  font-style: italic;
+}
 .cnc-leading-10 {
   line-height: 2.5rem;
 }
+.cnc-leading-4 {
+  line-height: 1rem;
+}
 .cnc-leading-none {
   line-height: 1;
 }
@@ -1270,9 +1448,16 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .cnc-tracking-tight {
   letter-spacing: -0.025em;
 }
+.cnc-tracking-wider {
+  letter-spacing: 0.05em;
+}
 .cnc-tracking-widest {
   letter-spacing: 0.1em;
 }
+.cnc-text-\[\#002f87\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 47 135 / var(--tw-text-opacity, 1));
+}
 .cnc-text-\[\#1F2C4D\] {
   --tw-text-opacity: 1;
   color: rgb(31 44 77 / var(--tw-text-opacity, 1));
@@ -1289,6 +1474,10 @@ input[type=date]::-webkit-calendar-picker-indicator {
   --tw-text-opacity: 1;
   color: rgb(1 48 164 / var(--tw-text-opacity, 1));
 }
+.cnc-text-brand-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(3 40 132 / var(--tw-text-opacity, 1));
+}
 .cnc-text-brand-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(31 44 77 / var(--tw-text-opacity, 1));
@@ -1317,23 +1506,74 @@ input[type=date]::-webkit-calendar-picker-indicator {
   --tw-text-opacity: 1;
   color: rgb(37 207 96 / var(--tw-text-opacity, 1));
 }
+.cnc-text-brand-green-300 {
+  --tw-text-opacity: 1;
+  color: rgb(15 158 65 / var(--tw-text-opacity, 1));
+}
+.cnc-text-brand-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.cnc-text-foreground {
+  color: hsl(var(--foreground));
+}
 .cnc-text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
 .cnc-text-popover-foreground {
   color: hsl(var(--popover-foreground));
 }
+.cnc-text-primary {
+  --tw-text-opacity: 1;
+  color: rgb(1 48 164 / var(--tw-text-opacity, 1));
+}
 .cnc-text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
+.cnc-text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+.cnc-text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+}
+.cnc-text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
+}
+.cnc-text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
+}
+.cnc-text-slate-700 {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
+}
+.cnc-text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
+}
 .cnc-text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.cnc-underline {
+  text-decoration-line: underline;
+}
 .cnc-no-underline {
   text-decoration-line: none;
 }
+.cnc-decoration-primary {
+  text-decoration-color: #0130A4;
+}
+.cnc-decoration-2 {
+  text-decoration-thickness: 2px;
+}
+.cnc-underline-offset-4 {
+  text-underline-offset: 4px;
+}
 .cnc-opacity-0 {
   opacity: 0;
 }
@@ -1413,6 +1653,9 @@ input[type=date]::-webkit-calendar-picker-indicator {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(247 250 255 / var(--tw-ring-opacity, 1));
 }
+.cnc-ring-offset-background {
+  --tw-ring-offset-color: hsl(var(--background));
+}
 .cnc-transition {
   transition-property:
     color,
@@ -1551,15 +1794,24 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .file\:cnc-font-medium::file-selector-button {
   font-weight: 500;
 }
+.file\:cnc-text-foreground::file-selector-button {
+  color: hsl(var(--foreground));
+}
 .placeholder\:cnc-text-muted-foreground::-moz-placeholder {
   color: hsl(var(--muted-foreground));
 }
 .placeholder\:cnc-text-muted-foreground::placeholder {
   color: hsl(var(--muted-foreground));
 }
+.first\:cnc-pt-0:first-child {
+  padding-top: 0px;
+}
 .last\:cnc-border-b-0:last-child {
   border-bottom-width: 0px;
 }
+.last\:cnc-pb-0:last-child {
+  padding-bottom: 0px;
+}
 .hover\:cnc-bg-brand-blue-400\/90:hover {
   background-color: rgb(1 48 164 / 0.9);
 }
@@ -1575,6 +1827,9 @@ input[type=date]::-webkit-calendar-picker-indicator {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
 }
+.hover\:cnc-bg-brand-gray-10\/50:hover {
+  background-color: rgb(245 245 245 / 0.5);
+}
 .hover\:cnc-bg-brand-green-100\/80:hover {
   background-color: rgb(37 207 96 / 0.8);
 }
@@ -1588,6 +1843,14 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .hover\:cnc-bg-primary\/90:hover {
   background-color: rgb(1 48 164 / 0.9);
 }
+.hover\:cnc-bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+.hover\:cnc-bg-slate-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+}
 .hover\:cnc-bg-slate-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
@@ -1611,10 +1874,22 @@ input[type=date]::-webkit-calendar-picker-indicator {
   --tw-text-opacity: 1;
   color: rgb(31 44 77 / var(--tw-text-opacity, 1));
 }
+.hover\:cnc-text-brand-red-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
 .hover\:cnc-text-brand-red-600:hover {
   --tw-text-opacity: 1;
   color: rgb(207 66 66 / var(--tw-text-opacity, 1));
 }
+.hover\:cnc-text-primary:hover {
+  --tw-text-opacity: 1;
+  color: rgb(1 48 164 / var(--tw-text-opacity, 1));
+}
+.hover\:cnc-text-slate-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
+}
 .hover\:cnc-text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1625,6 +1900,9 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .hover\:cnc-opacity-100:hover {
   opacity: 1;
 }
+.hover\:cnc-opacity-80:hover {
+  opacity: 0.8;
+}
 .hover\:cnc-brightness-75:hover {
   --tw-brightness: brightness(.75);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1690,6 +1968,19 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .disabled\:cnc-opacity-50:disabled {
   opacity: 0.5;
 }
+.disabled\:cnc-opacity-60:disabled {
+  opacity: 0.6;
+}
+.cnc-group:focus-within .group-focus-within\:cnc-opacity-100 {
+  opacity: 1;
+}
+.cnc-group:hover .group-hover\:cnc-opacity-100 {
+  opacity: 1;
+}
+.cnc-group[aria-pressed=true] .group-aria-pressed\:cnc-bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .data-\[disabled\=true\]\:cnc-pointer-events-none[data-disabled=true] {
   pointer-events: none;
 }
@@ -1810,12 +2101,24 @@ input[type=date]::-webkit-calendar-picker-indicator {
 .data-\[state\=closed\]\:cnc-slide-out-to-left-1\/2[data-state=closed] {
   --tw-exit-translate-x: -50%;
 }
+.data-\[state\=closed\]\:cnc-slide-out-to-left-full[data-state=closed] {
+  --tw-exit-translate-x: -100%;
+}
+.data-\[state\=closed\]\:cnc-slide-out-to-right-full[data-state=closed] {
+  --tw-exit-translate-x: 100%;
+}
 .data-\[state\=closed\]\:cnc-slide-out-to-top-\[48\%\][data-state=closed] {
   --tw-exit-translate-y: -48%;
 }
 .data-\[state\=open\]\:cnc-slide-in-from-left-1\/2[data-state=open] {
   --tw-enter-translate-x: -50%;
 }
+.data-\[state\=open\]\:cnc-slide-in-from-left-full[data-state=open] {
+  --tw-enter-translate-x: -100%;
+}
+.data-\[state\=open\]\:cnc-slide-in-from-right-full[data-state=open] {
+  --tw-enter-translate-x: 100%;
+}
 .data-\[state\=open\]\:cnc-slide-in-from-top-\[48\%\][data-state=open] {
   --tw-enter-translate-y: -48%;
 }
@@ -1824,12 +2127,33 @@ input[type=date]::-webkit-calendar-picker-indicator {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 @media (min-width: 640px) {
+  .sm\:cnc-w-\[--drawer-width\] {
+    width: var(--drawer-width);
+  }
+  .sm\:cnc-w-auto {
+    width: auto;
+  }
+  .sm\:cnc-max-w-full {
+    max-width: 100%;
+  }
   .sm\:cnc-flex-row {
     flex-direction: row;
   }
+  .sm\:cnc-flex-wrap {
+    flex-wrap: wrap;
+  }
+  .sm\:cnc-items-center {
+    align-items: center;
+  }
   .sm\:cnc-justify-end {
     justify-content: flex-end;
   }
+  .sm\:cnc-justify-center {
+    justify-content: center;
+  }
+  .sm\:cnc-justify-between {
+    justify-content: space-between;
+  }
   .sm\:cnc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1840,6 +2164,15 @@ input[type=date]::-webkit-calendar-picker-indicator {
   }
 }
 @media (min-width: 768px) {
+  .md\:cnc-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .md\:cnc-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .md\:cnc-grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
   .md\:cnc-flex-row {
     flex-direction: row;
   }