{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/NEd4VmDdsxM3StIUbddO/bZxrMUxBPAhoXlARkK9C/YouTube.js", "ssg:https://framerusercontent.com/modules/e50eLohvvGYcsSDnuxYJ/JzhHBV780vfd74mvqVCE/AVdUf_FiS.js"],
  "sourcesContent": ["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useReducer, useState } from \"react\";\nimport { ControlType, addPropertyControls } from \"framer\";\nimport { useIsOnCanvas, emptyStateStyle, containerStyles, defaultEvents, useRadius, borderRadiusControl } from \"https://framer.com/m/framer/default-utils.js@^0.45.0\";\nvar PlayOptions;\n(function (PlayOptions) {\n  PlayOptions[\"Normal\"] = \"Off\";\n  PlayOptions[\"Auto\"] = \"On\";\n  PlayOptions[\"Loop\"] = \"Loop\";\n})(PlayOptions || (PlayOptions = {}));\nvar ThumbnailOptions;\n(function (ThumbnailOptions) {\n  ThumbnailOptions[\"High\"] = \"High Quality\";\n  ThumbnailOptions[\"Medium\"] = \"Medium Quality\";\n  ThumbnailOptions[\"Low\"] = \"Low Quality\";\n  ThumbnailOptions[\"Off\"] = \"Off\";\n})(ThumbnailOptions || (ThumbnailOptions = {}));\nvar ThumbnailFormat;\n(function (ThumbnailFormat) {\n  ThumbnailFormat[\"WebP\"] = \"webp\";\n  ThumbnailFormat[\"JPG\"] = \"jpg\";\n})(ThumbnailFormat || (ThumbnailFormat = {})); /**\n                                               * @framerIntrinsicWidth 560\n                                               * @framerIntrinsicHeight 315\n                                               *\n                                               * @framerSupportedLayoutWidth fixed\n                                               * @framerSupportedLayoutHeight fixed\n                                               *\n                                               * @framerComponentPresetProps isRed, borderRadius\n                                               */\nexport function Youtube({\n  url,\n  play,\n  shouldMute,\n  thumbnail,\n  isRed,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  onMouseDown,\n  onMouseUp,\n  ...props\n}) {\n  const onCanvas = useIsOnCanvas();\n  const isAutoplay = play !== PlayOptions.Normal;\n  const showThumbnail = onCanvas || thumbnail !== ThumbnailOptions.Off && !isAutoplay;\n  const [isPreloading, preloadVideo] = useReducer(() => true, false);\n  const [showVideo, startVideo] = useReducer(() => true, !showThumbnail);\n  const [isHovered, setHovered] = useState(false);\n  const borderRadius = useRadius(props);\n  const hasBorderRadius = borderRadius !== \"0px 0px 0px 0px\" && borderRadius !== \"0px\";\n  if (url === \"\") {\n    return /*#__PURE__*/_jsx(Instructions, {});\n  }\n  const parsedURL = parseVideoURL(url);\n  if (parsedURL === undefined) {\n    return /*#__PURE__*/_jsx(ErrorMessage, {\n      message: \"Invalid Youtube URL.\"\n    });\n  }\n  const [videoId, embedURL] = parsedURL; // https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api\n  const thumbnailURL = getThumbnailURL(videoId, thumbnail, getWebPSupported() ? ThumbnailFormat.WebP : ThumbnailFormat.JPG); // https://developers.google.com/youtube/player_parameters\n  const searchParams = embedURL.searchParams;\n  searchParams.set(\"iv_load_policy\", \"3\");\n  searchParams.set(\"rel\", \"0\");\n  searchParams.set(\"modestbranding\", \"1\");\n  searchParams.set(\"playsinline\", \"1\");\n  if (isAutoplay || showThumbnail) {\n    searchParams.set(\"autoplay\", \"1\");\n  }\n  if (isAutoplay && shouldMute) {\n    searchParams.set(\"mute\", \"1\");\n  }\n  if (play === PlayOptions.Loop) {\n    searchParams.set(\"loop\", \"1\");\n    searchParams.set(\"playlist\", videoId);\n  }\n  if (!isRed) {\n    searchParams.set(\"color\", \"white\");\n  }\n  return /*#__PURE__*/_jsxs(\"article\", {\n    onPointerEnter: () => setHovered(true),\n    onPointerLeave: () => setHovered(false),\n    onPointerOver: preloadVideo,\n    onClick: startVideo,\n    style: {\n      ...wrapperStyle,\n      borderRadius,\n      transform:\n      // Safari sometimes struggles to render border-radius:\n      // - on the canvas when changing from 0 to any other value\n      // - or when rendering an iframe\n      hasBorderRadius && (showVideo || onCanvas) ? \"translateZ(0.000001px)\" : \"unset\",\n      cursor: \"pointer\",\n      overflow: \"hidden\"\n    },\n    children: [isPreloading && /*#__PURE__*/_jsx(\"link\", {\n      rel: \"preconnect\",\n      href: \"https://www.youtube.com\"\n    }), isPreloading && /*#__PURE__*/_jsx(\"link\", {\n      rel: \"preconnect\",\n      href: \"https://www.google.com\"\n    }), /*#__PURE__*/_jsx(\"div\", {\n      style: {\n        ...videoStyle,\n        background: showThumbnail ? `center / cover url(${thumbnailURL}) no-repeat` : undefined\n      }\n    }), showVideo ? /*#__PURE__*/_jsx(\"iframe\", {\n      style: videoStyle,\n      src: embedURL.href,\n      frameBorder: \"0\",\n      allow: \"presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n      onClick: onClick,\n      onMouseEnter: onMouseEnter,\n      onMouseLeave: onMouseLeave,\n      onMouseDown: onMouseDown,\n      onMouseUp: onMouseUp\n    }) : /*#__PURE__*/_jsx(PlayButton, {\n      onClick: startVideo,\n      isHovered: isHovered,\n      isRed: isRed\n    })]\n  });\n}\nYoutube.displayName = \"YouTube\";\naddPropertyControls(Youtube, {\n  url: {\n    type: ControlType.String,\n    title: \"Video\"\n  },\n  play: {\n    type: ControlType.Enum,\n    title: \"Autoplay\",\n    options: Object.values(PlayOptions)\n  },\n  shouldMute: {\n    title: \"Mute\",\n    type: ControlType.Boolean,\n    enabledTitle: \"Yes\",\n    disabledTitle: \"No\",\n    hidden(props) {\n      return props.play === PlayOptions.Normal;\n    }\n  },\n  thumbnail: {\n    title: \"Thumbnail\",\n    description: \"Showing a thumbnail improves performance.\",\n    type: ControlType.Enum,\n    options: Object.values(ThumbnailOptions),\n    hidden(props) {\n      return props.play !== PlayOptions.Normal;\n    }\n  },\n  isRed: {\n    title: \"Color\",\n    type: ControlType.Boolean,\n    enabledTitle: \"Red\",\n    disabledTitle: \"White\"\n  },\n  ...borderRadiusControl,\n  ...defaultEvents\n});\nconst defaultProps = {\n  url: \"https://youtu.be/smPos0mJvh8\",\n  play: PlayOptions.Normal,\n  shouldMute: true,\n  thumbnail: ThumbnailOptions.Medium,\n  isRed: true\n};\nYoutube.defaultProps = defaultProps;\nfunction parseVideoURL(urlString) {\n  let url;\n  try {\n    url = new URL(urlString);\n  } catch {\n    const embedURL = getEmbedURL(urlString);\n    return [urlString, embedURL];\n  }\n  if (url.hostname === \"youtube.com\" || url.hostname === \"www.youtube.com\" || url.hostname === \"youtube-nocookie.com\" || url.hostname === \"www.youtube-nocookie.com\") {\n    const pathSegments = url.pathname.slice(1).split(\"/\"); // https://www.youtube.com/watch?v=Fop2oskTug8\n    if (pathSegments[0] === \"watch\") {\n      const videoId = url.searchParams.get(\"v\");\n      const embedURL1 = getEmbedURL(videoId);\n      return [videoId, embedURL1];\n    } // https://www.youtube.com/embed/Fop2oskTug8\n    if (pathSegments[0] === \"embed\") {\n      const videoId1 = pathSegments[1];\n      return [videoId1, url];\n    }\n  } // https://youtu.be/Fop2oskTug8\n  if (url.hostname === \"youtu.be\") {\n    const videoId2 = url.pathname.slice(1);\n    const embedURL2 = getEmbedURL(videoId2);\n    return [videoId2, embedURL2];\n  }\n}\nfunction getEmbedURL(videoId) {\n  return new URL(`https://www.youtube.com/embed/${videoId}`);\n}\nfunction getThumbnailURL(videoId, res, format = ThumbnailFormat.JPG) {\n  // https://gist.github.com/a1ip/be4514c1fd392a8c13b05e082c4da363\n  const pre = ThumbnailFormat.WebP ? \"https://i.ytimg.com/vi_webp/\" : \"https://i.ytimg.com/vi/\";\n  const ext = ThumbnailFormat.WebP ? \"webp\" : \"jpg\";\n  switch (res) {\n    case ThumbnailOptions.Low:\n      return `${pre}${videoId}/hqdefault.${ext}`;\n    case ThumbnailOptions.Medium:\n      return `${pre}${videoId}/sddefault.${ext}`;\n    case ThumbnailOptions.High:\n      return `${pre}${videoId}/maxresdefault.${ext}`;\n    default:\n      return `${pre}${videoId}/0.${ext}`;\n  }\n}\nlet _getWebPSupported; // https://stackoverflow.com/a/27232658\nfunction getWebPSupported() {\n  // We're going to default to webp because it's pretty widely supported by now\n  if (!window) {\n    return true;\n  }\n  if (_getWebPSupported !== undefined) {\n    return _getWebPSupported;\n  }\n  const element = document.createElement(\"canvas\");\n  if (!!(element.getContext && element.getContext(\"2d\"))) {\n    // was able or not to get WebP representation\n    return element.toDataURL(\"image/webp\").indexOf(\"data:image/webp\") == 0;\n  } else {\n    // very old browser like IE 8, canvas not supported\n    return false;\n  }\n} // Helper components\nfunction Instructions() {\n  return /*#__PURE__*/_jsx(\"div\", {\n    style: {\n      ...emptyStateStyle,\n      overflow: \"hidden\"\n    },\n    children: /*#__PURE__*/_jsx(\"div\", {\n      style: centerTextStyle,\n      children: \"To embed a Youtube video, add the URL to the properties\\xa0panel.\"\n    })\n  });\n}\nfunction ErrorMessage({\n  message\n}) {\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: \"framerInternalUI-errorPlaceholder\",\n    style: {\n      ...containerStyles,\n      overflow: \"hidden\"\n    },\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      style: centerTextStyle,\n      children: [\"Error: \", message]\n    })\n  });\n}\nfunction PlayButton({\n  onClick,\n  isHovered,\n  isRed\n}) {\n  return /*#__PURE__*/_jsx(\"button\", {\n    onClick: onClick,\n    \"aria-label\": \"Play\",\n    style: buttonStyle,\n    children: /*#__PURE__*/_jsxs(\"svg\", {\n      height: \"100%\",\n      version: \"1.1\",\n      viewBox: \"0 0 68 48\",\n      width: \"100%\",\n      children: [/*#__PURE__*/_jsx(\"path\", {\n        d: \"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\",\n        fill: isHovered ? isRed ? \"#f00\" : \"#000\" : \"#212121\",\n        fillOpacity: isHovered ? isRed ? 1 : .8 : .8,\n        style: {\n          transition: \"fill .1s cubic-bezier(0.4, 0, 1, 1), fill-opacity .1s cubic-bezier(0.4, 0, 1, 1)\"\n        }\n      }), /*#__PURE__*/_jsx(\"path\", {\n        d: \"M 45,24 27,14 27,34\",\n        fill: \"#fff\"\n      })]\n    })\n  });\n}\nconst buttonStyle = {\n  position: \"absolute\",\n  top: \"50%\",\n  left: \"50%\",\n  transform: \"translate(-50%, -50%)\",\n  width: 68,\n  height: 48,\n  padding: 0,\n  border: \"none\",\n  background: \"transparent\",\n  cursor: \"pointer\"\n};\nconst wrapperStyle = {\n  position: \"relative\",\n  width: \"100%\",\n  height: \"100%\"\n};\nconst centerTextStyle = {\n  textAlign: \"center\",\n  minWidth: 140\n};\nconst videoStyle = {\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  height: \"100%\",\n  width: \"100%\"\n};\nexport const __FramerMetadata__ = {\n  \"exports\": {\n    \"Youtube\": {\n      \"type\": \"reactComponent\",\n      \"name\": \"Youtube\",\n      \"slots\": [],\n      \"annotations\": {\n        \"framerSupportedLayoutWidth\": \"fixed\",\n        \"framerSupportedLayoutHeight\": \"fixed\",\n        \"framerIntrinsicHeight\": \"315\",\n        \"framerIntrinsicWidth\": \"560\",\n        \"framerComponentPresetProps\": \"isRed, borderRadius\",\n        \"framerContractVersion\": \"1\"\n      }\n    },\n    \"__FramerMetadata__\": {\n      \"type\": \"variable\"\n    }\n  }\n};\n//# sourceMappingURL=./YouTube.map", "import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { addPropertyControls, ComponentPresetsConsumer, ControlType, Link } from \"framer\";\nimport { motion } from \"framer-motion\";\nimport * as React from \"react\";\nimport { Youtube as YouTube } from \"https://framerusercontent.com/modules/NEd4VmDdsxM3StIUbddO/bZxrMUxBPAhoXlARkK9C/YouTube.js\";\nconst addImageAlt = (image, alt) => {\n  if (!image || typeof image !== \"object\") {\n    return;\n  }\n  return {\n    ...image,\n    alt\n  };\n}; /**\n   * @framerRecordIdKey id\n   * @framerSlug SVI4jjfql\n   * @framerEnumToDisplayNameUtils 2\n   * @framerData\n   */\nconst data = [{\n  ffO_YEfhb: \"jBerPIYqp\",\n  id: \"sG8oqYsUL\",\n  Jbxal0AIu: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"h5\", {\n      children: \"Thanks for your interest in Nest for Framer. This template is made to help you build your website with less stress and unmatched style.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Nest is based on the Frames X design system and provides accessible and beautiful design guidelines and UI elements. With Nest, you can streamline your site development process and use existing styles, robust components, and predesigned pages to build your desired brand or business online.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Nest is an ever-growing template with continuous free updates. With Framer's ongoing updates, we want to continue to support Nest and provide you with the best possible experience for building sites that work and look above the competition.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: \"Updating styles\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Nest keeps its style set minimal but versatile enough to make scaling your project to the enterprise level possible. To get started, it is recommended to customize global styles. You can access the list of all colors and font styles via the Assets tab from the left sidebar in Framer.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Note\"\n      }), /*#__PURE__*/_jsx(\"em\", {\n        children: \": \"\n      }), \"You must update light and dark colors when updating color styles. This will require you to open the color picker menu for each style and click on light and dark mode icons. You can have a more detailed overview of how the color panel works in Framer \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://www.framer.com/updates/light-and-dark-mode\",\n        openInNewTab: true,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"from the official blog\"\n        })\n      }), \".\"]\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: \"Updating brand colors\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The brand colors are listed as the Primary palette in the assets panel, following a numeric naming convention. You can easily replace, duplicate, remove, or add your own colors.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"You can also customize the gray colors in the template to match your brand's specific shades. These gray colors have a solid appearance and are useful when opacity cannot achieve the desired accessibility level.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"To create a consistent sense of depth, you can utilize the Base colors that represent different opacity levels. These Base styles follow the same numeric scale and can be used to implement transparency in UI elements.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: \"Updating fonts\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Nest has two types of text: Headlines and body fonts used for paragraphs and content. You can replace the default font Inter by updating each text style font parameter.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: \"Updating components\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"You can control various aspects of the design of all Nest components as variables power them. For example, with the Sidebar, you can adjust its status and avatar and even change the variant to a minified state to have a condensed site navigation.\"\n    }), /*#__PURE__*/_jsx(motion.div, {\n      className: \"framer-text-module\",\n      style: {\n        \"--aspect-ratio\": \"560 / 315\",\n        aspectRatio: \"var(--aspect-ratio)\",\n        height: \"auto\",\n        width: \"100%\"\n      },\n      children: /*#__PURE__*/_jsx(ComponentPresetsConsumer, {\n        componentIdentifier: \"module:NEd4VmDdsxM3StIUbddO/bZxrMUxBPAhoXlARkK9C/YouTube.js:Youtube\",\n        children: presetProps => /*#__PURE__*/_jsx(YouTube, {\n          ...presetProps,\n          play: \"On\",\n          shouldMute: true,\n          thumbnail: \"Medium Quality\",\n          url: \"https://youtu.be/0BQdXXPSbdA\"\n        })\n      })\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Note\"\n      }), \": If you'd like to update the Sidebar to the minified state, you must update it on each template page.\"]\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: \"Updating CMS items\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Nest offers dynamic CMS collections that allow you to customize your portfolio, blog, store items, and other content types. With Nest collections, you can easily add, remove, and modify items that represent your products, case studies, or any other content.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Note\"\n      }), \": we recommend to check \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://www.framer.com/learn/cms/\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"the official blog\"\n        })\n      }), \" to learn more on how to manage your CMS content.\"]\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: \"Updating images\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"When using Nest, you have the option to choose between Dark and Light themes. This means that when you update your images through CMS or edit components, you will come across image containers that have both light and dark properties. \"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Note\"\n      }), \": The default image resolution is \", /*#__PURE__*/_jsx(\"code\", {\n        children: \"1440 x 824\"\n      }), \", representing the recommended resolution for an internet image within a 1.9:1 ratio. By preparing and uploading two images into the Image container, you can ensure that your images adapt to the user's preferred theme - light or dark.\"]\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: \"Conclusion\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"We believe that the Nest template will be a valuable addition to the Framer community, offering a high-quality product that is worth its cost. \"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"em\", {\n        children: \"If you encounter any difficulties or need assistance in customizing or utilizing the available components, please don't hesitate to DM me on \"\n      }), /*#__PURE__*/_jsx(Link, {\n        href: \"https://twitter.com/buninux\",\n        openInNewTab: true,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: /*#__PURE__*/_jsx(\"em\", {\n            children: \"X(Twitter)\"\n          })\n        })\n      }), /*#__PURE__*/_jsx(\"em\", {\n        children: \".\"\n      })]\n    })]\n  }),\n  kbLro620V: \"Get started guide\",\n  Q409fqAbY: \"Intro tips to work with Nest template for Framer.\",\n  rTaOFH6bK: \"2029-09-30T00:00:00.000Z\",\n  SVI4jjfql: \"get-started\",\n  wRjLIa41P: addImageAlt({\n    src: \"https://framerusercontent.com/images/LjyToHKuX0y1WEYr23Aoar01Y.jpg\",\n    srcSet: \"https://framerusercontent.com/images/LjyToHKuX0y1WEYr23Aoar01Y.jpg?scale-down-to=512 512w, https://framerusercontent.com/images/LjyToHKuX0y1WEYr23Aoar01Y.jpg?scale-down-to=1024 1024w, https://framerusercontent.com/images/LjyToHKuX0y1WEYr23Aoar01Y.jpg 1440w\"\n  }, \"Nest for Framer \u2014 Get Started Guide\")\n}, {\n  ffO_YEfhb: \"WaLO_7RX3\",\n  id: \"cO4LsmP4Y\",\n  Jbxal0AIu: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"h5\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Boosting creative efficiency: Top productivity tips and hacks for designers\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Web designers operate in a fast-paced and ever-evolving environment, juggling multiple projects, tight deadlines, and client expectations. Staying productive while maintaining creative excellence is essential for success in this competitive field. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"To help web designers streamline their workflows and maximize their efficiency, we've compiled a list of productivity hacks that can boost creativity, organization, and overall productivity.\"\n    }), /*#__PURE__*/_jsx(\"ol\", {\n      children: /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"h6\",\n        children: /*#__PURE__*/_jsx(\"h6\", {\n          children: /*#__PURE__*/_jsx(\"strong\", {\n            children: \"Establish a design process\"\n          })\n        })\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"A well-defined design process sets the foundation for productivity. Create a step-by-step workflow that outlines the stages of your design projects, from research and ideation to prototyping and implementation. Having a clear process ensures that you stay organized, minimize wasted time, and deliver consistent results to clients.\"\n    }), /*#__PURE__*/_jsx(\"ol\", {\n      start: \"2\",\n      children: /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"h6\",\n        children: /*#__PURE__*/_jsx(\"h6\", {\n          children: /*#__PURE__*/_jsx(\"strong\", {\n            children: \"Utilize design systems\"\n          })\n        })\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design systems are a collection of reusable components, patterns, and guidelines that facilitate consistency across projects. By creating and maintaining a design system, web designers can save time, improve collaboration, and ensure a cohesive user experience. \"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Note:\"\n      }), \" Design systems also allow for rapid prototyping and iterations, as the core elements are already established.\"]\n    }), /*#__PURE__*/_jsx(\"ol\", {\n      start: \"3\",\n      children: /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"h6\",\n        children: /*#__PURE__*/_jsx(\"h6\", {\n          children: /*#__PURE__*/_jsx(\"strong\", {\n            children: \"Embrace time management techniques\"\n          })\n        })\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Time management is crucial for web designers who often face competing priorities. Employ time management techniques like the Pomodoro Technique, which involves working in focused intervals (e.g., 25 minutes) followed by short breaks. This method can enhance focus, prevent burnout, and increase overall productivity.\"\n    }), /*#__PURE__*/_jsx(\"ol\", {\n      start: \"4\",\n      children: /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"h6\",\n        children: /*#__PURE__*/_jsx(\"h6\", {\n          children: /*#__PURE__*/_jsx(\"strong\", {\n            children: \"Create design templates\"\n          })\n        })\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Frequently used design elements, such as buttons, headers, and icons, can be saved as templates for easy reuse. Having a library of design templates accelerates your workflow and ensures consistency across projects.\"\n    }), /*#__PURE__*/_jsx(\"ol\", {\n      start: \"5\",\n      children: /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"h6\",\n        children: /*#__PURE__*/_jsx(\"h6\", {\n          children: /*#__PURE__*/_jsx(\"strong\", {\n            children: \"Stay organized with project management tools\"\n          })\n        })\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Managing multiple projects simultaneously requires excellent organization. Adopt project management tools like Trello, Asana, or Monday.com to keep track of tasks, deadlines, and progress. These tools help you prioritize tasks, collaborate efficiently, and prevent tasks from slipping through the cracks.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Conclusion\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In the fast-paced world of web design, productivity hacks play a significant role in enhancing efficiency and creativity. Establishing a streamlined design process, utilizing design systems, and embracing time management techniques are just a few ways to boost productivity. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, productivity is not about rushing through tasks but about finding smart and creative ways to optimize your design process and bring your visions to life effectively.\"\n    })]\n  }),\n  kbLro620V: \"Work-life balance tips for web designers\",\n  Q409fqAbY: \"Tips to boost your daily design workflow.\",\n  rTaOFH6bK: \"2029-08-05T00:00:00.000Z\",\n  SVI4jjfql: \"productivity-hacks\",\n  wRjLIa41P: addImageAlt({\n    src: \"https://framerusercontent.com/images/gVioSer4Lc2tmXPGuw8CROuLWGw.webp\"\n  }, \"Work-life balance tips\")\n}, {\n  ffO_YEfhb: \"Dd87FTIX7\",\n  id: \"SkWqK9Vhk\",\n  Jbxal0AIu: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"h5\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Modern best practices and hacks for dark mode data visualization\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As dark mode gains popularity across various platforms and applications, it has become essential for data visualization to adapt to this trend. Dark mode not only provides a visually appealing experience but also reduces eye strain and saves battery life on devices with OLED screens. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"However, creating effective data visualizations in dark mode requires careful consideration and implementation. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In this article, we will explore the modern best practices for dark mode data visualization to ensure clarity, readability, and user satisfaction.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Color contrast is key\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In dark mode, the primary concern is maintaining sufficient contrast between the background and the data elements. Choose a dark background that is easy on the eyes and provides enough contrast for data points and labels to stand out. Use bright, contrasting colors for data visualizations, ensuring that they are easily distinguishable from the background. High contrast ensures that users can quickly interpret the information without straining their eyes.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Use thoughtful color palettes\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Selecting an appropriate color palette is crucial for dark mode data visualization. Avoid using pure white for text and data elements, as it may cause harsh contrasts. Instead, opt for softer, off-white colors or slightly tinted variations of white. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Always utilize a limited number of colors for your data visualizations, and ensure that they work well together, providing a cohesive and harmonious visual experience.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"While the majority of the interface is dark, judiciously incorporate bright accents to draw attention to specific data points or highlight important information. Bright colors can be used for call-to-action buttons, critical data points, or to emphasize trends and patterns. However, be cautious not to overuse them, as excessive brightness in a dark environment can cause discomfort.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Optimize text legibility\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Text legibility is of utmost importance in dark mode data visualization. Ensure that text is easy to read by using a font size that is appropriate for the data visualization and the screen size. \"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Tip:\"\n      }), \" Avoid thin or light-colored fonts that may blend into the dark background. Instead, opt for bold and clear typefaces that stand out. Additionally, use proper line spacing and ample margins to improve text readability.\"]\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Test with real users\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Before implementing dark mode data visualization in your application, conduct user testing to gather feedback and identify any potential issues. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Observe how users interact with the interface, analyze their feedback, and make necessary adjustments based on their preferences and pain points. User feedback is invaluable in refining and improving your data visualizations.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Maintain accessibility\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Accessibility should never be overlooked, whether in light mode or dark mode. Ensure that your dark mode data visualizations are accessible to all users, including those with visual impairments. Provide alternative text for images, use proper semantic markup, and test your data visualizations with screen readers and other assistive technologies.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Conclusion\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Dark mode data visualization presents a unique set of challenges and opportunities for modern web and application developers. By prioritizing contrast, thoughtful color palettes, text legibility, and adaptability, developers can create data visualizations that are both visually appealing and effective in conveying information. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"By following these best practices, developers can embrace the dark mode trend and create data visualizations that illuminate the path for users in any environment.\"\n    })]\n  }),\n  kbLro620V: \"Dark mode design best practices\",\n  Q409fqAbY: \"Adapting data to modern visual trends.\",\n  rTaOFH6bK: \"2029-08-20T00:00:00.000Z\",\n  SVI4jjfql: \"dark-mode-data-viz\",\n  wRjLIa41P: addImageAlt({\n    src: \"https://framerusercontent.com/images/mii9meJqSwzHJMp95voWcuT72xY.webp\"\n  }, \"Dark mode design best practices\")\n}, {\n  ffO_YEfhb: \"oJTmSkbTL\",\n  id: \"RFVlA1tcV\",\n  Jbxal0AIu: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"h5\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Unlock the secrets of exceptional user experience design for mobile apps\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In an increasingly mobile-driven world, where smartphones have become extensions of ourselves, the user experience (UX) of mobile apps has emerged as a crucial factor in determining an app's success. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Whether it's a social media platform, a productivity tool, a game, or an e-commerce app, providing a seamless and delightful user experience can make all the difference between an app that captivates users and one that gets uninstalled after a few minutes of frustration.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Understanding mobile guidelines\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"User Experience Design is the art and science of creating products and interfaces that are intuitive, efficient, and pleasurable to use. In the context of mobile apps, UX design goes beyond aesthetics; it's about crafting an experience that effortlessly guides users toward their goals while evoking positive emotions along the way. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"A well-designed UX takes into account the user's needs, preferences, and behaviors, ensuring that the app feels like a natural extension of their daily life.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Simplicity and intuitiveness\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The cornerstone of a successful mobile app user experience is simplicity. An app should present its functionality in a straightforward manner, allowing users to achieve their objectives without unnecessary clutter or complexity. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Avoid overwhelming users with too many options on the screen or intricate navigation menus. Instead, prioritize essential features and create intuitive user flows that make sense to the user.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Responsive vs. adaptive design\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In today's diverse landscape of mobile devices, it's crucial to ensure your app works seamlessly across different screen sizes and orientations. Responsive design ensures that the app adapts to various devices, while adaptive design tailors the interface to suit specific screen sizes. \"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Tip:\"\n      }), \" By providing a consistent experience, regardless of the device used, you enhance the app's usability and retain more users.\"]\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Consistency in visual elements\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Consistency is vital for creating a cohesive and recognizable mobile app. Use a consistent color scheme, typography, and iconography throughout the app. This creates a sense of familiarity, making it easier for users to navigate and interact with the interface. Furthermore, maintain consistency in terminology and the placement of navigation elements, reducing the learning curve for users as they move through the app.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Feedback and error handling\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Feedback is an essential aspect of mobile app UX design. Inform users about the outcome of their actions promptly and clearly. Utilize visual cues like animations or micro-interactions to provide feedback when users interact with buttons or elements. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Moreover, handle errors gracefully by offering meaningful error messages and suggestions for resolution. Users should feel supported and informed, even when something goes wrong.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Accessibility and inclusivity\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Mobile apps should be designed with inclusivity in mind, ensuring they are accessible to all users, including those with disabilities. Incorporate features like voice commands, text-to-speech, and adjustable font sizes to accommodate different needs. Adhering to accessibility guidelines not only makes the app more user-friendly but also aligns with ethical and legal considerations.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Conclusion\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In the competitive world of mobile apps, user experience design has emerged as the key differentiator between success and failure. Prioritizing simplicity, intuitiveness, and efficiency while maintaining consistency and responsiveness will elevate your app above the competition. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, the heart of mobile app UX design lies in providing an experience that feels seamless, effortless, and enjoyable, turning users into loyal advocates of your app.\"\n    })]\n  }),\n  kbLro620V: \"Secrets of exceptional mobile UX\",\n  Q409fqAbY: \"Art of mobile user experience design.\",\n  rTaOFH6bK: \"2029-08-16T00:00:00.000Z\",\n  SVI4jjfql: \"mobile-apps-ux\",\n  wRjLIa41P: addImageAlt({\n    src: \"https://framerusercontent.com/images/T0LQSnIBkQaqRmtfOPRLNEofrjg.webp\"\n  }, \"Secrets of exceptional mobile UX\")\n}, {\n  ffO_YEfhb: \"kzOEOAI0K\",\n  id: \"S0oooeL9T\",\n  Jbxal0AIu: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"h5\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Modern development trends for building web apps\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The world of web development is constantly evolving, driven by new technologies, changing user expectations, and evolving industry standards. To stay ahead in this fast-paced landscape, developers must adopt modern web development best practices that not only ensure high-quality applications but also set the foundation for future scalability and adaptability. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In this article, we will explore some of the essential best practices that web developers should follow to create cutting-edge web experiences.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Embracing responsive web design\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"With a wide range of devices used to access the web, from smartphones to desktops and everything in between, responsive web design is no longer optional\u2014it's a necessity. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"By adopting a mobile-first approach and designing websites that adapt to different screen sizes and orientations, developers can provide a seamless experience for users across all devices. Using CSS media queries and flexible layouts, responsive web design ensures that content and interactions remain consistent and optimized, regardless of the device being used.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Performance optimization\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In today's fast-paced digital world, users have little patience for slow-loading websites.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Performance optimization is crucial for improving user experience and search engine rankings. Minify and compress CSS, JavaScript, and HTML files to reduce load times. Optimize images without compromising quality. Leverage browser caching to reduce server requests. Implement lazy loading to load images and content only when needed. By prioritizing performance, developers can create websites that load quickly and keep users engaged.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Secure web development\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Security is a top concern in web development. Cyberattacks and data breaches are rampant, and users expect their information to be safeguarded. Adhere to best security practices, such as using HTTPS for all communication, validating user input to prevent code injection attacks, and implementing proper authentication and authorization mechanisms. \"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Tip:\"\n      }), \" Regularly update dependencies and libraries to address potential vulnerabilities. By making security a priority, developers can build trust with users and protect sensitive data.\"]\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Accessibility for all\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Web accessibility is not only a legal requirement in many countries but also a moral obligation to ensure equal access to information and services. Follow the Web Content Accessibility Guidelines (WCAG) to make your websites accessible to people with disabilities. Provide alternative text for images, ensure proper semantic markup, and test your websites using screen readers and other assistive technologies. By creating inclusive web experiences, developers can reach a broader audience and make a positive impact on users' lives.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Cross-browser compatibility\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"With numerous web browsers available, each with its rendering engine and quirks, cross-browser compatibility is essential. Test your websites on popular browsers like Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, and others. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Use feature detection instead of browser detection to ensure that your website gracefully degrades on older browsers without breaking functionality. By prioritizing cross-browser compatibility, developers can reach a broader audience and enhance user satisfaction.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Version control and collaboration\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Version control systems like Git have become indispensable tools for modern web development. Utilize version control to track changes, collaborate with other developers, and roll back to previous versions if needed. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Platforms like GitHub and GitLab facilitate team collaboration and code review processes. By implementing version control and collaborative workflows, developers can work efficiently, reduce conflicts, and maintain a well-organized codebase.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Continuous integration and deployment (CI/CD)\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Automating the build, testing, and deployment processes through CI/CD pipelines streamlines the development workflow and ensures a consistent, error-free release process. CI/CD pipelines help catch bugs early, maintain code quality, and enable rapid deployment to production environments. This approach allows developers to focus on creating new features and improvements while automated processes take care of repetitive tasks.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Optimizing for SEO\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Search Engine Optimization (SEO) plays a vital role in driving organic traffic to websites. Utilize proper meta tags, descriptive URLs, and semantic HTML to make your website search engine friendly. Create valuable and relevant content that attracts backlinks and social shares. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Pay attention to page loading times, as faster websites are favored by search engines. By optimizing for SEO, developers can increase their website's visibility and reach a larger audience.\"\n    }), /*#__PURE__*/_jsx(\"h6\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Conclusion\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Modern web development is a dynamic and ever-changing field. By embracing responsive design, optimizing performance, ensuring security and accessibility, utilizing PWAs, supporting cross-browser compatibility, adopting version control and collaboration tools, implementing CI/CD pipelines, and optimizing for SEO, developers can build websites that not only meet the needs of today's users but also lay the groundwork for future growth and success. \"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Staying informed about emerging technologies and trends will allow developers to remain at the forefront of web development, delivering exceptional web experiences in an ever-evolving digital world.\"\n    })]\n  }),\n  kbLro620V: \"Web development: building for tomorrow\",\n  Q409fqAbY: \"Best practices for building web apps.\",\n  rTaOFH6bK: \"2029-07-30T00:00:00.000Z\",\n  SVI4jjfql: \"web-dev-best-practices\",\n  wRjLIa41P: addImageAlt({\n    src: \"https://framerusercontent.com/images/m1CEMGlZyg5vJtev0zuh0rqcc.webp\"\n  }, \"Web development tips\")\n}];\nfor (const item of data) {\n  Object.freeze(item);\n}\naddPropertyControls(data, {\n  kbLro620V: {\n    defaultValue: \"\",\n    title: \"Name\",\n    type: ControlType.String\n  },\n  Q409fqAbY: {\n    defaultValue: \"\",\n    title: \"Description\",\n    type: ControlType.String\n  },\n  ffO_YEfhb: {\n    defaultValue: \"jBerPIYqp\",\n    options: [\"jBerPIYqp\", \"quX06ZisO\", \"WaLO_7RX3\", \"aF0_pmoBo\", \"oJTmSkbTL\", \"Dd87FTIX7\", \"kzOEOAI0K\"],\n    optionTitles: [\"Framer\", \"Figma\", \"Productivity\", \"Design systems\", \"Mobile\", \"Design\", \"Web dev\"],\n    title: \"Tag\",\n    type: ControlType.Enum\n  },\n  wRjLIa41P: {\n    title: \"Cover\",\n    type: ControlType.ResponsiveImage\n  },\n  rTaOFH6bK: {\n    title: \"Date\",\n    type: ControlType.Date\n  },\n  Jbxal0AIu: {\n    defaultValue: \"\",\n    title: \"Content\",\n    type: ControlType.RichText\n  },\n  SVI4jjfql: {\n    title: \"Link\",\n    type: ControlType.String\n  }\n});\ndata[\"displayName\"] = \"Blog\";\nexport default data;\nexport const ffO_YEfhbToDisplayName = (value, locale) => {\n  const fallbackLocale = locale === null || locale === void 0 ? void 0 : locale.fallback;\n  switch (value) {\n    case \"jBerPIYqp\":\n      return \"Framer\";\n    case \"quX06ZisO\":\n      return \"Figma\";\n    case \"WaLO_7RX3\":\n      return \"Productivity\";\n    case \"aF0_pmoBo\":\n      return \"Design systems\";\n    case \"oJTmSkbTL\":\n      return \"Mobile\";\n    case \"Dd87FTIX7\":\n      return \"Design\";\n    case \"kzOEOAI0K\":\n      return \"Web dev\";\n    default:\n      return \"\";\n  }\n};\nexport const enumToDisplayNameFunctions = {\n  ffO_YEfhb: ffO_YEfhbToDisplayName\n};\nexport const __FramerMetadata__ = {\n  \"exports\": {\n    \"ffO_YEfhbToDisplayName\": {\n      \"type\": \"variable\",\n      \"annotations\": {\n        \"framerContractVersion\": \"1\"\n      }\n    },\n    \"default\": {\n      \"type\": \"data\",\n      \"name\": \"data\",\n      \"annotations\": {\n        \"framerEnumToDisplayNameUtils\": \"2\",\n        \"framerSlug\": \"SVI4jjfql\",\n        \"framerContractVersion\": \"1\",\n        \"framerData\": \"\",\n        \"framerRecordIdKey\": \"id\"\n      }\n    },\n    \"enumToDisplayNameFunctions\": {\n      \"type\": \"variable\",\n      \"annotations\": {\n        \"framerContractVersion\": \"1\"\n      }\n    },\n    \"__FramerMetadata__\": {\n      \"type\": \"variable\"\n    }\n  }\n};"],
  "mappings": "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",
  "names": ["PlayOptions", "ThumbnailOptions", "ThumbnailFormat", "Youtube", "url", "play", "shouldMute", "thumbnail", "isRed", "onClick", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "props", "onCanvas", "useIsOnCanvas", "isAutoplay", "showThumbnail", "isPreloading", "preloadVideo", "le", "showVideo", "startVideo", "isHovered", "setHovered", "ye", "borderRadius", "useRadius", "hasBorderRadius", "p", "Instructions", "parsedURL", "parseVideoURL", "ErrorMessage", "videoId", "embedURL", "thumbnailURL", "getThumbnailURL", "getWebPSupported", "searchParams", "u", "wrapperStyle", "videoStyle", "PlayButton", "addPropertyControls", "ControlType", "borderRadiusControl", "defaultEvents", "defaultProps", "urlString", "getEmbedURL", "pathSegments", "embedURL1", "videoId2", "embedURL2", "res", "format", "pre", "ext", "_getWebPSupported", "window", "element", "emptyStateStyle", "centerTextStyle", "message", "containerStyles", "buttonStyle", "addImageAlt", "image", "alt", "data", "u", "x", "p", "Link", "motion", "ComponentPresetsConsumer", "presetProps", "Youtube", "item", "addPropertyControls", "ControlType", "AVdUf_FiS_default", "ffO_YEfhbToDisplayName", "value", "locale", "fallbackLocale", "enumToDisplayNameFunctions", "__FramerMetadata__"]
}