@chayns-ui/core 0.6.0 → 0.8.0

package/dist/date-time-picker.css

@@ -0,0 +1,121 @@
+@layer chayns.components {
+  .chayns-date-time-picker {
+    display: inline-block;
+    max-inline-size: 100%;
+    position: relative;
+  }
+
+  .chayns-date-time-picker--time {
+    min-inline-size: 100px;
+  }
+
+  .chayns-date-time-picker__trigger {
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    min-block-size: calc(1.2em + 2 * var(--input-py) + 3px);
+    padding: var(--input-py) var(--input-px);
+    border: 1.5px solid var(--input-border);
+    border-radius: var(--k10);
+    background: var(--surface);
+    color: var(--text);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1.2;
+    outline: none;
+    text-align: start;
+  }
+
+  .chayns-date-time-picker__trigger:focus-visible {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
+  }
+
+  .chayns-date-time-picker__label {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: var(--k10);
+    padding-inline: var(--k5);
+    background: var(--surface);
+    color: var(--text-3);
+    font-size: var(--fs-body);
+    line-height: 1.2;
+    pointer-events: none;
+    transform: translateY(calc(var(--input-py) + 1.5px + 0.6em - 50%));
+    transform-origin: left center;
+    white-space: nowrap;
+  }
+
+  .chayns-date-time-picker--open .chayns-date-time-picker__label,
+  .chayns-date-time-picker--filled .chayns-date-time-picker__label {
+    color: var(--accent);
+    transform: translateY(-50%) scale(0.8);
+  }
+
+  .chayns-date-time-picker__popup {
+    position: absolute;
+    inset-block-start: calc(100% + var(--k4));
+    inset-inline: 0;
+    z-index: var(--z-popover);
+    overflow: hidden;
+    padding: var(--k8);
+    border: 1px solid var(--border);
+    border-radius: var(--k12);
+    background: var(--surface);
+    box-shadow: var(--shadow-pop);
+  }
+
+  .chayns-date-time-picker__wheels {
+    display: flex;
+    position: relative;
+    block-size: calc(var(--k40) * 5);
+  }
+
+  .chayns-date-time-picker__selection {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline: var(--k8);
+    z-index: 1;
+    block-size: var(--k40);
+    border-radius: var(--k6);
+    background: rgb(var(--accent-rgb), 0.1);
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+
+  .chayns-date-time-picker__wheel {
+    flex: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-block: calc(var(--k40) * 2);
+    perspective: 18rem;
+    perspective-origin: center;
+    scrollbar-width: none;
+    scroll-snap-type: y mandatory;
+    text-align: center;
+    user-select: none;
+  }
+
+  .chayns-date-time-picker__wheel:focus-visible {
+    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+    outline-offset: 2px;
+  }
+
+  .chayns-date-time-picker__wheel::-webkit-scrollbar {
+    display: none;
+  }
+
+  .chayns-date-time-picker__wheel-option {
+    display: block;
+    inline-size: 100%;
+    min-block-size: var(--k40);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font: inherit;
+    scroll-snap-align: center;
+    transform-origin: center;
+    transform-style: preserve-3d;
+  }
+}

package/dist/index.d.ts

@@ -2,14 +2,22 @@ export { default as Button } from './components/button/Button.js';
 export { default as IconButton } from './components/icon-button/IconButton.js';
 export type { ButtonContent, ButtonIcon, ButtonProps, ButtonVariant, } from './components/button/Button.types.js';
 export { BUTTON_VARIANTS } from './components/button/Button.types.js';
-export type { IconButtonProps } from './components/icon-button/IconButton.types.js';
+export type { IconButtonBaseProps, IconButtonProps, } from './components/icon-button/IconButton.types.js';
 export { default as Badge } from './components/badge/Badge.js';
 export { BADGE_SIZES, BADGE_TONES } from './components/badge/Badge.types.js';
 export type { BadgeProps, BadgeSize, BadgeTone } from './components/badge/Badge.types.js';
+export { default as Skeleton } from './components/skeleton/Skeleton.js';
+export { SKELETON_SHAPES } from './components/skeleton/Skeleton.types.js';
+export type { SkeletonProps, SkeletonShape } from './components/skeleton/Skeleton.types.js';
+export { default as Banner } from './components/banner/Banner.js';
+export { BANNER_TONES } from './components/banner/Banner.types.js';
+export type { BannerProps, BannerTone, ClosableBannerProps, StaticBannerProps, } from './components/banner/Banner.types.js';
 export { default as ComboBox } from './components/combo-box/ComboBox.js';
 export type { ComboBoxMultipleProps, ComboBoxOptionProps, ComboBoxProps, ComboBoxSingleProps, } from './components/combo-box/ComboBox.types.js';
 export { default as TextField } from './components/text-field/TextField.js';
 export type { TextFieldProps } from './components/text-field/TextField.types.js';
+export { default as DateTimePicker } from './components/date-time-picker/DateTimePicker.js';
+export { DATE_TIME_PICKER_MODES, DATE_TIME_PICKER_MINUTE_STEPS, type DateTimePickerMinuteStep, type DateTimePickerMode, type DateTimePickerProps, type DateTimePickerWheelLabels, } from './components/date-time-picker/DateTimePicker.types.js';
 export { default as TextArea } from './components/text-area/TextArea.js';
 export type { TextAreaProps } from './components/text-area/TextArea.types.js';
 export { default as Checkbox } from './components/checkbox/Checkbox.js';
@@ -20,15 +28,13 @@ export { default as RadioGroup } from './components/radio-group/RadioGroup.js';
 export type { RadioGroupProps, RadioProps } from './components/radio-group/RadioGroup.types.js';
 export { default as SegmentedControl } from './components/segmented-control/SegmentedControl.js';
 export type { SegmentedControlProps, SegmentProps, } from './components/segmented-control/SegmentedControl.types.js';
-export { default as MessageBox } from './components/message-box/MessageBox.js';
-export type { MessageBoxProps, MessageBoxTone } from './components/message-box/MessageBox.types.js';
 export { default as Popup } from './components/popup/Popup.js';
 export { default as PopupList } from './components/popup/PopupList.js';
 export type { PopupListItem, PopupListProps, PopupProps } from './components/popup/Popup.types.js';
 export { default as SplitButton } from './components/split-button/SplitButton.js';
 export type { SplitButtonProps } from './components/split-button/SplitButton.types.js';
 export { default as Card } from './components/card/Card.js';
-export type { CardProps } from './components/card/Card.types.js';
+export type { CardHeaderProps, CardProps } from './components/card/Card.types.js';
 export { default as Avatar } from './components/avatar/Avatar.js';
 export { default as AvatarGroup } from './components/avatar-group/AvatarGroup.js';
 export type { AvatarProps } from './components/avatar/Avatar.types.js';
@@ -37,5 +43,6 @@ export { default as List } from './components/list/List.js';
 export type { ListItemActionProps, ListItemPartProps, ListItemProps, ListItemStatusProps, ListProps, } from './components/list/List.types.js';
 export { default as Accordion } from './components/accordion/Accordion.js';
 export { default as AccordionGroup } from './components/accordion-group/AccordionGroup.js';
-export type { AccordionProps, AccordionGroupProps, } from './components/accordion/Accordion.types.js';
+export { ACCORDION_APPEARANCES } from './components/accordion/Accordion.types.js';
+export type { AccordionAppearance, AccordionContentProps, AccordionHeadContentProps, AccordionHeadProps, AccordionProps, AccordionGroupProps, AccordionPartProps, } from './components/accordion/Accordion.types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -3,14 +3,19 @@ import IconButton from "./components/icon-button/IconButton.js";
 import { BUTTON_VARIANTS } from "./components/button/Button.types.js";
 import Badge from "./components/badge/Badge.js";
 import { BADGE_SIZES, BADGE_TONES } from "./components/badge/Badge.types.js";
+import Skeleton from "./components/skeleton/Skeleton.js";
+import { SKELETON_SHAPES } from "./components/skeleton/Skeleton.types.js";
+import Banner from "./components/banner/Banner.js";
+import { BANNER_TONES } from "./components/banner/Banner.types.js";
 import ComboBox from "./components/combo-box/ComboBox.js";
 import TextField from "./components/text-field/TextField.js";
+import { DATE_TIME_PICKER_MINUTE_STEPS, DATE_TIME_PICKER_MODES } from "./components/date-time-picker/DateTimePicker.types.js";
+import DateTimePicker from "./components/date-time-picker/DateTimePicker.js";
 import TextArea from "./components/text-area/TextArea.js";
 import Checkbox from "./components/checkbox/Checkbox.js";
 import Switch from "./components/switch/Switch.js";
 import RadioGroup from "./components/radio-group/RadioGroup.js";
 import SegmentedControl from "./components/segmented-control/SegmentedControl.js";
-import MessageBox from "./components/message-box/MessageBox.js";
 import Popup_default from "./components/popup/Popup.js";
 import PopupList from "./components/popup/PopupList.js";
 import SplitButton from "./components/split-button/SplitButton.js";
@@ -20,4 +25,5 @@ import AvatarGroup from "./components/avatar-group/AvatarGroup.js";
 import List from "./components/list/List.js";
 import Accordion from "./components/accordion/Accordion.js";
 import AccordionGroup from "./components/accordion-group/AccordionGroup.js";
-export { Accordion, AccordionGroup, Avatar, AvatarGroup, BADGE_SIZES, BADGE_TONES, BUTTON_VARIANTS, Badge, Button, Card, Checkbox, ComboBox, IconButton, List, MessageBox, Popup_default as Popup, PopupList, RadioGroup, SegmentedControl, SplitButton, Switch, TextArea, TextField };
+import { ACCORDION_APPEARANCES } from "./components/accordion/Accordion.types.js";
+export { ACCORDION_APPEARANCES, Accordion, AccordionGroup, Avatar, AvatarGroup, BADGE_SIZES, BADGE_TONES, BANNER_TONES, BUTTON_VARIANTS, Badge, Banner, Button, Card, Checkbox, ComboBox, DATE_TIME_PICKER_MINUTE_STEPS, DATE_TIME_PICKER_MODES, DateTimePicker, IconButton, List, Popup_default as Popup, PopupList, RadioGroup, SKELETON_SHAPES, SegmentedControl, Skeleton, SplitButton, Switch, TextArea, TextField };

package/dist/list.css

@@ -10,7 +10,7 @@
   .chayns-list-item {
     display: flex;
     align-items: stretch;
-    border-radius: 10px;
+    border-radius: 12px;
   }
 
   .chayns-list-item__action {
@@ -21,9 +21,9 @@
     gap: var(--k12);
     min-inline-size: 0;
     margin: 0;
-    padding: var(--k10) var(--k16);
+    padding: var(--k12) var(--k16);
     border: 0;
-    border-radius: 10px;
+    border-radius: 12px;
     background: transparent;
     color: var(--text);
     cursor: pointer;
@@ -77,7 +77,7 @@
     flex: none;
     align-items: flex-start;
     gap: var(--k8);
-    padding: var(--k10) var(--k16) 0 0;
+    padding: var(--k12) var(--k16) 0 0;
     color: var(--text-3);
     font-size: var(--fs-meta);
   }

package/dist/radio-group.css

@@ -23,7 +23,7 @@
 
   .chayns-radio {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--k12);
     color: var(--text);
     cursor: pointer;
@@ -94,6 +94,18 @@
     line-height: 1.4;
   }
 
+  .chayns-radio__content {
+    display: grid;
+    gap: var(--k2);
+    min-inline-size: 0;
+  }
+
+  .chayns-radio__description {
+    color: var(--text-3);
+    font-size: var(--fs-meta);
+    line-height: 1.4;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .chayns-radio__control::after {
       transition: none;

package/dist/segmented-control.css

@@ -6,16 +6,20 @@
   }
 
   .chayns-segmented-control__label {
-    color: var(--text);
-    font-size: var(--fs-body);
-    font-weight: 600;
-    line-height: 1.4;
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
   }
 
   .chayns-segmented-control__segments {
     position: relative;
     display: inline-grid;
-    grid-auto-columns: minmax(0, 1fr);
+    inline-size: max-content;
+    max-inline-size: 100%;
+    grid-auto-columns: 1fr;
     grid-auto-flow: column;
     gap: var(--k4);
     padding: var(--k4);
@@ -37,11 +41,15 @@
   }
 
   .chayns-segmented-control__segment {
-    min-block-size: var(--ctrl-h);
+    min-block-size: var(--k32);
     position: relative;
     z-index: 1;
     min-inline-size: 0;
-    padding: calc(9 * var(--u)) var(--k12);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--k6);
+    padding: var(--k8) var(--k18);
     border: 0;
     border-radius: 8px;
     background: transparent;
@@ -51,6 +59,15 @@
     font-weight: 500;
     line-height: 1.4;
     text-align: center;
+    white-space: nowrap;
+  }
+
+  .chayns-segmented-control__segment:not(.chayns-segmented-control__segment--selected) {
+    color: var(--text-3);
+  }
+
+  .chayns-segmented-control__segment--selected {
+    color: var(--accent);
   }
 
   .chayns-segmented-control__segment:focus-visible {

package/dist/skeleton.css

@@ -0,0 +1,41 @@
+@layer chayns.components {
+  .chayns-skeleton {
+    display: block;
+    background: linear-gradient(
+      90deg,
+      var(--surface-alt) 25%,
+      var(--border-soft) 37%,
+      var(--surface-alt) 63%
+    );
+    background-size: 800px 100%;
+    animation: chayns-skeleton-shimmer 1.4s ease infinite;
+  }
+
+  .chayns-skeleton--square {
+    border-radius: 0;
+  }
+
+  .chayns-skeleton--rounded {
+    border-radius: 6px;
+  }
+
+  .chayns-skeleton--circular {
+    border-radius: 50%;
+  }
+
+  @keyframes chayns-skeleton-shimmer {
+    0% {
+      background-position: -400px 0;
+    }
+
+    100% {
+      background-position: 400px 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-skeleton {
+      animation: none;
+    }
+  }
+}

package/dist/split-button.css

@@ -66,7 +66,7 @@
   }
 
   .chayns-split-button__trigger:active:not(:disabled) {
-    transform: scale(0.97);
+    transform: scale(0.96);
   }
 
   .chayns-split-button__trigger.chayns-button--primary:active:not(:disabled) {

package/dist/styles.css

@@ -1,5 +1,7 @@
 @import url('./button.css');
 @import url('./badge.css');
+@import url('./skeleton.css');
+@import url('./banner.css');
 @import url('./combo-box.css');
 @import url('./card.css');
 @import url('./avatar.css');
@@ -8,9 +10,9 @@
 @import url('./popup.css');
 @import url('./split-button.css');
 @import url('./text-field.css');
+@import url('./date-time-picker.css');
 @import url('./text-area.css');
 @import url('./checkbox.css');
 @import url('./switch.css');
 @import url('./radio-group.css');
 @import url('./segmented-control.css');
-@import url('./message-box.css');

package/dist/switch.css

@@ -1,6 +1,7 @@
 @layer chayns.components {
   .chayns-switch {
-    display: inline-flex;
+    display: flex;
+    inline-size: 100%;
     align-items: center;
     justify-content: space-between;
     gap: var(--k14);
@@ -25,11 +26,23 @@
     line-height: 1.4;
   }
 
+  .chayns-switch__content {
+    display: grid;
+    gap: var(--k2);
+    min-inline-size: 0;
+  }
+
+  .chayns-switch__description {
+    color: var(--text-3);
+    font-size: var(--fs-meta);
+    line-height: 1.4;
+  }
+
   .chayns-switch__control {
     box-sizing: border-box;
     display: flex;
-    inline-size: 42px;
-    block-size: 24px;
+    inline-size: var(--k42);
+    block-size: var(--k24);
     flex: none;
     padding: var(--k3);
     border-radius: 999px;
@@ -41,7 +54,7 @@
     block-size: var(--k18);
     border-radius: 50%;
     background: var(--surface);
-    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+    box-shadow: var(--shadow-card);
     transform: translateX(0);
     transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
   }
@@ -51,7 +64,7 @@
   }
 
   .chayns-switch__input:checked + .chayns-switch__control .chayns-switch__knob {
-    transform: translateX(18px);
+    transform: translateX(var(--k18));
   }
 
   .chayns-switch__input:focus-visible + .chayns-switch__control {

package/dist/text-area.css

@@ -8,7 +8,7 @@
     box-sizing: border-box;
     display: block;
     inline-size: 100%;
-    min-block-size: 84px;
+    min-block-size: var(--k84);
     padding: var(--input-py) var(--input-px);
     border: 1.5px solid var(--input-border);
     border-radius: 10px;
@@ -112,7 +112,7 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--k10);
-    margin-block-start: 6px;
+    margin-block-start: var(--k6);
     font-size: var(--fs-caption);
     color: var(--text-3);
   }

package/dist/text-field.css

@@ -114,7 +114,7 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--k10);
-    margin-block-start: 6px;
+    margin-block-start: var(--k6);
     font-size: var(--fs-caption);
     color: var(--text-3);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",
@@ -24,6 +24,8 @@
     },
     "./button.css": "./dist/button.css",
     "./badge.css": "./dist/badge.css",
+    "./skeleton.css": "./dist/skeleton.css",
+    "./banner.css": "./dist/banner.css",
     "./combo-box.css": "./dist/combo-box.css",
     "./card.css": "./dist/card.css",
     "./avatar.css": "./dist/avatar.css",
@@ -32,12 +34,12 @@
     "./popup.css": "./dist/popup.css",
     "./split-button.css": "./dist/split-button.css",
     "./text-field.css": "./dist/text-field.css",
+    "./date-time-picker.css": "./dist/date-time-picker.css",
     "./text-area.css": "./dist/text-area.css",
     "./checkbox.css": "./dist/checkbox.css",
     "./switch.css": "./dist/switch.css",
     "./radio-group.css": "./dist/radio-group.css",
     "./segmented-control.css": "./dist/segmented-control.css",
-    "./message-box.css": "./dist/message-box.css",
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },

package/dist/components/message-box/MessageBox.d.ts

@@ -1,4 +0,0 @@
-import type { MessageBoxProps } from './MessageBox.types.js';
-declare function MessageBox({ children, className, tone, ...asideProps }: MessageBoxProps): import("react").JSX.Element;
-export default MessageBox;
-//# sourceMappingURL=MessageBox.d.ts.map

package/dist/components/message-box/MessageBox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageBox.d.ts","sourceRoot":"","sources":["../../../src/components/message-box/MessageBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,UAAU,EAAE,EAAE,eAAe,+BAU5F;AAED,eAAe,UAAU,CAAC"}

package/dist/components/message-box/MessageBox.js

@@ -1,19 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/components/message-box/MessageBox.tsx
-function MessageBox({ children, className, tone = "neutral", ...asideProps }) {
-	const resolvedClassName = [
-		"chayns-message-box",
-		`chayns-message-box--${tone}`,
-		className
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsx("aside", {
-		...asideProps,
-		className: resolvedClassName,
-		role: "note",
-		children
-	});
-}
-//#endregion
-export { MessageBox as default };
-
-//# sourceMappingURL=MessageBox.js.map

package/dist/components/message-box/MessageBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageBox.js","names":[],"sources":["../../../src/components/message-box/MessageBox.tsx"],"sourcesContent":["import type { MessageBoxProps } from './MessageBox.types.js';\n\nfunction MessageBox({ children, className, tone = 'neutral', ...asideProps }: MessageBoxProps) {\n  const resolvedClassName = ['chayns-message-box', `chayns-message-box--${tone}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <aside {...asideProps} className={resolvedClassName} role=\"note\">\n      {children}\n    </aside>\n  );\n}\n\nexport default MessageBox;\n"],"mappings":";;AAEA,SAAS,WAAW,EAAE,UAAU,WAAW,OAAO,WAAW,GAAG,cAA+B;CAC7F,MAAM,oBAAoB;EAAC;EAAsB,uBAAuB;EAAQ;CAAS,CAAC,CACvF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,oBAAC,SAAD;EAAO,GAAI;EAAY,WAAW;EAAmB,MAAK;EACvD;CACI,CAAA;AAEX"}

package/dist/components/message-box/MessageBox.types.d.ts

@@ -1,13 +0,0 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-/** Supported static MessageBox presentations. */
-export type MessageBoxTone = 'neutral' | 'admin' | 'warning';
-/** Props for a static, freely composed aside note. */
-export interface MessageBoxProps extends Omit<ComponentPropsWithRef<'aside'>, 'children' | 'role'> {
-    /** Surface presentation for the static note. */
-    tone?: MessageBoxTone;
-    /** Consumer-composed content such as title, text, icon and follow action. */
-    children: ReactNode;
-    /** MessageBox owns its static note role. */
-    role?: never;
-}
-//# sourceMappingURL=MessageBox.types.d.ts.map

package/dist/components/message-box/MessageBox.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/message-box/MessageBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,iDAAiD;AACjD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7D,sDAAsD;AACtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAChG,gDAAgD;IAChD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,6EAA6E;IAC7E,QAAQ,EAAE,SAAS,CAAC;IAEpB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}

package/dist/message-box.css

@@ -1,26 +0,0 @@
-@layer chayns.components {
-  .chayns-message-box {
-    box-sizing: border-box;
-    display: flex;
-    align-items: flex-start;
-    gap: var(--k12);
-    inline-size: 100%;
-    padding: var(--k16);
-    border: 1px solid var(--input-border);
-    border-radius: 12px;
-  }
-
-  .chayns-message-box--neutral {
-    background: var(--surface-2);
-  }
-
-  .chayns-message-box--admin {
-    border-color: var(--accent-300);
-    background: var(--tint);
-  }
-
-  .chayns-message-box--warning {
-    border-color: var(--warning);
-    background: var(--warning-bg);
-  }
-}