{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/614b81b810354c3c8202aa285cfe00b4\" frameborder=\"0\" width=\"1920\" height=\"1440\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":1440,"width":1920,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1440,"thumbnail_width":1920,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/614b81b810354c3c8202aa285cfe00b4-00001.gif","duration":58.34,"title":"Date range input (advanced variant)","description":"In this video, I will be demonstrating the advanced variant of the date range component, which you can find in the DS Official Component figma library. I have created a small prototype to showcase its functionality. The component includes a list of presets and a custom range option. I will show you how the user can select a date range using preset options, or progressively reveal the date range input for custom date ranges. Stay tuned for a quick and informative walkthrough. Enjoy!\n\nAdvanced Date range input: https://www.figma.com/file/Tau6qv5iyr8wthWNqYktej/DS-Official-Components?type=design&node-id=52548%3A30938&mode=design&t=lpWIhw9elzp1Yq76-1\n\nNOTE: This component is out of context. For guidance on using the asterisk for required fields visit the Forms PATTERN in the Product Design System guidance portal https://zeroheight.com/2ccf2b601/p/288da6-product-design-system"}