@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/commonjs/utils/spacing.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Spacing = exports.Padding = exports.Margin = void 0;
+var _index = require("../theme/index.js");
+const Spacing = exports.Spacing = {
+  get none() {
+    return (0, _index.getTheme)().spacing.none;
+  },
+  get xxs() {
+    return (0, _index.getTheme)().spacing.xxs;
+  },
+  get xs() {
+    return (0, _index.getTheme)().spacing.xs;
+  },
+  get sm() {
+    return (0, _index.getTheme)().spacing.sm;
+  },
+  get md() {
+    return (0, _index.getTheme)().spacing.md;
+  },
+  get lg() {
+    return (0, _index.getTheme)().spacing.lg;
+  },
+  get xl() {
+    return (0, _index.getTheme)().spacing.xl;
+  },
+  get '2xl'() {
+    return (0, _index.getTheme)().spacing['2xl'];
+  },
+  get '3xl'() {
+    return (0, _index.getTheme)().spacing['3xl'];
+  },
+  get '4xl'() {
+    return (0, _index.getTheme)().spacing['4xl'];
+  }
+};
+const Padding = exports.Padding = {
+  all: token => ({
+    padding: (0, _index.getTheme)().spacing[token]
+  }),
+  horizontal: token => ({
+    paddingHorizontal: (0, _index.getTheme)().spacing[token]
+  }),
+  vertical: token => ({
+    paddingVertical: (0, _index.getTheme)().spacing[token]
+  }),
+  top: token => ({
+    paddingTop: (0, _index.getTheme)().spacing[token]
+  }),
+  bottom: token => ({
+    paddingBottom: (0, _index.getTheme)().spacing[token]
+  }),
+  left: token => ({
+    paddingLeft: (0, _index.getTheme)().spacing[token]
+  }),
+  right: token => ({
+    paddingRight: (0, _index.getTheme)().spacing[token]
+  })
+};
+const Margin = exports.Margin = {
+  all: token => ({
+    margin: (0, _index.getTheme)().spacing[token]
+  }),
+  horizontal: token => ({
+    marginHorizontal: (0, _index.getTheme)().spacing[token]
+  }),
+  vertical: token => ({
+    marginVertical: (0, _index.getTheme)().spacing[token]
+  }),
+  top: token => ({
+    marginTop: (0, _index.getTheme)().spacing[token]
+  }),
+  bottom: token => ({
+    marginBottom: (0, _index.getTheme)().spacing[token]
+  }),
+  left: token => ({
+    marginLeft: (0, _index.getTheme)().spacing[token]
+  }),
+  right: token => ({
+    marginRight: (0, _index.getTheme)().spacing[token]
+  })
+};
+//# sourceMappingURL=spacing.js.map

package/lib/commonjs/utils/squircle.js

@@ -0,0 +1,158 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.squircleHostRadius = exports.squircleApplies = exports.SQUIRCLE_SMOOTHING = exports.SQUIRCLE_MIN_RADIUS = void 0;
+exports.squirclePath = squirclePath;
+/**
+ * Smooth ("squircle") corners as an SVG path.
+ *
+ * iOS draws Apple's continuous curve natively (`borderCurve: 'continuous'`,
+ * see `./corners`). Android has no such style, so the components draw the
+ * shape themselves with react-native-svg and this path.
+ *
+ * Ported from figma-squircle 1.1.0 by Tien Pham (MIT licence, copyright
+ * 2021, https://github.com/phamfoo/figma-squircle), which follows Figma's
+ * "Desperately seeking squircles" article and MartinRGB's approximation.
+ * Only the uniform-radius branch is kept: the components draw the shape
+ * only when all four corners agree and leave the platform's own corner in
+ * place otherwise. The curve is Figma's, not Apple's; the two are close
+ * but not identical.
+ */
+
+/** Figma's "iOS" corner-smoothing preset. */
+const SQUIRCLE_SMOOTHING = exports.SQUIRCLE_SMOOTHING = 0.6;
+/**
+ * Below this radius the curve is not worth an overlay: the squircle bulges
+ * past the circle by about a sixth of the radius at the diagonal (1 dp at
+ * 6 dp, computed from the path), which is under a device pixel on most
+ * screens. Checkbox corners and small chips stay native.
+ */
+const SQUIRCLE_MIN_RADIUS = exports.SQUIRCLE_MIN_RADIUS = 6;
+
+/**
+ * Whether a squircle is worth drawing for this box: a radius under
+ * `SQUIRCLE_MIN_RADIUS` changes nothing a user can see, and once the radius
+ * reaches half the shorter side (a pill) there is no straight run left for
+ * the curve to blend into.
+ */
+const squircleApplies = (width, height, radius) => radius >= SQUIRCLE_MIN_RADIUS && width > 0 && height > 0 && 2 * radius < Math.min(width, height);
+
+/**
+ * The native corner radius an OPAQUE host keeps under the overlay.
+ *
+ * Figma's squircle sits inside the circle of the same radius: it keeps the
+ * circle's arc at the diagonal and cuts deeper along the tangents. A host
+ * that must keep an opaque native background (an elevated surface, whose
+ * Android shadow is cast from its own outline) would therefore show its
+ * circular corner peeking out around the shape. Doubling the native radius
+ * pushes that circle inside the squircle everywhere (checked numerically at
+ * 1.8x and above); the shadow follows the deeper corner with no visible
+ * change. Capped at half the shorter side, as a pill would be.
+ */
+exports.squircleApplies = squircleApplies;
+const squircleHostRadius = (width, height, radius) => Math.min(2 * radius, Math.min(width, height) / 2);
+exports.squircleHostRadius = squircleHostRadius;
+const toRadians = degrees => degrees * Math.PI / 180;
+const num = value => {
+  const fixed = value.toFixed(4);
+  // Keep "-0.0000" from leaking into the path.
+  return fixed === '-0.0000' ? '0.0000' : fixed;
+};
+
+/** Figure 11.1 / 12.2 of Figma's article: the eight control points of one corner. */
+const cornerParams = (cornerRadius, smoothing, budget) => {
+  // p = (1 + smoothing) * q, and q = R because the corner angle is 90 degrees.
+  let p = (1 + smoothing) * cornerRadius;
+  // Figma's behaviour: when the smoothing does not fit, cap it so p stays
+  // inside the budget (half the shorter side).
+  const maxSmoothing = budget / cornerRadius - 1;
+  const cornerSmoothing = Math.min(smoothing, maxSmoothing);
+  p = Math.min(p, budget);
+
+  // A plain rounded rectangle has a 90 degree arc; smoothing shortens it.
+  const arcMeasure = 90 * (1 - cornerSmoothing);
+  const arcSectionLength = Math.sin(toRadians(arcMeasure / 2)) * cornerRadius * Math.SQRT2;
+
+  // The distance between control points P3 and P4 in the article.
+  const angleAlpha = (90 - arcMeasure) / 2;
+  const p3ToP4Distance = cornerRadius * Math.tan(toRadians(angleAlpha / 2));
+  const angleBeta = 45 * cornerSmoothing;
+  const c = p3ToP4Distance * Math.cos(toRadians(angleBeta));
+  const d = c * Math.tan(toRadians(angleBeta));
+  const b = (p - arcSectionLength - c - d) / 3;
+  const a = 2 * b;
+  return {
+    a,
+    b,
+    c,
+    d,
+    p,
+    arcSectionLength,
+    cornerRadius
+  };
+};
+const topRight = ({
+  cornerRadius: r,
+  a,
+  b,
+  c,
+  d,
+  arcSectionLength: s
+}) => `c ${num(a)} 0 ${num(a + b)} 0 ${num(a + b + c)} ${num(d)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(s)} ${num(s)} ` + `c ${num(d)} ${num(c)} ${num(d)} ${num(b + c)} ${num(d)} ${num(a + b + c)}`;
+const bottomRight = ({
+  cornerRadius: r,
+  a,
+  b,
+  c,
+  d,
+  arcSectionLength: s
+}) => `c 0 ${num(a)} 0 ${num(a + b)} ${num(-d)} ${num(a + b + c)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(-s)} ${num(s)} ` + `c ${num(-c)} ${num(d)} ${num(-(b + c))} ${num(d)} ${num(-(a + b + c))} ${num(d)}`;
+const bottomLeft = ({
+  cornerRadius: r,
+  a,
+  b,
+  c,
+  d,
+  arcSectionLength: s
+}) => `c ${num(-a)} 0 ${num(-(a + b))} 0 ${num(-(a + b + c))} ${num(-d)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(-s)} ${num(-s)} ` + `c ${num(-d)} ${num(-c)} ${num(-d)} ${num(-(b + c))} ${num(-d)} ${num(-(a + b + c))}`;
+const topLeft = ({
+  cornerRadius: r,
+  a,
+  b,
+  c,
+  d,
+  arcSectionLength: s
+}) => `c 0 ${num(-a)} 0 ${num(-(a + b))} ${num(d)} ${num(-(a + b + c))} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(s)} ${num(-s)} ` + `c ${num(c)} ${num(-d)} ${num(b + c)} ${num(-d)} ${num(a + b + c)} ${num(-d)}`;
+
+/**
+ * The closed path of a smooth-cornered rectangle whose bounds are
+ * `(inset, inset)` to `(width - inset, height - inset)`, drawn clockwise
+ * from the top edge. Every corner shares one radius; the radius and the
+ * smoothing are capped so the curve fits the box (Figma's own behaviour).
+ */
+function squirclePath({
+  width,
+  height,
+  radius,
+  smoothing = SQUIRCLE_SMOOTHING,
+  inset = 0
+}) {
+  const w = Math.max(0, width - 2 * inset);
+  const h = Math.max(0, height - 2 * inset);
+  const x0 = inset;
+  const y0 = inset;
+  const r = Math.max(0, radius - inset);
+  const budget = Math.min(w, h) / 2;
+  const cornerRadius = Math.min(r, budget);
+  if (cornerRadius <= 0) {
+    return `M ${num(x0)} ${num(y0)} L ${num(x0 + w)} ${num(y0)} L ${num(x0 + w)} ${num(y0 + h)} L ${num(x0)} ${num(y0 + h)} Z`;
+  }
+  const corner = cornerParams(cornerRadius, Math.min(1, Math.max(0, smoothing)), budget);
+  const {
+    p
+  } = corner;
+  return `M ${num(x0 + w - p)} ${num(y0)} ` + `${topRight(corner)} ` + `L ${num(x0 + w)} ${num(y0 + h - p)} ` + `${bottomRight(corner)} ` + `L ${num(x0 + p)} ${num(y0 + h)} ` + `${bottomLeft(corner)} ` + `L ${num(x0)} ${num(y0 + p)} ` + `${topLeft(corner)} Z`;
+}
+//# sourceMappingURL=squircle.js.map

package/lib/commonjs/utils/warnUnknownProps.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warnUnknownProps = void 0;
+var _mobileCore = require("@webority/mobile-core");
+/**
+ * Dev-time warning for props a component does not accept.
+ *
+ * This exists for a class of bug that nothing in a JS consumer's toolchain
+ * objects to. A component destructures the props it knows and ignores the rest,
+ * so a renamed or mistyped prop is simply dropped — silently, at every call
+ * site. The web library hit this three times in one day: `body` instead of
+ * `message` left nine destructive confirm dialogs with no explanatory text, and
+ * `name` instead of `icon` emptied an entire actions column across 23 call
+ * sites. Neither failed a build, a lint or a test.
+ *
+ * Our components are TypeScript, so a TS consumer is already protected at
+ * compile time. Several apps in the fleet are plain JS, and they get nothing —
+ * which is who this is for. The check therefore has to be a runtime one, and it
+ * has to run where the mistake is made: the consumer's dev server.
+ *
+ * DEV ONLY — the `__DEV__` guard means it costs a release build nothing.
+ */
+const warnUnknownProps = (componentName, rest) => {
+  if (!__DEV__ || !rest) {
+    return;
+  }
+  const unknown = Object.keys(rest).filter(key => !isAllowed(key));
+  if (unknown.length === 0) {
+    return;
+  }
+  _mobileCore.Logger.warn(`[${componentName}] received prop(s) it does not accept: ${unknown.join(', ')}. ` + "They were ignored — check for a rename or a typo against the component's props.");
+};
+
+/**
+ * Keys that legitimately arrive through `...rest` and must never warn. The list
+ * is deliberately generous: a false positive fires on correct code, and a
+ * warning people learn to ignore is worse than no warning at all.
+ */
+exports.warnUnknownProps = warnUnknownProps;
+const ALLOWED_EXACT = new Set(['children', 'key', 'ref', 'style', 'testID', 'collapsable', 'nativeID', 'pointerEvents', 'removeClippedSubviews', 'renderToHardwareTextureAndroid', 'shouldRasterizeIOS', 'needsOffscreenAlphaCompositing', 'hitSlop', 'onLayout', 'importantForAccessibility', 'role']);
+const ALLOWED_PREFIXES = ['accessibility', 'aria-', 'on', 'data-'];
+const isAllowed = key => ALLOWED_EXACT.has(key) || ALLOWED_PREFIXES.some(p => key.startsWith(p));
+//# sourceMappingURL=warnUnknownProps.js.map

package/lib/module/components/Accordion/Accordion.js

@@ -0,0 +1,337 @@
+"use strict";
+
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { defaultIcons } from "../AppIcon/defaultIcons.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AccordionGroupContext = /*#__PURE__*/createContext(null);
+const useAccordionGroup = () => useContext(AccordionGroupContext);
+const AccordionGroup = ({
+  children,
+  allowMultiple = false,
+  defaultExpandedKeys,
+  expandedKeys: expandedKeysProp,
+  onChange,
+  style,
+  testID
+}) => {
+  const isControlled = expandedKeysProp !== undefined;
+  const [internalKeys, setInternalKeys] = useState(defaultExpandedKeys ?? []);
+  const keys = isControlled ? expandedKeysProp : internalKeys;
+  const setKeys = useCallback(next => {
+    if (!isControlled) {
+      setInternalKeys(next);
+    }
+    onChange?.(next);
+  }, [isControlled, onChange]);
+  const toggle = useCallback(id => {
+    const isOpen = keys.includes(id);
+    let next;
+    if (isOpen) {
+      next = keys.filter(k => k !== id);
+    } else if (allowMultiple) {
+      next = [...keys, id];
+    } else {
+      next = [id];
+    }
+    setKeys(next);
+  }, [keys, allowMultiple, setKeys]);
+  const isExpanded = useCallback(id => keys.includes(id), [keys]);
+  const ctx = useMemo(() => ({
+    isExpanded,
+    toggle,
+    allowMultiple
+  }), [isExpanded, toggle, allowMultiple]);
+  return /*#__PURE__*/_jsx(AccordionGroupContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(View, {
+      style: style,
+      testID: testID,
+      children: children
+    })
+  });
+};
+AccordionGroup.displayName = 'AccordionGroup';
+
+/** The header's expand indicator: the icon set's line chevron, rotated open. */
+const Chevron = ({
+  rotate,
+  color
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [chevronStyles.icon, {
+      transform: [{
+        rotate
+      }]
+    }],
+    accessible: false,
+    children: (theme.icons?.chevronDown ?? defaultIcons.chevronDown)({
+      size: 16,
+      color
+    })
+  });
+};
+const chevronStyles = StyleSheet.create({
+  icon: {
+    width: 16,
+    height: 16,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+const Accordion = props => {
+  const {
+    title,
+    children,
+    id,
+    expanded: expandedProp,
+    defaultExpanded = false,
+    onChange,
+    icon,
+    disabled = false,
+    variant = 'plain',
+    accessibilityLabel,
+    style,
+    headerStyle,
+    contentStyle,
+    contentWrapperStyle,
+    containerStyle,
+    testID,
+    loading = false,
+    haptic
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const group = useAccordionGroup();
+  const isControlled = expandedProp !== undefined;
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const groupExpanded = group && id ? group.isExpanded(id) : null;
+  const expanded = groupExpanded !== null ? groupExpanded : isControlled ? !!expandedProp : internalExpanded;
+  const [measuredHeight, setMeasuredHeight] = useState(null);
+  const heightAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const opacityAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const rotateAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const lastExpandedRef = useRef(expanded);
+  useEffect(() => {
+    // Skip animation when state matches the previous value (e.g. on mount).
+    if (lastExpandedRef.current === expanded) {
+      return;
+    }
+    lastExpandedRef.current = expanded;
+    const anim = Animated.parallel([Animated.timing(heightAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }),
+    // Opacity & rotate run alongside the height interpolation (which must
+    // use the JS driver). Driving them on JS too keeps everything in lockstep
+    // with no driver-mixing warnings, and is fine for two small properties.
+    Animated.timing(opacityAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), Animated.timing(rotateAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    })]);
+    anim.start();
+    return () => anim.stop();
+  }, [expanded, heightAnim, opacityAnim, rotateAnim, theme.motion]);
+  const onContentLayout = useCallback(e => {
+    const h = e.nativeEvent.layout.height;
+    if (h > 0 && h !== measuredHeight) {
+      setMeasuredHeight(h);
+    }
+  }, [measuredHeight]);
+  const handlePress = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    if (group && id) {
+      group.toggle(id);
+      onChange?.(!expanded);
+      return;
+    }
+    if (!isControlled) {
+      setInternalExpanded(!expanded);
+    }
+    onChange?.(!expanded);
+  }, [disabled, group, id, expanded, isControlled, onChange, haptic]);
+  const rotate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg']
+  });
+  const animatedHeight = measuredHeight === null ? undefined : heightAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, measuredHeight]
+  });
+  const cardStyle = variant === 'card' ? [styles.card, theme.shadows.sm, {
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radius.md,
+    ...smoothCorners
+  }] : null;
+  if (loading) {
+    return /*#__PURE__*/_jsx(AccordionSkeleton, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [cardStyle, style, containerStyle],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      onPress: handlePress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        expanded,
+        disabled
+      },
+      style: ({
+        pressed
+      }) => [styles.header, headerStyle, {
+        opacity: disabled ? 0.55 : pressed ? 0.85 : 1
+      }],
+      children: [icon ? /*#__PURE__*/_jsx(View, {
+        style: styles.iconLeft,
+        children: icon
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
+          fontSize: theme.typography.fontSize.base,
+          fontWeight: theme.typography.fontWeight.semibold
+        }],
+        numberOfLines: 2,
+        children: title
+      }), /*#__PURE__*/_jsx(Chevron, {
+        rotate: rotate,
+        color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary
+      })]
+    }), measuredHeight === null ? /*#__PURE__*/_jsx(View, {
+      style: styles.measurer,
+      pointerEvents: "none",
+      onLayout: onContentLayout,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.content, contentStyle],
+        children: children
+      })
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.contentWrapper, measuredHeight === null ? {
+        height: 0,
+        opacity: 0
+      } : {
+        height: animatedHeight,
+        opacity: opacityAnim
+      }, contentWrapperStyle]
+      // Re-measure if children change size by listening to layout of inner
+      ,
+      children: /*#__PURE__*/_jsx(View, {
+        onLayout: onContentLayout,
+        style: [styles.content, contentStyle],
+        children: children
+      })
+    })]
+  });
+};
+Accordion.displayName = 'Accordion';
+
+/**
+ * Placeholder shape for `<Accordion>`. Header pill with a title-line
+ * skeleton; content is collapsed (matches the closed-by-default behaviour).
+ */
+const AccordionSkeleton = ({
+  variant = 'plain',
+  style
+}) => {
+  const theme = useTheme();
+  const isCard = variant === 'card';
+  return /*#__PURE__*/_jsx(View, {
+    style: [isCard ? {
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm,
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.md,
+      ...smoothCorners
+    } : {
+      paddingVertical: theme.spacing.sm
+    }, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "60%",
+        height: 18,
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        width: 16,
+        height: 16,
+        radius: "sm",
+        style: {
+          marginLeft: theme.spacing.sm
+        }
+      })]
+    })
+  });
+};
+AccordionSkeleton.displayName = 'AccordionSkeleton';
+Accordion.Skeleton = AccordionSkeleton;
+
+// Suppress unused warnings on platforms that don't support LayoutAnimation
+void LayoutAnimation;
+const buildStyles = theme => StyleSheet.create({
+  card: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.components.accordion?.cardPaddingVertical ?? 4,
+    marginVertical: theme.spacing.xs
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: theme.spacing.sm
+  },
+  iconLeft: {
+    marginRight: theme.spacing.sm
+  },
+  title: {
+    flex: 1
+  },
+  contentWrapper: {
+    overflow: 'hidden'
+  },
+  content: {
+    paddingBottom: theme.spacing.sm
+  },
+  measurer: {
+    position: 'absolute',
+    opacity: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    zIndex: -1
+  }
+});
+export { Accordion, AccordionGroup };
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

package/lib/module/components/Accordion/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Accordion, AccordionGroup, default } from "./Accordion.js";
+//# sourceMappingURL=index.js.map