@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/lib/module/core/design/atoms/Tab/Tab.js

@@ -0,0 +1,45 @@
+// Tab atom — ported from AmityUiKitWeb core/design/atoms/Tab.
+// One atom with three variants (pill, underlined, icon). Web react-aria Tab
+// (selection + click) → RN Pressable + `active`/`onPress`. Hover and
+// focus-visible are web-only interaction states and are intentionally omitted.
+
+import { cloneElement, isValidElement } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { useStyles } from './styles';
+export function Tab({
+  variant = 'pill',
+  label,
+  icon,
+  active = false,
+  disabled = false,
+  onPress
+}) {
+  const {
+    styles,
+    iconColor
+  } = useStyles(variant, active, disabled);
+  const tintedIcon = /*#__PURE__*/isValidElement(icon) ? /*#__PURE__*/cloneElement(icon, {
+    color: iconColor
+  }) : icon;
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.tab,
+    onPress: onPress,
+    disabled: disabled,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: active,
+      disabled
+    }
+  }, variant === 'icon' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.icon
+  }, tintedIcon), /*#__PURE__*/React.createElement(View, {
+    style: styles.indicator
+  })) : variant === 'underlined' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    style: styles.label
+  }, label), /*#__PURE__*/React.createElement(View, {
+    style: styles.indicator
+  })) : /*#__PURE__*/React.createElement(Text, {
+    style: styles.label
+  }, label));
+}
+//# sourceMappingURL=Tab.js.map

package/lib/module/core/design/atoms/Tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cloneElement","isValidElement","Pressable","Text","View","useStyles","Tab","variant","label","icon","active","disabled","onPress","styles","iconColor","tintedIcon","color","React","createElement","style","tab","accessibilityRole","accessibilityState","selected","Fragment","indicator"],"sourceRoot":"../../../../../../src","sources":["core/design/atoms/Tab/Tab.tsx"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SACEA,YAAY,EACZC,cAAc,QAGT,OAAO;AACd,SAASC,SAAS,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACpD,SAASC,SAAS,QAAQ,UAAU;AAapC,OAAO,SAASC,GAAGA,CAAC;EAClBC,OAAO,GAAG,MAAM;EAChBC,KAAK;EACLC,IAAI;EACJC,MAAM,GAAG,KAAK;EACdC,QAAQ,GAAG,KAAK;EAChBC;AACQ,CAAC,EAAE;EACX,MAAM;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAGT,SAAS,CAACE,OAAO,EAAEG,MAAM,EAAEC,QAAQ,CAAC;EAElE,MAAMI,UAAU,GAAG,aAAAd,cAAc,CAACQ,IAAI,CAAC,gBACnCT,YAAY,CAACS,IAAI,EAAsC;IACrDO,KAAK,EAAEF;EACT,CAAC,CAAC,GACFL,IAAI;EAER,oBACEQ,KAAA,CAAAC,aAAA,CAAChB,SAAS;IACRiB,KAAK,EAAEN,MAAM,CAACO,GAAI;IAClBR,OAAO,EAAEA,OAAQ;IACjBD,QAAQ,EAAEA,QAAS;IACnBU,iBAAiB,EAAC,KAAK;IACvBC,kBAAkB,EAAE;MAAEC,QAAQ,EAAEb,MAAM;MAAEC;IAAS;EAAE,GAElDJ,OAAO,KAAK,MAAM,gBACjBU,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAO,QAAA,qBACEP,KAAA,CAAAC,aAAA,CAACd,IAAI;IAACe,KAAK,EAAEN,MAAM,CAACJ;EAAK,GAAEM,UAAiB,CAAC,eAC7CE,KAAA,CAAAC,aAAA,CAACd,IAAI;IAACe,KAAK,EAAEN,MAAM,CAACY;EAAU,CAAE,CAChC,CAAC,GACDlB,OAAO,KAAK,YAAY,gBAC1BU,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAO,QAAA,qBACEP,KAAA,CAAAC,aAAA,CAACf,IAAI;IAACgB,KAAK,EAAEN,MAAM,CAACL;EAAM,GAAEA,KAAY,CAAC,eACzCS,KAAA,CAAAC,aAAA,CAACd,IAAI;IAACe,KAAK,EAAEN,MAAM,CAACY;EAAU,CAAE,CAChC,CAAC,gBAEHR,KAAA,CAAAC,aAAA,CAACf,IAAI;IAACgB,KAAK,EAAEN,MAAM,CAACL;EAAM,GAAEA,KAAY,CAEjC,CAAC;AAEhB","ignoreList":[]}

package/lib/module/core/design/atoms/Tab/index.js

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

package/lib/module/core/design/atoms/Tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tab"],"sourceRoot":"../../../../../../src","sources":["core/design/atoms/Tab/index.ts"],"mappings":"AAAA,SAASA,GAAG,QAAQ,OAAO","ignoreList":[]}

package/lib/module/core/design/atoms/Tab/styles.js

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+// Geometry from SoT (geometry.json → tabs), px:
+//   pill:       height 40, padding 8×12, radius 24, border 1, fontSize 17, lineHeight 24
+//   underlined: height 56, paddingTop 16, gap 14, indicator thickness 2
+//   icon:       height 56, paddingTop 16, gap 14, glyph 24×24, indicator 24×2
+export const useStyles = (variant, active, disabled) => {
+  const token = useToken();
+  const labelColor = variant === 'pill' ? token(disabled ? AmityColorToken.TextTabPillDisabled : active ? AmityColorToken.TextTabPillActive : AmityColorToken.TextTabPillDefault) : token(disabled ? AmityColorToken.TextTabUnderlinedDisabled : active ? AmityColorToken.TextTabUnderlinedActive : AmityColorToken.TextTabUnderlinedDefault);
+  const iconColor = token(disabled ? AmityColorToken.IconTabDisabled : active ? AmityColorToken.IconTabActive : AmityColorToken.IconTabDefault);
+  const indicatorColor = !active ? 'transparent' : variant === 'icon' ? token(AmityColorToken.LineTabIconActive) : token(AmityColorToken.LineTabUnderlinedActive);
+  const pillSurface = token(disabled ? AmityColorToken.SurfaceTabPillDisabled : active ? AmityColorToken.SurfaceTabPillActive : AmityColorToken.SurfaceTabPillDefault);
+  const pillBorder = token(disabled ? AmityColorToken.BorderTabPillDisabled : active ? AmityColorToken.BorderTabPillActive : AmityColorToken.BorderTabPillDefault);
+  const tab = variant === 'pill' ? {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 40,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: pillBorder,
+    backgroundColor: pillSurface
+  } : {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 14,
+    height: 56,
+    paddingTop: 16,
+    backgroundColor: 'transparent'
+  };
+  const styles = StyleSheet.create({
+    tab,
+    label: {
+      fontSize: 17,
+      lineHeight: 24,
+      fontWeight: active ? '600' : '400',
+      color: labelColor
+    },
+    icon: {
+      width: 24,
+      height: 24
+    },
+    indicator: variant === 'icon' ? {
+      width: 24,
+      height: 2,
+      backgroundColor: indicatorColor
+    } : {
+      width: '100%',
+      height: 2,
+      backgroundColor: indicatorColor
+    }
+  });
+  return {
+    styles,
+    iconColor
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/core/design/atoms/Tab/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","variant","active","disabled","token","labelColor","TextTabPillDisabled","TextTabPillActive","TextTabPillDefault","TextTabUnderlinedDisabled","TextTabUnderlinedActive","TextTabUnderlinedDefault","iconColor","IconTabDisabled","IconTabActive","IconTabDefault","indicatorColor","LineTabIconActive","LineTabUnderlinedActive","pillSurface","SurfaceTabPillDisabled","SurfaceTabPillActive","SurfaceTabPillDefault","pillBorder","BorderTabPillDisabled","BorderTabPillActive","BorderTabPillDefault","tab","flexDirection","alignItems","justifyContent","height","paddingVertical","paddingHorizontal","borderRadius","borderWidth","borderColor","backgroundColor","gap","paddingTop","styles","create","label","fontSize","lineHeight","fontWeight","color","icon","width","indicator"],"sourceRoot":"../../../../../../src","sources":["core/design/atoms/Tab/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAGA,CACvBC,OAAmB,EACnBC,MAAe,EACfC,QAAiB,KACd;EACH,MAAMC,KAAK,GAAGN,QAAQ,CAAC,CAAC;EAExB,MAAMO,UAAU,GACdJ,OAAO,KAAK,MAAM,GACdG,KAAK,CACHD,QAAQ,GACJJ,eAAe,CAACO,mBAAmB,GACnCJ,MAAM,GACNH,eAAe,CAACQ,iBAAiB,GACjCR,eAAe,CAACS,kBACtB,CAAC,GACDJ,KAAK,CACHD,QAAQ,GACJJ,eAAe,CAACU,yBAAyB,GACzCP,MAAM,GACNH,eAAe,CAACW,uBAAuB,GACvCX,eAAe,CAACY,wBACtB,CAAC;EAEP,MAAMC,SAAS,GAAGR,KAAK,CACrBD,QAAQ,GACJJ,eAAe,CAACc,eAAe,GAC/BX,MAAM,GACNH,eAAe,CAACe,aAAa,GAC7Bf,eAAe,CAACgB,cACtB,CAAC;EAED,MAAMC,cAAc,GAAG,CAACd,MAAM,GAC1B,aAAa,GACbD,OAAO,KAAK,MAAM,GAClBG,KAAK,CAACL,eAAe,CAACkB,iBAAiB,CAAC,GACxCb,KAAK,CAACL,eAAe,CAACmB,uBAAuB,CAAC;EAElD,MAAMC,WAAW,GAAGf,KAAK,CACvBD,QAAQ,GACJJ,eAAe,CAACqB,sBAAsB,GACtClB,MAAM,GACNH,eAAe,CAACsB,oBAAoB,GACpCtB,eAAe,CAACuB,qBACtB,CAAC;EACD,MAAMC,UAAU,GAAGnB,KAAK,CACtBD,QAAQ,GACJJ,eAAe,CAACyB,qBAAqB,GACrCtB,MAAM,GACNH,eAAe,CAAC0B,mBAAmB,GACnC1B,eAAe,CAAC2B,oBACtB,CAAC;EAED,MAAMC,GAAG,GACP1B,OAAO,KAAK,MAAM,GACd;IACE2B,aAAa,EAAE,KAAc;IAC7BC,UAAU,EAAE,QAAiB;IAC7BC,cAAc,EAAE,QAAiB;IACjCC,MAAM,EAAE,EAAE;IACVC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEb,UAAU;IACvBc,eAAe,EAAElB;EACnB,CAAC,GACD;IACES,aAAa,EAAE,QAAiB;IAChCC,UAAU,EAAE,QAAiB;IAC7BS,GAAG,EAAE,EAAE;IACPP,MAAM,EAAE,EAAE;IACVQ,UAAU,EAAE,EAAE;IACdF,eAAe,EAAE;EACnB,CAAC;EAEP,MAAMG,MAAM,GAAG3C,UAAU,CAAC4C,MAAM,CAAC;IAC/Bd,GAAG;IACHe,KAAK,EAAE;MACLC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE,EAAE;MACdC,UAAU,EAAE3C,MAAM,GAAG,KAAK,GAAG,KAAK;MAClC4C,KAAK,EAAEzC;IACT,CAAC;IACD0C,IAAI,EAAE;MACJC,KAAK,EAAE,EAAE;MACTjB,MAAM,EAAE;IACV,CAAC;IACDkB,SAAS,EACPhD,OAAO,KAAK,MAAM,GACd;MAAE+C,KAAK,EAAE,EAAE;MAAEjB,MAAM,EAAE,CAAC;MAAEM,eAAe,EAAErB;IAAe,CAAC,GACzD;MACEgC,KAAK,EAAE,MAAe;MACtBjB,MAAM,EAAE,CAAC;MACTM,eAAe,EAAErB;IACnB;EACR,CAAC,CAAC;EAEF,OAAO;IAAEwB,MAAM;IAAE5B;EAAU,CAAC;AAC9B,CAAC","ignoreList":[]}

package/lib/module/core/design/components/Menu/Menu.js

@@ -0,0 +1,90 @@
+// Menu — ported from AmityUiKitWeb core/design/components/Menu.
+// Web renders a <div> wrapper whose CSS descendant selectors style each row by
+// the parent's data-container / data-variant. RN has no cascade, so the parent
+// pushes those two axes to rows through context. `Menu.Item` is an icon + label
+// row (tinted per destructive flag); `Menu.Item.Skeleton` is the loading row.
+
+import { createContext, useContext } from 'react';
+import { Pressable, View } from 'react-native';
+import { AmityIcon } from '../../icons';
+import { Typography } from '../Typography';
+import { Skeleton } from '../Skeleton';
+import { useStyles } from './styles';
+const MenuContext = /*#__PURE__*/createContext({
+  container: 'popover',
+  variant: 'social'
+});
+export function Menu({
+  children,
+  container = 'popover',
+  variant = 'social'
+}) {
+  const {
+    styles
+  } = useStyles({
+    container,
+    variant
+  });
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: {
+      container,
+      variant
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.menu
+  }, children));
+}
+function MenuItem({
+  label,
+  icon,
+  destructive = false,
+  onPress,
+  typography = 'bodyBold'
+}) {
+  const {
+    container,
+    variant
+  } = useContext(MenuContext);
+  const {
+    styles,
+    iconSize,
+    labelColorToken
+  } = useStyles({
+    container,
+    variant,
+    destructive
+  });
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.menuItem,
+    onPress: onPress
+  }, icon ? /*#__PURE__*/React.createElement(AmityIcon, {
+    name: icon,
+    size: iconSize,
+    tokenColor: labelColorToken
+  }) : null, /*#__PURE__*/React.createElement(Typography, {
+    variant: typography,
+    style: styles.menuItemLabel
+  }, label));
+}
+Menu.Item = MenuItem;
+function MenuItemSkeleton() {
+  const {
+    container,
+    variant
+  } = useContext(MenuContext);
+  const {
+    styles
+  } = useStyles({
+    container,
+    variant
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.menuItemSkeleton,
+    accessibilityElementsHidden: true
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    height: 10,
+    width: "100%"
+  }));
+}
+MenuItem.Skeleton = MenuItemSkeleton;
+//# sourceMappingURL=Menu.js.map

package/lib/module/core/design/components/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","Pressable","View","AmityIcon","Typography","Skeleton","useStyles","MenuContext","container","variant","Menu","children","styles","React","createElement","Provider","value","style","menu","MenuItem","label","icon","destructive","onPress","typography","iconSize","labelColorToken","menuItem","name","size","tokenColor","menuItemLabel","Item","MenuItemSkeleton","menuItemSkeleton","accessibilityElementsHidden","height","width"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Menu/Menu.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAwB,OAAO;AACjE,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC9C,SAASC,SAAS,QAA4B,aAAa;AAC3D,SAASC,UAAU,QAAgC,eAAe;AAClE,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,SAAS,QAA8C,UAAU;AAO1E,MAAMC,WAAW,gBAAGR,aAAa,CAAmB;EAClDS,SAAS,EAAE,SAAS;EACpBC,OAAO,EAAE;AACX,CAAC,CAAC;AAQF,OAAO,SAASC,IAAIA,CAAC;EACnBC,QAAQ;EACRH,SAAS,GAAG,SAAS;EACrBC,OAAO,GAAG;AACD,CAAC,EAAE;EACZ,MAAM;IAAEG;EAAO,CAAC,GAAGN,SAAS,CAAC;IAAEE,SAAS;IAAEC;EAAQ,CAAC,CAAC;EAEpD,oBACEI,KAAA,CAAAC,aAAA,CAACP,WAAW,CAACQ,QAAQ;IAACC,KAAK,EAAE;MAAER,SAAS;MAAEC;IAAQ;EAAE,gBAClDI,KAAA,CAAAC,aAAA,CAACZ,IAAI;IAACe,KAAK,EAAEL,MAAM,CAACM;EAAK,GAAEP,QAAe,CACtB,CAAC;AAE3B;AAUA,SAASQ,QAAQA,CAAC;EAChBC,KAAK;EACLC,IAAI;EACJC,WAAW,GAAG,KAAK;EACnBC,OAAO;EACPC,UAAU,GAAG;AACA,CAAC,EAAE;EAChB,MAAM;IAAEhB,SAAS;IAAEC;EAAQ,CAAC,GAAGT,UAAU,CAACO,WAAW,CAAC;EACtD,MAAM;IAAEK,MAAM;IAAEa,QAAQ;IAAEC;EAAgB,CAAC,GAAGpB,SAAS,CAAC;IACtDE,SAAS;IACTC,OAAO;IACPa;EACF,CAAC,CAAC;EAEF,oBACET,KAAA,CAAAC,aAAA,CAACb,SAAS;IAACgB,KAAK,EAAEL,MAAM,CAACe,QAAS;IAACJ,OAAO,EAAEA;EAAQ,GACjDF,IAAI,gBACHR,KAAA,CAAAC,aAAA,CAACX,SAAS;IAACyB,IAAI,EAAEP,IAAK;IAACQ,IAAI,EAAEJ,QAAS;IAACK,UAAU,EAAEJ;EAAgB,CAAE,CAAC,GACpE,IAAI,eACRb,KAAA,CAAAC,aAAA,CAACV,UAAU;IAACK,OAAO,EAAEe,UAAW;IAACP,KAAK,EAAEL,MAAM,CAACmB;EAAc,GAC1DX,KACS,CACH,CAAC;AAEhB;AAEAV,IAAI,CAACsB,IAAI,GAAGb,QAAQ;AAEpB,SAASc,gBAAgBA,CAAA,EAAG;EAC1B,MAAM;IAAEzB,SAAS;IAAEC;EAAQ,CAAC,GAAGT,UAAU,CAACO,WAAW,CAAC;EACtD,MAAM;IAAEK;EAAO,CAAC,GAAGN,SAAS,CAAC;IAAEE,SAAS;IAAEC;EAAQ,CAAC,CAAC;EAEpD,oBACEI,KAAA,CAAAC,aAAA,CAACZ,IAAI;IAACe,KAAK,EAAEL,MAAM,CAACsB,gBAAiB;IAACC,2BAA2B;EAAA,gBAE/DtB,KAAA,CAAAC,aAAA,CAACT,QAAQ;IAAC+B,MAAM,EAAE,EAAG;IAACC,KAAK,EAAC;EAAM,CAAE,CAChC,CAAC;AAEX;AAEAlB,QAAQ,CAACd,QAAQ,GAAG4B,gBAAgB","ignoreList":[]}

package/lib/module/core/design/components/Menu/index.js

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

package/lib/module/core/design/components/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Menu"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Menu/index.ts"],"mappings":"AAAA,SAASA,IAAI,QAAQ,QAAQ","ignoreList":[]}

package/lib/module/core/design/components/Menu/styles.js

@@ -0,0 +1,78 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+// Web geometry (Menu.module.css, rem × 16). The web cascade is flattened here
+// into explicit per-combination values since RN has no descendant selectors.
+export const useStyles = ({
+  container = 'popover',
+  variant = 'social',
+  destructive = false
+}) => {
+  const token = useToken();
+
+  // --- .menu padding ---------------------------------------------------------
+  // base: 0.5rem 0; drawer: 0; chat popover: 0.
+  let menuPaddingVertical = 8;
+  if (container === 'drawer') menuPaddingVertical = 0;else if (variant === 'chat') menuPaddingVertical = 0;
+
+  // --- .menuItem geometry ----------------------------------------------------
+  // base: gap 0.75rem (12), padding 0.875rem 1rem (14/16).
+  let gap = 12;
+  let paddingVertical = 14;
+  let paddingHorizontal = 16;
+  let borderRadius = 0;
+  if (container === 'drawer') {
+    // .menu[data-container='drawer'] .menuItem { padding: 0.875rem 0; }
+    paddingHorizontal = 0;
+  } else if (variant === 'chat') {
+    // chat popover: padding 0.75rem (12); border-radius 0.5rem (8).
+    paddingVertical = 12;
+    paddingHorizontal = 12;
+    borderRadius = 8;
+  } else {
+    // social popover: gap 0.5rem (8); padding 1rem (16).
+    gap = 8;
+    paddingVertical = 16;
+    paddingHorizontal = 16;
+  }
+
+  // --- icon size -------------------------------------------------------------
+  // base 1.5rem (24); chat popover 1.25rem (20).
+  const iconSize = container === 'popover' && variant === 'chat' ? 20 : 24;
+
+  // --- colour: menuItem[data-destructive] ------------------------------------
+  const labelColorToken = destructive ? AmityColorToken.TextListHeaderDestructiveDefault : AmityColorToken.TextListHeaderDefaultDefault;
+  const styles = StyleSheet.create({
+    menu: {
+      paddingVertical: menuPaddingVertical
+    },
+    menuItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap,
+      paddingVertical,
+      paddingHorizontal,
+      borderRadius
+    },
+    menuItemLabel: {
+      color: token(labelColorToken)
+    },
+    // .menuItem--skeleton — non-interactive placeholder row.
+    menuItemSkeleton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap,
+      paddingVertical,
+      paddingHorizontal,
+      borderRadius
+    }
+  });
+  return {
+    styles,
+    token,
+    iconSize,
+    labelColorToken
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/core/design/components/Menu/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","container","variant","destructive","token","menuPaddingVertical","gap","paddingVertical","paddingHorizontal","borderRadius","iconSize","labelColorToken","TextListHeaderDestructiveDefault","TextListHeaderDefaultDefault","styles","create","menu","menuItem","flexDirection","alignItems","justifyContent","menuItemLabel","color","menuItemSkeleton"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Menu/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,iCAAiC;AAWjE;AACA;AACA,OAAO,MAAMC,SAAS,GAAGA,CAAC;EACxBC,SAAS,GAAG,SAAS;EACrBC,OAAO,GAAG,QAAQ;EAClBC,WAAW,GAAG;AACD,CAAC,KAAK;EACnB,MAAMC,KAAK,GAAGN,QAAQ,CAAC,CAAC;;EAExB;EACA;EACA,IAAIO,mBAAmB,GAAG,CAAC;EAC3B,IAAIJ,SAAS,KAAK,QAAQ,EAAEI,mBAAmB,GAAG,CAAC,CAAC,KAC/C,IAAIH,OAAO,KAAK,MAAM,EAAEG,mBAAmB,GAAG,CAAC;;EAEpD;EACA;EACA,IAAIC,GAAG,GAAG,EAAE;EACZ,IAAIC,eAAe,GAAG,EAAE;EACxB,IAAIC,iBAAiB,GAAG,EAAE;EAC1B,IAAIC,YAAY,GAAG,CAAC;EACpB,IAAIR,SAAS,KAAK,QAAQ,EAAE;IAC1B;IACAO,iBAAiB,GAAG,CAAC;EACvB,CAAC,MAAM,IAAIN,OAAO,KAAK,MAAM,EAAE;IAC7B;IACAK,eAAe,GAAG,EAAE;IACpBC,iBAAiB,GAAG,EAAE;IACtBC,YAAY,GAAG,CAAC;EAClB,CAAC,MAAM;IACL;IACAH,GAAG,GAAG,CAAC;IACPC,eAAe,GAAG,EAAE;IACpBC,iBAAiB,GAAG,EAAE;EACxB;;EAEA;EACA;EACA,MAAME,QAAQ,GAAGT,SAAS,KAAK,SAAS,IAAIC,OAAO,KAAK,MAAM,GAAG,EAAE,GAAG,EAAE;;EAExE;EACA,MAAMS,eAAe,GAAGR,WAAW,GAC/BJ,eAAe,CAACa,gCAAgC,GAChDb,eAAe,CAACc,4BAA4B;EAEhD,MAAMC,MAAM,GAAGjB,UAAU,CAACkB,MAAM,CAAC;IAC/BC,IAAI,EAAE;MACJT,eAAe,EAAEF;IACnB,CAAC;IACDY,QAAQ,EAAE;MACRC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,YAAY;MAC5Bd,GAAG;MACHC,eAAe;MACfC,iBAAiB;MACjBC;IACF,CAAC;IACDY,aAAa,EAAE;MACbC,KAAK,EAAElB,KAAK,CAACO,eAAe;IAC9B,CAAC;IACD;IACAY,gBAAgB,EAAE;MAChBL,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBb,GAAG;MACHC,eAAe;MACfC,iBAAiB;MACjBC;IACF;EACF,CAAC,CAAC;EAEF,OAAO;IAAEK,MAAM;IAAEV,KAAK;IAAEM,QAAQ;IAAEC;EAAgB,CAAC;AACrD,CAAC","ignoreList":[]}

package/lib/module/core/design/components/MenuOptionButton/MenuOptionButton.js

@@ -0,0 +1,34 @@
+// MenuOptionButton — ported from AmityUiKitWeb core/design/components/MenuOptionButton.
+// A single full-width row: leading icon + bold label, with a danger variant that
+// tints both the icon and the text with the alert token. Web rendered a Button +
+// Typography.BodyBold; RN uses Pressable + the Typography component.
+
+import { Pressable } from 'react-native';
+import { AmityIcon } from '../../icons';
+import { Typography } from '../Typography';
+import { useStyles } from './styles';
+export function MenuOptionButton({
+  text,
+  icon,
+  onPress,
+  isDanger = false
+}) {
+  const {
+    styles,
+    colorToken
+  } = useStyles({
+    isDanger
+  });
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.menuOptionButton,
+    onPress: onPress
+  }, icon ? /*#__PURE__*/React.createElement(AmityIcon, {
+    name: icon,
+    size: 24,
+    tokenColor: colorToken
+  }) : null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyBold",
+    style: styles.text
+  }, text));
+}
+//# sourceMappingURL=MenuOptionButton.js.map

package/lib/module/core/design/components/MenuOptionButton/MenuOptionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Pressable","AmityIcon","Typography","useStyles","MenuOptionButton","text","icon","onPress","isDanger","styles","colorToken","React","createElement","style","menuOptionButton","name","size","tokenColor","variant"],"sourceRoot":"../../../../../../src","sources":["core/design/components/MenuOptionButton/MenuOptionButton.tsx"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,QAAQ,cAAc;AACxC,SAASC,SAAS,QAA4B,aAAa;AAC3D,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,SAAS,QAAQ,UAAU;AASpC,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAG;AACU,CAAC,EAAE;EACxB,MAAM;IAAEC,MAAM;IAAEC;EAAW,CAAC,GAAGP,SAAS,CAAC;IAAEK;EAAS,CAAC,CAAC;EAEtD,oBACEG,KAAA,CAAAC,aAAA,CAACZ,SAAS;IAACa,KAAK,EAAEJ,MAAM,CAACK,gBAAiB;IAACP,OAAO,EAAEA;EAAQ,GACzDD,IAAI,gBACHK,KAAA,CAAAC,aAAA,CAACX,SAAS;IAACc,IAAI,EAAET,IAAK;IAACU,IAAI,EAAE,EAAG;IAACC,UAAU,EAAEP;EAAW,CAAE,CAAC,GACzD,IAAI,eACRC,KAAA,CAAAC,aAAA,CAACV,UAAU;IAACgB,OAAO,EAAC,UAAU;IAACL,KAAK,EAAEJ,MAAM,CAACJ;EAAK,GAC/CA,IACS,CACH,CAAC;AAEhB","ignoreList":[]}

package/lib/module/core/design/components/MenuOptionButton/index.js

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

package/lib/module/core/design/components/MenuOptionButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MenuOptionButton"],"sourceRoot":"../../../../../../src","sources":["core/design/components/MenuOptionButton/index.ts"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/core/design/components/MenuOptionButton/styles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+// Web geometry (MenuOptionButton.module.css, rem × 16).
+export const useStyles = ({
+  isDanger = false
+}) => {
+  const token = useToken();
+
+  // Web primitives base-default / alert-default map to the closest semantic
+  // tokens in the RN model: Text/Base/Default and Text/Base/Alert.
+  const colorToken = isDanger ? AmityColorToken.TextBaseAlert : AmityColorToken.TextListHeaderDefaultDefault;
+  const styles = StyleSheet.create({
+    menuOptionButton: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      // 0.75rem
+      paddingVertical: 12,
+      // 0.75rem
+      paddingHorizontal: 16 // 1rem
+    },
+    text: {
+      flex: 1,
+      color: token(colorToken)
+    }
+  });
+  return {
+    styles,
+    token,
+    colorToken
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/core/design/components/MenuOptionButton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","isDanger","token","colorToken","TextBaseAlert","TextListHeaderDefaultDefault","styles","create","menuOptionButton","width","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","text","flex","color"],"sourceRoot":"../../../../../../src","sources":["core/design/components/MenuOptionButton/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,iCAAiC;AAMjE;AACA,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ,GAAG;AAAqB,CAAC,KAAK;EAChE,MAAMC,KAAK,GAAGJ,QAAQ,CAAC,CAAC;;EAExB;EACA;EACA,MAAMK,UAAU,GAAGF,QAAQ,GACvBF,eAAe,CAACK,aAAa,GAC7BL,eAAe,CAACM,4BAA4B;EAEhD,MAAMC,MAAM,GAAGT,UAAU,CAACU,MAAM,CAAC;IAC/BC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,MAAM;MACbC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE,EAAE;MAAE;MACTC,eAAe,EAAE,EAAE;MAAE;MACrBC,iBAAiB,EAAE,EAAE,CAAE;IACzB,CAAC;IACDC,IAAI,EAAE;MACJC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAEf,KAAK,CAACC,UAAU;IACzB;EACF,CAAC,CAAC;EAEF,OAAO;IAAEG,MAAM;IAAEJ,KAAK;IAAEC;EAAW,CAAC;AACtC,CAAC","ignoreList":[]}

package/lib/module/core/design/components/Popover/Popover.js

@@ -0,0 +1,112 @@
+// Popover — ported from AmityUiKitWeb core/design/components/Popover.
+// Web uses react-aria overlay positioning with a `trigger` render-prop and a
+// node-or-function `children` render-prop. RN has no react-aria, so this is
+// implemented with a transparent `Modal` acting as an anchored overlay: the
+// trigger wrapper is measured with `measureInWindow`, and the popover content
+// is absolutely positioned near the anchor. Tapping the backdrop closes it.
+// The public API (function `trigger`, node-or-function `children`, `placement`)
+// is kept so callers such as Menu and header buttons work unchanged.
+
+import React, { useRef, useState } from 'react';
+import { Dimensions, Modal, Pressable, View } from 'react-native';
+import { useStyles } from './styles';
+
+// react-aria placements are space-separated (e.g. 'bottom right'); we accept the
+// full string and read the two axes we support (vertical: top/bottom, horizontal
+// alignment: left/right).
+
+// Gap between the trigger and the popover content (web `--origin` 0.5rem = 8px).
+const ANCHOR_GAP = 8;
+// Keep the popover this far from the screen edges, and never narrower than the
+// content min-width (styles.popover minWidth 200) when clamping.
+const SCREEN_MARGIN = 8;
+const POPOVER_MIN_WIDTH = 200;
+// Approx tallest menu; if less room than this below the anchor, open upward.
+const ESTIMATED_MENU_HEIGHT = 260;
+export function Popover({
+  trigger,
+  children,
+  placement = 'bottom right',
+  onOpen,
+  onClose,
+  surface = true
+}) {
+  const {
+    styles
+  } = useStyles();
+  const [isOpen, setIsOpen] = useState(false);
+  const [anchor, setAnchor] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const triggerRef = useRef(null);
+  const openPopover = () => {
+    var _triggerRef$current;
+    // Measure the trigger in window coordinates, then open once positioned.
+    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.measureInWindow((x, y, width, height) => {
+      setAnchor({
+        x,
+        y,
+        width,
+        height
+      });
+      setIsOpen(true);
+      onOpen === null || onOpen === void 0 || onOpen();
+    });
+  };
+  const closePopover = () => {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 || onClose();
+  };
+  const isRight = placement.includes('right');
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = Dimensions.get('window');
+
+  // Vertical: honor an explicit 'top', but also flip above the anchor when there
+  // isn't room below (chat bubbles sit near the bottom, so a 'bottom' menu would
+  // otherwise clip off the screen).
+  const spaceBelow = screenHeight - (anchor.y + anchor.height);
+  const isTop = placement.includes('top') || spaceBelow < ESTIMATED_MENU_HEIGHT;
+  const verticalPosition = isTop ? {
+    bottom: screenHeight - anchor.y + ANCHOR_GAP
+  } : {
+    top: anchor.y + anchor.height + ANCHOR_GAP
+  };
+
+  // Horizontal alignment: right-align to the anchor's right edge, else left-align to
+  // the anchor's left edge (the bubble's start). Clamp so the popover (min-width 200)
+  // never runs past either screen edge — the off-screen overflow inbound bubbles hit.
+  const maxInset = Math.max(SCREEN_MARGIN, screenWidth - POPOVER_MIN_WIDTH - SCREEN_MARGIN);
+  const horizontalPosition = isRight ? {
+    right: Math.min(maxInset, Math.max(SCREEN_MARGIN, screenWidth - (anchor.x + anchor.width)))
+  } : {
+    left: Math.min(maxInset, Math.max(SCREEN_MARGIN, anchor.x))
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    ref: triggerRef,
+    collapsable: false
+  }, trigger({
+    isOpen,
+    isDesktop: true,
+    openPopover,
+    closePopover
+  }), /*#__PURE__*/React.createElement(Modal, {
+    transparent: true,
+    visible: isOpen,
+    animationType: "fade",
+    onRequestClose: closePopover
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.backdrop,
+    onPress: closePopover
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: [surface ? styles.popover : styles.popoverBare, verticalPosition, horizontalPosition],
+    onPress: () => {}
+  }, typeof children === 'function' ? children({
+    closePopover
+  }) : children))));
+}
+//# sourceMappingURL=Popover.js.map

package/lib/module/core/design/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","useState","Dimensions","Modal","Pressable","View","useStyles","ANCHOR_GAP","SCREEN_MARGIN","POPOVER_MIN_WIDTH","ESTIMATED_MENU_HEIGHT","Popover","trigger","children","placement","onOpen","onClose","surface","styles","isOpen","setIsOpen","anchor","setAnchor","x","y","width","height","triggerRef","openPopover","_triggerRef$current","current","measureInWindow","closePopover","isRight","includes","screenWidth","screenHeight","get","spaceBelow","isTop","verticalPosition","bottom","top","maxInset","Math","max","horizontalPosition","right","min","left","createElement","ref","collapsable","isDesktop","transparent","visible","animationType","onRequestClose","style","backdrop","onPress","popover","popoverBare"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Popover/Popover.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/core/design/components/Popover/index.js

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

package/lib/module/core/design/components/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Popover"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Popover/index.ts"],"mappings":"AAAA,SAASA,OAAO,QAAQ,WAAW","ignoreList":[]}

package/lib/module/core/design/components/Popover/styles.js

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    // Full-screen backdrop; tapping it closes the popover.
+    backdrop: {
+      flex: 1
+    },
+    // Web `.popover`: radius 0.75rem (12px), popover surface, box-shadow-04.
+    // Web shadow colour is black-based; RN's default shadowColor is black, so
+    // no colour literal is needed here.
+    popover: {
+      position: 'absolute',
+      overflow: 'hidden',
+      borderRadius: 12,
+      // Web `.dialog` min-width 12.5rem = 200px.
+      minWidth: 200,
+      backgroundColor: token(AmityColorToken.SurfacePopoverBackgroundDefault),
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.16,
+      shadowRadius: 16,
+      elevation: 8
+    },
+    // surface={false}: positioning only, no card surface — lets the caller render
+    // its own separate floating surfaces (web MessageActionsPopover: a transparent
+    // Dialog holding a reaction-picker pill above a menu card, two distinct surfaces).
+    popoverBare: {
+      position: 'absolute',
+      minWidth: 200
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/core/design/components/Popover/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","backdrop","flex","popover","position","overflow","borderRadius","minWidth","backgroundColor","SurfacePopoverBackgroundDefault","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","popoverBare"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Popover/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/B;IACAC,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;IACD;IACA;IACA;IACAC,OAAO,EAAE;MACPC,QAAQ,EAAE,UAAU;MACpBC,QAAQ,EAAE,QAAQ;MAClBC,YAAY,EAAE,EAAE;MAChB;MACAC,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAEV,KAAK,CAACF,eAAe,CAACa,+BAA+B,CAAC;MACvEC,YAAY,EAAE;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;MACrCC,aAAa,EAAE,IAAI;MACnBC,YAAY,EAAE,EAAE;MAChBC,SAAS,EAAE;IACb,CAAC;IACD;IACA;IACA;IACAC,WAAW,EAAE;MACXZ,QAAQ,EAAE,UAAU;MACpBG,QAAQ,EAAE;IACZ;EACF,CAAC,CAAC;EAEF,OAAO;IAAER,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/core/design/components/Skeleton/Skeleton.js

@@ -0,0 +1,49 @@
+// Skeleton — ported from AmityUiKitWeb core/design/components/Skeleton.
+// A placeholder box filled with the skeleton-effect surface token. The web
+// shimmer (CSS `pulse` keyframes: opacity 1 -> 0.4 -> 1 over 1.75s,
+// cubic-bezier(0.4, 0, 0.6, 1), infinite) is ported to an RN Animated opacity
+// loop. Default square radius is 8px (web 0.5rem); pass `circle` for a round
+// placeholder (avatars) or an explicit `borderRadius` for pills.
+
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { useStyles } from './styles';
+const PULSE_DURATION = 1750;
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  borderRadius = 8,
+  circle = false,
+  style
+}) {
+  const {
+    styles
+  } = useStyles();
+  const opacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    const loop = Animated.loop(Animated.sequence([Animated.timing(opacity, {
+      toValue: 0.4,
+      duration: PULSE_DURATION / 2,
+      easing: Easing.bezier(0.4, 0, 0.6, 1),
+      useNativeDriver: true
+    }), Animated.timing(opacity, {
+      toValue: 1,
+      duration: PULSE_DURATION / 2,
+      easing: Easing.bezier(0.4, 0, 0.6, 1),
+      useNativeDriver: true
+    })]));
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+  const radius = circle && typeof height === 'number' ? height / 2 : borderRadius;
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    accessibilityRole: "none",
+    style: [styles.skeleton, {
+      width,
+      height,
+      borderRadius: radius,
+      opacity
+    }, style]
+  });
+}
+//# sourceMappingURL=Skeleton.js.map

package/lib/module/core/design/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","Animated","Easing","useStyles","PULSE_DURATION","Skeleton","width","height","borderRadius","circle","style","styles","opacity","Value","current","loop","sequence","timing","toValue","duration","easing","bezier","useNativeDriver","start","stop","radius","React","createElement","View","accessibilityRole","skeleton"],"sourceRoot":"../../../../../../src","sources":["core/design/components/Skeleton/Skeleton.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzC,SACEC,QAAQ,EACRC,MAAM,QAID,cAAc;AACrB,SAASC,SAAS,QAAQ,UAAU;AAUpC,MAAMC,cAAc,GAAG,IAAI;AAE3B,OAAO,SAASC,QAAQA,CAAC;EACvBC,KAAK,GAAG,MAAM;EACdC,MAAM,GAAG,EAAE;EACXC,YAAY,GAAG,CAAC;EAChBC,MAAM,GAAG,KAAK;EACdC;AACa,CAAC,EAAE;EAChB,MAAM;IAAEC;EAAO,CAAC,GAAGR,SAAS,CAAC,CAAC;EAC9B,MAAMS,OAAO,GAAGZ,MAAM,CAAC,IAAIC,QAAQ,CAACY,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAErDf,SAAS,CAAC,MAAM;IACd,MAAMgB,IAAI,GAAGd,QAAQ,CAACc,IAAI,CACxBd,QAAQ,CAACe,QAAQ,CAAC,CAChBf,QAAQ,CAACgB,MAAM,CAACL,OAAO,EAAE;MACvBM,OAAO,EAAE,GAAG;MACZC,QAAQ,EAAEf,cAAc,GAAG,CAAC;MAC5BgB,MAAM,EAAElB,MAAM,CAACmB,MAAM,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;MACrCC,eAAe,EAAE;IACnB,CAAC,CAAC,EACFrB,QAAQ,CAACgB,MAAM,CAACL,OAAO,EAAE;MACvBM,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAEf,cAAc,GAAG,CAAC;MAC5BgB,MAAM,EAAElB,MAAM,CAACmB,MAAM,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;MACrCC,eAAe,EAAE;IACnB,CAAC,CAAC,CACH,CACH,CAAC;IACDP,IAAI,CAACQ,KAAK,CAAC,CAAC;IACZ,OAAO,MAAMR,IAAI,CAACS,IAAI,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACZ,OAAO,CAAC,CAAC;EAEb,MAAMa,MAAM,GACVhB,MAAM,IAAI,OAAOF,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,CAAC,GAAGC,YAAY;EAElE,oBACEkB,KAAA,CAAAC,aAAA,CAAC1B,QAAQ,CAAC2B,IAAI;IACZC,iBAAiB,EAAC,MAAM;IACxBnB,KAAK,EAAE,CACLC,MAAM,CAACmB,QAAQ,EACf;MAAExB,KAAK;MAAEC,MAAM;MAAEC,YAAY,EAAEiB,MAAM;MAAEb;IAAQ,CAAC,EAChDF,KAAK;EACL,CACH,CAAC;AAEN","ignoreList":[]}

package/lib/module/core/design/components/Skeleton/index.js

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