{"version":3,"file":"skeleton.mjs","sources":["../../../src/utils/skeleton.tsx"],"sourcesContent":["import { keyframes } from '@emotion/css';\nimport * as React from 'react';\n\nconst fadeIn = keyframes({\n  '0%': {\n    opacity: 0,\n  },\n  '100%': {\n    opacity: 1,\n  },\n});\n\nexport const skeletonAnimation = {\n  animationName: fadeIn,\n  animationDelay: '100ms',\n  animationTimingFunction: 'ease-in',\n  animationDuration: '100ms',\n  animationFillMode: 'backwards',\n};\n\ninterface SkeletonProps {\n  /**\n   * Spread these props at the root of your skeleton to handle animation logic\n   */\n  rootProps: {\n    style: React.CSSProperties;\n  };\n}\n\nexport type SkeletonComponent<P = {}> = React.ComponentType<P & SkeletonProps>;\n\n/**\n * Use this to attach a skeleton as a static property on the component.\n * e.g. if you render a component with `<Component />`, you can render the skeleton with `<Component.Skeleton />`.\n * @param Component   A functional or class component\n * @param Skeleton    A functional or class skeleton component\n * @returns           A wrapped component with a static skeleton property\n */\nexport const attachSkeleton = <C extends object, P>(Component: C, Skeleton: SkeletonComponent<P>) => {\n  const skeletonWrapper = (props: P) => {\n    return (\n      <Skeleton\n        {...props}\n        rootProps={{\n          style: skeletonAnimation,\n        }}\n      />\n    );\n  };\n  return Object.assign(Component, { Skeleton: skeletonWrapper });\n};\n"],"names":[],"mappings":";;;;AAGA,MAAM,SAAS,SAAA,CAAU;AAAA,EACvB,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS;AAAA,GACX;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAM,iBAAA,GAAoB;AAAA,EAC/B,aAAA,EAAe,MAAA;AAAA,EACf,cAAA,EAAgB,OAAA;AAAA,EAChB,uBAAA,EAAyB,SAAA;AAAA,EACzB,iBAAA,EAAmB,OAAA;AAAA,EACnB,iBAAA,EAAmB;AACrB;AAoBO,MAAM,cAAA,GAAiB,CAAsB,SAAA,EAAc,QAAA,KAAmC;AACnG,EAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAa;AACpC,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,SAAA,EAAW;AAAA,UACT,KAAA,EAAO;AAAA;AACT;AAAA,KACF;AAAA,EAEJ,CAAA;AACA,EAAA,OAAO,OAAO,MAAA,CAAO,SAAA,EAAW,EAAE,QAAA,EAAU,iBAAiB,CAAA;AAC/D;;;;"}