@revikornmann/muka-ui 0.2.1

package/dist/esm/components/PullToRefresh/PullToRefresh.css

@@ -0,0 +1,44 @@
+/* PullToRefresh Component Styles */
+
+.muka-pull-to-refresh {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.muka-pull-to-refresh__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: var(--spacing-2);
+  color: var(--color-text-subtle-default);
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.muka-pull-to-refresh__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.16s ease;
+}
+
+.muka-pull-to-refresh__scroller {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-x: clip;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+  will-change: transform;
+}

package/dist/esm/components/PullToRefresh/PullToRefresh.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { Spinner } from '../Spinner';
+import { Icon } from '../Icon';
+import './PullToRefresh.css';
+const RUBBER_BAND_DAMPING = 0.5;
+/**
+ * PullToRefresh — drag-down-to-refresh gesture on a scroll container.
+ *
+ * Activates only when the inner content is scrolled to the top. Releases past
+ * the threshold trigger `onRefresh`; releases before the threshold rubber-band
+ * back without firing.
+ *
+ * Compose around a `ChatMessageList`, an inbox, or any feed where the user
+ * expects "pull down for new content".
+ */
+export const PullToRefresh = ({ children, onRefresh, threshold = 64, maxPull = 120, disabled = false, indicator, 'aria-label': ariaLabel = 'Pull to refresh', className = '', }) => {
+    const scrollerRef = useRef(null);
+    const dragRef = useRef(null);
+    const [pull, setPull] = useState(0);
+    const [refreshing, setRefreshing] = useState(false);
+    const [animating, setAnimating] = useState(true);
+    const animateTo = useCallback((next) => {
+        setAnimating(true);
+        setPull(next);
+    }, []);
+    const handlePointerDown = (e) => {
+        if (disabled || refreshing)
+            return;
+        if (e.pointerType === 'mouse' && e.button !== 0)
+            return;
+        const el = scrollerRef.current;
+        if (!el || el.scrollTop > 0)
+            return;
+        dragRef.current = {
+            startY: e.clientY,
+            startX: e.clientX,
+            locked: null,
+            pointerId: e.pointerId,
+        };
+    };
+    const handlePointerMove = (e) => {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== e.pointerId)
+            return;
+        const dy = e.clientY - drag.startY;
+        const dx = e.clientX - drag.startX;
+        if (drag.locked === null) {
+            if (Math.abs(dy) < 8 && Math.abs(dx) < 8)
+                return;
+            if (dy > Math.abs(dx)) {
+                drag.locked = true;
+                scrollerRef.current?.setPointerCapture(e.pointerId);
+                setAnimating(false);
+            }
+            else {
+                drag.locked = false;
+                return;
+            }
+        }
+        if (!drag.locked || dy <= 0)
+            return;
+        e.preventDefault();
+        const rubberBanded = dy < threshold ? dy : threshold + (dy - threshold) * RUBBER_BAND_DAMPING;
+        setPull(Math.min(rubberBanded, maxPull));
+    };
+    const finishDrag = async (commit) => {
+        const drag = dragRef.current;
+        dragRef.current = null;
+        if (!drag || !drag.locked)
+            return;
+        if (commit && pull >= threshold) {
+            setRefreshing(true);
+            animateTo(threshold);
+            try {
+                await onRefresh();
+            }
+            finally {
+                setRefreshing(false);
+                animateTo(0);
+            }
+        }
+        else {
+            animateTo(0);
+        }
+    };
+    const handlePointerUp = () => {
+        void finishDrag(true);
+    };
+    const handlePointerCancel = () => {
+        void finishDrag(false);
+    };
+    const progress = Math.min(pull / threshold, 1);
+    const ready = progress >= 1;
+    const classes = [
+        'muka-pull-to-refresh',
+        refreshing && 'muka-pull-to-refresh--refreshing',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: classes, children: [_jsx("div", { className: "muka-pull-to-refresh__indicator", style: {
+                    height: pull,
+                    opacity: Math.min(progress * 1.5, 1),
+                    transition: animating
+                        ? 'height 0.22s ease, opacity 0.22s ease'
+                        : 'none',
+                }, "aria-hidden": pull === 0, "aria-label": ariaLabel, children: indicator ?? (refreshing ? (_jsx(Spinner, { size: "md" })) : (_jsx("span", { className: "muka-pull-to-refresh__chevron", style: {
+                        transform: `rotate(${ready ? 180 : 0}deg)`,
+                    }, children: _jsx(Icon, { name: "arrow-down", size: "md" }) }))) }), _jsx("div", { ref: scrollerRef, className: "muka-pull-to-refresh__scroller", style: {
+                    transform: `translateY(${pull}px)`,
+                    transition: animating
+                        ? 'transform 0.22s cubic-bezier(0.22, 1, 0.36, 1)'
+                        : 'none',
+                }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, children: children })] }));
+};
+export default PullToRefresh;
+//# sourceMappingURL=PullToRefresh.js.map

package/dist/esm/components/PullToRefresh/PullToRefresh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PullToRefresh.js","sourceRoot":"","sources":["../../../../components/PullToRefresh/PullToRefresh.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/PullToRefresh/index.js

@@ -0,0 +1,2 @@
+export { PullToRefresh } from './PullToRefresh';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/PullToRefresh/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/PullToRefresh/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC"}

package/dist/esm/components/Radio/Radio.css

@@ -0,0 +1,141 @@
+/* Radio Component Styles - Using Muka Design Tokens */
+
+/* Wrapper - clickable label container */
+.muka-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Control container */
+.muka-radio__control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* Hidden native input */
+.muka-radio__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Visual indicator (circle) */
+.muka-radio__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--radio-size-default);
+  height: var(--radio-size-default);
+  border-radius: var(--border-radius-full);
+  background-color: var(--radio-color-default-background);
+  border: var(--border-width-regular) solid var(--radio-color-default-border);
+  transition: all 0.15s ease;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.15);
+}
+
+/* Size variants */
+.muka-radio--sm .muka-radio__indicator {
+  width: var(--radio-size-sm);
+  height: var(--radio-size-sm);
+}
+
+.muka-radio--lg .muka-radio__indicator {
+  width: var(--radio-size-lg);
+  height: var(--radio-size-lg);
+}
+
+/* Inner dot (shown when checked) */
+.muka-radio__dot {
+  width: var(--radio-dot-size-default);
+  height: var(--radio-dot-size-default);
+  border-radius: var(--border-radius-full);
+  background-color: var(--radio-color-default-dot);
+  transform: scale(0);
+  transition: transform 0.15s ease;
+}
+
+.muka-radio--sm .muka-radio__dot {
+  width: var(--radio-dot-size-sm);
+  height: var(--radio-dot-size-sm);
+}
+
+.muka-radio--lg .muka-radio__dot {
+  width: var(--radio-dot-size-lg);
+  height: var(--radio-dot-size-lg);
+}
+
+/* Hover state - removed per design */
+
+/* Focus state */
+.muka-radio__input:focus-visible + .muka-radio__indicator {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Checked state */
+.muka-radio__input:checked + .muka-radio__indicator {
+  background-color: var(--radio-color-checked-background);
+  border-width: var(--border-width-bold);
+  border-color: var(--radio-color-checked-border);
+  box-shadow: none;
+}
+
+.muka-radio__input:checked + .muka-radio__indicator .muka-radio__dot {
+  background-color: var(--radio-color-checked-dot);
+  transform: scale(1);
+}
+
+/* Disabled state */
+.muka-radio--disabled .muka-radio__indicator {
+  background-color: var(--radio-color-disabled-background);
+  border-color: var(--radio-color-disabled-border);
+  box-shadow: none;
+}
+
+.muka-radio__input:disabled:checked + .muka-radio__indicator .muka-radio__dot {
+  background-color: var(--radio-color-disabled-dot);
+}
+
+/* Label text */
+.muka-radio__label {
+  font-family: var(--text-label-lg-regular-fontFamily);
+  font-weight: var(--text-label-lg-regular-fontWeight);
+  font-size: var(--text-label-lg-regular-fontSize);
+  line-height: var(--text-label-lg-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-radio--sm .muka-radio__label {
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  font-size: var(--text-label-md-regular-fontSize);
+  line-height: var(--text-label-md-regular-lineHeight);
+}
+
+.muka-radio--lg .muka-radio__label {
+  font-family: var(--text-label-xl-regular-fontFamily);
+  font-weight: var(--text-label-xl-regular-fontWeight);
+  font-size: var(--text-label-xl-regular-fontSize);
+  line-height: var(--text-label-xl-regular-lineHeight);
+}
+
+.muka-radio--disabled .muka-radio__label {
+  color: var(--color-text-subtle-default);
+}

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './Radio.css';
+/**
+ * Radio Component
+ *
+ * A circular selection control for single-choice options within a group.
+ * Built using the Muka design token system with support for:
+ * - 3 sizes: sm, md, lg
+ * - Interactive states: default, hover, checked, disabled
+ * - Label text with proper accessibility
+ * - Multi-brand theming through design tokens
+ *
+ * Tokens used:
+ * - radio.size.{size}
+ * - radio.dot.size.{size}
+ * - radio.color.{state}.{background|border|dot}
+ */
+export const Radio = ({ checked, defaultChecked, onChange, label, disabled = false, name, value, size = 'md', className = '', id, ...props }) => {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const wrapperClasses = [
+        'muka-radio',
+        `muka-radio--${size}`,
+        disabled && 'muka-radio--disabled',
+        className
+    ].filter(Boolean).join(' ');
+    return (_jsxs("label", { className: wrapperClasses, htmlFor: inputId, children: [_jsxs("span", { className: "muka-radio__control", children: [_jsx("input", { type: "radio", id: inputId, className: "muka-radio__input", checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }), _jsx("span", { className: "muka-radio__indicator", children: _jsx("span", { className: "muka-radio__dot" }) })] }), label && _jsx("span", { className: "muka-radio__label", children: label })] }));
+};
+export default Radio;
+//# sourceMappingURL=Radio.js.map

package/dist/esm/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../components/Radio/Radio.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,aAAa,CAAC;AAkCrB;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,OAAO,EACP,cAAc,EACd,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,WAAW,CAAC;IAElC,MAAM,cAAc,GAAG;QACrB,YAAY;QACZ,eAAe,IAAI,EAAE;QACrB,QAAQ,IAAI,sBAAsB;QAClC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iBAAO,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,aAChD,gBAAM,SAAS,EAAC,qBAAqB,aACnC,gBACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,KACR,KAAK,GACT,EACF,eAAM,SAAS,EAAC,uBAAuB,YACrC,eAAM,SAAS,EAAC,iBAAiB,GAAG,GAC/B,IACF,EACN,KAAK,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAQ,IACtD,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/esm/components/Radio/index.js

@@ -0,0 +1,3 @@
+export { Radio } from './Radio';
+export { Radio as default } from './Radio';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/components/RadioTile/RadioTile.css

@@ -0,0 +1,140 @@
+/* RadioTile Component Styles - Using Muka Design Tokens */
+
+/* Base tile styles - horizontal */
+.muka-radio-tile {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  background-color: var(--color-surface-level3);
+  cursor: pointer;
+  transition: border-color 0.15s ease, border-width 0.15s ease;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.muka-radio-tile--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Selected state */
+.muka-radio-tile[data-checked] {
+  border-width: var(--border-width-bold);
+  border-color: var(--color-action-default);
+}
+
+/* Vertical layout */
+.muka-radio-tile--vertical {
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  position: relative;
+  width: 160px;
+}
+
+/* Radio container */
+.muka-radio-tile__radio {
+  flex-shrink: 0;
+}
+
+/* Corner-positioned radio for vertical */
+.muka-radio-tile__radio--corner {
+  position: absolute;
+  top: var(--spacing-4);
+  left: var(--spacing-4);
+}
+
+/* Adjust corner position when selected (border is thicker) */
+.muka-radio-tile[data-checked] .muka-radio-tile__radio--corner {
+  top: calc(var(--spacing-4) - 1px);
+  left: calc(var(--spacing-4) - 1px);
+}
+
+/* Icon */
+.muka-radio-tile__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
+  color: var(--color-text-default-default);
+}
+
+.muka-radio-tile__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Image */
+.muka-radio-tile__image {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--border-radius-sm);
+}
+
+.muka-radio-tile__image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Horizontal image sizing */
+.muka-radio-tile__image--horizontal {
+  width: 40px;
+  height: 40px;
+}
+
+/* Vertical image sizing */
+.muka-radio-tile--vertical .muka-radio-tile__image {
+  width: 100%;
+  aspect-ratio: 4/3;
+}
+
+/* Content container */
+.muka-radio-tile__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-1);
+}
+
+/* Label */
+.muka-radio-tile__label {
+  font-family: var(--text-body-lg-regular-fontFamily);
+  font-weight: var(--text-body-lg-regular-fontWeight);
+  font-size: var(--text-body-lg-regular-fontSize);
+  line-height: var(--text-body-lg-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-radio-tile__label--bold {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-radio-tile__label--center {
+  text-align: center;
+}
+
+/* Caption */
+.muka-radio-tile__caption {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+/* Disabled states */
+.muka-radio-tile--disabled .muka-radio-tile__label,
+.muka-radio-tile--disabled .muka-radio-tile__icon {
+  color: var(--color-text-subtle-default);
+}

package/dist/esm/components/RadioTile/RadioTile.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Radio } from '../Radio';
+import './RadioTile.css';
+/**
+ * RadioTile Component
+ *
+ * A tile-style radio button with support for icons, images, and vertical layouts.
+ * Built using the Muka design token system.
+ *
+ * Variants:
+ * - Default: Radio with label
+ * - With icon: Radio with icon and label/caption
+ * - With image: Radio with image and label/caption
+ * - Vertical: Icon or image at top, label below, radio in corner
+ */
+export const RadioTile = ({ checked, defaultChecked, onChange, label, caption, icon, image, imageAlt = '', orientation = 'horizontal', disabled = false, name, value, className = '', id, ...props }) => {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const isVertical = orientation === 'vertical';
+    const wrapperClasses = [
+        'muka-radio-tile',
+        isVertical && 'muka-radio-tile--vertical',
+        disabled && 'muka-radio-tile--disabled',
+        className
+    ].filter(Boolean).join(' ');
+    // For vertical layout, we use data attribute to control checked styling via CSS
+    const tileProps = {
+        className: wrapperClasses,
+        'data-checked': checked || undefined,
+    };
+    if (isVertical) {
+        return (_jsxs("label", { ...tileProps, htmlFor: inputId, children: [_jsx("div", { className: "muka-radio-tile__radio muka-radio-tile__radio--corner", children: _jsx(Radio, { id: inputId, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }) }), icon && (_jsx("span", { className: "muka-radio-tile__icon", "aria-hidden": "true", children: icon })), image && (_jsx("div", { className: "muka-radio-tile__image", children: _jsx("img", { src: image, alt: imageAlt }) })), label && (_jsx("span", { className: "muka-radio-tile__label muka-radio-tile__label--center", children: label }))] }));
+    }
+    // Horizontal layout
+    return (_jsxs("label", { ...tileProps, htmlFor: inputId, children: [_jsx("div", { className: "muka-radio-tile__radio", children: _jsx(Radio, { id: inputId, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }) }), icon && (_jsx("span", { className: "muka-radio-tile__icon", "aria-hidden": "true", children: icon })), image && (_jsx("div", { className: "muka-radio-tile__image muka-radio-tile__image--horizontal", children: _jsx("img", { src: image, alt: imageAlt }) })), _jsxs("div", { className: "muka-radio-tile__content", children: [label && (_jsx("span", { className: `muka-radio-tile__label ${caption ? 'muka-radio-tile__label--bold' : ''}`, children: label })), caption && (_jsx("span", { className: "muka-radio-tile__caption", children: caption }))] })] }));
+};
+export default RadioTile;
+//# sourceMappingURL=RadioTile.js.map

package/dist/esm/components/RadioTile/RadioTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioTile.js","sourceRoot":"","sources":["../../../../components/RadioTile/RadioTile.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,iBAAiB,CAAC;AA8CzB;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,OAAO,EACP,cAAc,EACd,QAAQ,EACR,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,EAAE,EACb,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,WAAW,CAAC;IAElC,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAE9C,MAAM,cAAc,GAAG;QACrB,iBAAiB;QACjB,UAAU,IAAI,2BAA2B;QACzC,QAAQ,IAAI,2BAA2B;QACvC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,gFAAgF;IAChF,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,cAAc;QACzB,cAAc,EAAE,OAAO,IAAI,SAAS;KACrC,CAAC;IAEF,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,oBAAW,SAAS,EAAE,OAAO,EAAE,OAAO,aACpC,cAAK,SAAS,EAAC,uDAAuD,YACpE,KAAC,KAAK,IACJ,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,KACR,KAAK,GACT,GACE,EAEL,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACvD,IAAI,GACA,CACR,EAEA,KAAK,IAAI,CACR,cAAK,SAAS,EAAC,wBAAwB,YACrC,cAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,GAAI,GAC9B,CACP,EAEA,KAAK,IAAI,CACR,eAAM,SAAS,EAAC,uDAAuD,YACpE,KAAK,GACD,CACR,IACK,CACT,CAAC;IACJ,CAAC;IAED,oBAAoB;IACpB,OAAO,CACL,oBAAW,SAAS,EAAE,OAAO,EAAE,OAAO,aACpC,cAAK,SAAS,EAAC,wBAAwB,YACrC,KAAC,KAAK,IACJ,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,KACR,KAAK,GACT,GACE,EAEL,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACvD,IAAI,GACA,CACR,EAEA,KAAK,IAAI,CACR,cAAK,SAAS,EAAC,2DAA2D,YACxE,cAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,GAAI,GAC9B,CACP,EAED,eAAK,SAAS,EAAC,0BAA0B,aACtC,KAAK,IAAI,CACR,eAAM,SAAS,EAAE,0BAA0B,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,EAAE,YACvF,KAAK,GACD,CACR,EACA,OAAO,IAAI,CACV,eAAM,SAAS,EAAC,0BAA0B,YACvC,OAAO,GACH,CACR,IACG,IACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/esm/components/RadioTile/index.js

@@ -0,0 +1,3 @@
+export { RadioTile } from './RadioTile';
+export { RadioTile as default } from './RadioTile';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/RadioTile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/RadioTile/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,aAAa,CAAC"}