Icon-stories.b6cc3107.iframe.bundle.js

"use strict";(self.webpackChunk_haaretz_a_htz_sg=self.webpackChunk_haaretz_a_htz_sg||[]).push([[3674],{"../../ds-atoms/s-icon/src/Icon.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Brand:()=>Brand,BrandInverse:()=>BrandInverse,CssCustomPropsOverrides:()=>CssCustomPropsOverrides,Danger:()=>Danger,DuotoneIcons:()=>DuotoneIcons,IconLibrary:()=>IconLibrary,Inverse:()=>Inverse,Neutral:()=>Neutral,Overview:()=>Overview,Success:()=>Success,default:()=>Icon_stories});var defineProperty=__webpack_require__("../../../node_modules/.pnpm/@babel+runtime@7.22.10/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),jsx_runtime=__webpack_require__("../../../node_modules/.pnpm/next@13.5.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react/jsx-runtime.js"),preview=__webpack_require__("../../config/l-storybook-config/preview.js"),style9=__webpack_require__("../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs"),src_Icon=__webpack_require__("../../ds-atoms/s-icon/src/Icon.tsx"),react=__webpack_require__("../../../node_modules/.pnpm/next@13.5.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react/index.js"),lib=__webpack_require__("../../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("../../../node_modules/.pnpm/@storybook+addon-docs@7.4.6_@types+react-dom@18.2.11_@types+react@18.2.25_react-dom@18.2.0_react@18.2.0/node_modules/@storybook/addon-docs/dist/index.mjs"),objectDestructuringEmpty=__webpack_require__("../../../node_modules/.pnpm/@babel+runtime@7.22.10/node_modules/@babel/runtime/helpers/esm/objectDestructuringEmpty.js");const iconNames=["Login","Logout","a11y","alef","android","apple","arrow-right","audio-ff","audio-less","audio-off","audio-rw","audio","bell","bookmark","camera","check","chevron-bottom","chevron-left","chevron-right","close","comments","discover","dislike","drive","edit","facebook","gift","hdc","headphones","heart","hide","home","htz","like","lock","m","mail","marker","menu","microphone","minus","most-viewed","pause","pdf","phone","play","playlist","plus","printer","rss","search","share","show","spotify","star","twitter","user","warn","whattsup","zen","zoom-in"];var fuzzysort=__webpack_require__("../../../node_modules/.pnpm/fuzzysort@2.0.1/node_modules/fuzzysort/fuzzysort.js"),fuzzysort_default=__webpack_require__.n(fuzzysort);function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,defineProperty.Z)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const c={range:{appearance:"cBRpiW",verticalAlign:"eLDTYY",marginInlineEnd:"joUZpP"},rangeLabel:{fontSize:"gVscJz",lineHeight:"kvNqZl"},input:{backgroundColor:"fozssY",borderTopLeftRadius:"gQJVfF",borderTopRightRadius:"bnguzQ",borderBottomRightRadius:"fBfCSu",borderBottomLeftRadius:"bzskLL",color:"cwWSWx",marginInlineStart:"euSzUE",marginTop:"cyerGB",borderBottomColor:"jDGBcE",borderBottomStyle:"hpBjJb",borderBottomWidth:"ctibpX",paddingBottom:"eejUxl",borderInlineEndColor:"hZkvms",borderInlineEndStyle:"hszzXi",borderInlineEndWidth:"bTnXNj",paddingInlineEnd:"cfEHVR",borderInlineStartColor:"grUIbW",borderInlineStartStyle:"itlHSH",borderInlineStartWidth:"hXXzlB",paddingInlineStart:"kQDwxQ",borderTopColor:"jNgswG",borderTopStyle:"FwRrA",borderTopWidth:"izykGz",paddingTop:"bdXHYu",":focus":{borderTopColor:"gcRzFY",borderRightColor:"DVpjO",borderBottomColor:"FIGxf",borderLeftColor:"dGMaZR",outlineStyle:"larHMv"}},iconsWrapper:{borderTopWidth:"izykGz",borderRightWidth:"ikqruN",borderBottomWidth:"ctibpX",borderLeftWidth:"kzDapR",borderTopStyle:"FwRrA",borderRightStyle:"cDIyHz",borderBottomStyle:"hpBjJb",borderLeftStyle:"ycSPk",borderTopColor:"mZPxF",borderRightColor:"fCajuQ",borderBottomColor:"jywRBN",borderLeftColor:"fUryUI",borderTopLeftRadius:"dJnzRg",borderTopRightRadius:"gALPBo",borderBottomRightRadius:"hAAOrm",borderBottomLeftRadius:"hXmGrK",color:"eSSHzp",display:"kbCXHY",gridTemplateColumns:"hfUek",columnGap:"haEjPJ",rowGap:"gtFPZM",marginBottom:"dkSlsL",marginTop:"cUXNmd",paddingTop:"jWWtke",paddingRight:"ftIldC",paddingBottom:"bnHxUw",paddingLeft:"iDuqPI"},iconTile:{paddingBottom:"fZMRmg",textAlign:"kooHYa"},iconName:{fontSize:"gVscJz",lineHeight:"kvNqZl",color:"kJCqIw",display:"kQBRAp",fontFamily:"kFrTVr"}},MIN_SIZE=2,MAX_SIZE=40;function IconShowcase(props){const restProps=Object.assign({},((0,objectDestructuringEmpty.Z)(props),props)),defaultIconResults=iconNames.map(((name,i)=>({score:0-i,target:name,total:iconNames.length}))),[iconSize,setIconSize]=react.useState(10),[icons,setIcons]=react.useState(defaultIconResults);const iconSizeInRem=iconSize/4+"rem";return(0,jsx_runtime.jsxs)("div",{dir:"ltr",children:[(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsxs)("label",{children:[(0,jsx_runtime.jsx)("strong",{children:"Icon size:  "}),(0,jsx_runtime.jsx)("input",{type:"range",value:iconSize,min:MIN_SIZE,max:MAX_SIZE,className:(0,style9.Z)(c.range),onChange:function iconSizeChangeHandler(evt){setIconSize(Number(evt.target.value))}})]}),(0,jsx_runtime.jsxs)("span",{className:(0,style9.Z)(c.rangeLabel),children:[iconSize," (",iconSizeInRem,")"]})]}),(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsxs)("label",{children:[(0,jsx_runtime.jsx)("strong",{children:"Filter Icons:"}),(0,jsx_runtime.jsx)("input",{type:"text",className:(0,style9.Z)(c.input),onChange:function filterIcons(evt){const value=evt.target.value,iconsToShow=value?fuzzysort_default().go(value,iconNames):defaultIconResults;setIcons(iconsToShow)}})]})}),(0,jsx_runtime.jsx)("div",{className:(0,style9.Z)(c.iconsWrapper),style:{"--iconLibFontsize":iconSizeInRem},children:icons.map((icon=>(0,jsx_runtime.jsx)(IconTile,_objectSpread({icon:icon.target},restProps),icon.target)))})]})}function IconTile(props){return(0,jsx_runtime.jsxs)("div",{className:(0,style9.Z)(c.iconTile),style:{fontSize:"var(--iconLibFontsize)"},children:[(0,jsx_runtime.jsx)(src_Icon.Z,_objectSpread({},props)),(0,jsx_runtime.jsx)("span",{className:(0,style9.Z)(c.iconName),children:props.icon})]})}try{IconShowcase.displayName="IconShowcase",IconShowcase.__docgenInfo={description:"",displayName:"IconShowcase",props:{inlineStyle:{defaultValue:null,description:"CSS declarations to be set as inline `style` on the\nhtml element.\n\nBy setting values of CSS Custom Properties based on\nprops or state in the consuming component (where\nthe value of `inlineStyle` is passed), `inlineStyle`\ncan be used as an API contract for setting dynamic\nvalues to styles created with `style9.create()`:\n@example ```ts\nimport s9 from 'style9';\nconst { styleExtend, } = s9.create({\n  styleExtend: {\n    color: 'var(--color-based-on-prop)',\n  },\n});\n\nfunction MyIcon(props) {\n  const inlineStyle = {\n    '--color-based-on-prop': props.color,\n  },\n\n  return (\n   <Icon\n     styleExtend={[ styleExtend, ]}\n     inlineStyle={inlineStyle}\n   />\n  );\n}\n```",name:"inlineStyle",required:!1,type:{name:"InlineStyles | undefined"}},styleExtend:{defaultValue:null,description:"An array of `Style`s created by `style9.create()`.\nWARNING: **_do not_** pass simple CSS-in-JS object.\nThe items in the array must be created with Style9's\n`create` function.\nThe array can also hold falsy values to assist with\nconditional inclusion of `Style`s:\n@example ```ts\nconst { foo, bar, } = s9.create({ foo: { ... }, bar: { ... }, });\n<Icon styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}},variant:{defaultValue:null,description:"The color of the icon",name:"variant",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"inherit"'},{value:'"brand"'},{value:'"neutral"'},{value:'"danger"'},{value:'"success"'},{value:'"inverse"'},{value:'"brandInverse"'}]}},focusable:{defaultValue:null,description:"Make the icon keyboard accessible",name:"focusable",required:!1,type:{name:"boolean | undefined"}},screenReaderText:{defaultValue:null,description:"Visually hidden text for screen readers",name:"screenReaderText",required:!1,type:{name:"ReactNode"}},a11yLabel:{defaultValue:null,description:"An A11Y label for the icon",name:"a11yLabel",required:!1,type:{name:"string | undefined"}},a11yDescription:{defaultValue:null,description:"An A11Y description for the icon",name:"a11yDescription",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-icon/src/IconShowcase.tsx#IconShowcase"]={docgenInfo:IconShowcase.__docgenInfo,name:"IconShowcase",path:"../../ds-atoms/s-icon/src/IconShowcase.tsx#IconShowcase"})}catch(__react_docgen_typescript_loader_error){}function _createMdxContent(props){const _components=Object.assign({h1:"h1",h2:"h2",p:"p",strong:"strong",code:"code",pre:"pre",h3:"h3",h4:"h4",ul:"ul",li:"li",a:"a"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(_components.h1,{id:"icon",children:"Icon"}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n","\n","\n","\n",(0,jsx_runtime.jsx)(_components.h2,{id:"installation",children:"Installation"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.strong,{children:["Make sure the package you use ",(0,jsx_runtime.jsx)(_components.code,{children:"Icon"})," in has ",(0,jsx_runtime.jsx)(_components.code,{children:"@haaretz/s-icon"})," listed in its\n",(0,jsx_runtime.jsx)(_components.code,{children:"package.json"}),"'s ",(0,jsx_runtime.jsx)(_components.code,{children:"dependencies"})," field:"]})}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-js",children:'// package.json\n{\n  // ...\n  "dependencies": {\n    "@haaretz/s-icon": "workspace:*"\n    // ...\n  }\n}\n'})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Because internal monorepo packages are wired up using TypeScript's path aliases\nfeature in dev mode, importing ",(0,jsx_runtime.jsx)(_components.code,{children:"Icon"})," without listing it as a dependency will\nwork in dev mode, but will fail in production. There should be a\n",(0,jsx_runtime.jsx)(_components.code,{children:"import/no-unresolved"})," eslint error when trying to import it when it is not\nlisted as a dependency."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"You can then import it like this:"}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-js",children:"import Icon from '@haaretz/s-icon';\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"overview",children:"Overview"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Icons are symbols used to visually codify and represent concepts and\\or actions.\nWhen used with care, they have the potential to communicate complex ideas at a\nglance, afford interactivity and draw attention to important information."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Since icons represent codified concepts, it is important to use them in a clear\nand understandable context. When used outside of context, icons can become\ncounterproductive, as they have the potential to confuse to the user."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Using a consistent set of icons helps establish a familiar look and feel across\na site, while using individual icons consistently establishes a reliable\nrelationship between the image and a specific concept or action. For example,\ndon’t use an envelope icon to indicate email on one page and mailing address on\nanother."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Users should be able to trust that a certain icon always means the same thing,\nno matter where it’s used on your site. It’s important that icons always serve a\nsingle functional purpose throughout a site."}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"usage-guidance",children:"Usage Guidance"}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"use-icons-to",children:"Use Icons to"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Draw attention"}),". Icons are most helpful when combined with text and should\ndirectly relate to the text they accompany."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Guide users to key information"}),". Use icons as scannable, easy-to-understand\nvisual indicators for key information (as in an amenities list)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Enhance an actionable target"}),". Icons are helpful as touch or click targets.\nUse icons for common and recognizable actions like opening a menu or sharing\nan article."]}),"\n"]}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"when-not-to-use-icons",children:"When not to Use Icons"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"In ambiguous meaning"}),". If the meaning of an icon is ambiguous by itself, it\nneeds accompanying text. Even with text, do not use icons outside their\nassigned context."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"To Compensate for clutter"}),". Icons won't fix bad design decisions, unclear\npage hierarchy or confusing content architecture. Don’t rely on an icon to\nhelp draw attention to something important that’s hard to find."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"As illustrations"}),". To remain effective, icons must command a specific,\nfunctional meaning. Do not use icons outside their intended usage for\nillustrative purposes."]}),"\n"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["In order to minimize runtime JavaScript, the icon component uses the SVG\n",(0,jsx_runtime.jsx)(_components.code,{children:"<use />"})," element to embed icons from a server-rendered\n",(0,jsx_runtime.jsxs)(_components.a,{href:"https://css-tricks.com/svg-symbol-good-choice-icons",target:"_blank",rel:"nofollow noopener noreferrer",children:["svg-sprite using ",(0,jsx_runtime.jsx)(_components.code,{children:"<symbol />"}),"s"]}),"."]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:(0,jsx_runtime.jsx)(_components.a,{href:"#icon-library",children:"See here for the complete icon library"})}),"."]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"playground",children:"Playground"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Change the props below to see how they affect the icon"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--overview"})}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"props",children:"Props"}),"\n",(0,jsx_runtime.jsx)(dist.$4,{story:"^"}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"css-custom-props-api",children:"CSS Custom Props API"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["| ",(0,jsx_runtime.jsx)(_components.strong,{children:"Name"}),"                  | ",(0,jsx_runtime.jsx)(_components.strong,{children:"Description"}),"                                                                                                      | ",(0,jsx_runtime.jsx)(_components.strong,{children:"Notes"}),"                 |\n| ------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| ",(0,jsx_runtime.jsx)(_components.code,{children:"--icon-color-override"}),"   | Sets an icon color when a design requires an escape hatch from the component's color constrains. Use very sparingly. | Overrides the ",(0,jsx_runtime.jsx)(_components.code,{children:"fill"})," prop |\n| ",(0,jsx_runtime.jsx)(_components.code,{children:"--icon--secondary-color"}),' | Used to create duotone icon by coloring its "punched out" areas                                                      |                           |']}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"icon-library",children:"Icon Library"}),"\n",(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--icon-library"}),"\n",(0,jsx_runtime.jsx)(IconShowcase,{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"variants",children:"Variants"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"By default, icons' fill color is inherited from the color of their parent which\ncreates an appearance that is consistent with the content the icon is paired\nwith."}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["When icons need to distinct themselves from the content, a constrained set of\ncolor variants are offered using the ",(0,jsx_runtime.jsx)(_components.code,{children:"variant"})," prop."]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"neutral",children:"Neutral"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["A color slightly paler than body text (or darker, in dark mode) makes the\n",(0,jsx_runtime.jsx)(_components.code,{children:"neutral"})," variant more distinguished that if it inherited it color from its\nparent, yet commands no special semantics."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--neutral"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"brand",children:"Brand"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The ",(0,jsx_runtime.jsx)(_components.code,{children:"brand"})," variant should be used for icons that should receive special\nattention, yet have no semantic meaning"]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--brand"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"inverse",children:"Inverse"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The inverse version of the ",(0,jsx_runtime.jsx)(_components.code,{children:"neutral"})," variant. For use on dark backgrounds (or\nlight, in dark mode)."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--inverse"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"inverse-brand",children:"Inverse Brand"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The inverse version of the ",(0,jsx_runtime.jsx)(_components.code,{children:"brand"})," variant. For use on dark backgrounds (or\nlight, in dark mode)."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--brand-inverse"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"danger",children:"Danger"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The ",(0,jsx_runtime.jsx)(_components.code,{children:"danger"})," variant should be used in negative or destructive contexts, e.g.,\nin error messages."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--danger"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"success",children:"Success"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The ",(0,jsx_runtime.jsx)(_components.code,{children:"success"})," variant should be used in positive contexts, e.g., when notifying\nthe user a form submission was received."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--success"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"duotone-icons",children:"Duotone Icons"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The punched-out areas of icons can be colored by setting the\n",(0,jsx_runtime.jsx)(_components.code,{children:"--icon--secondary-color"})," CSS custom property."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--duotone-icons"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"escape-hatches",children:"Escape Hatches"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["In the rare cases where an icon needs to be colored in divergence from the\noptions native to the design system, it can be done by setting the\n",(0,jsx_runtime.jsx)(_components.code,{children:"--icon-color-override"})," CSS custom property on the icon or one of its ancestors."]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Any usage of ",(0,jsx_runtime.jsx)(_components.code,{children:"--icon-color-override"})," should be considered a failure of the\ndesign system, and warrants a discussion between design and development, to\nconsider either changing the color, or augmenting the design system with it."]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:[(0,jsx_runtime.jsxs)(_components.strong,{children:["The value of ",(0,jsx_runtime.jsx)(_components.code,{children:"--icon-color-override"})," will override the ",(0,jsx_runtime.jsx)(_components.code,{children:"variant"})," prop"]}),".\nBecause of the inheriting nature of CSS custom properties, make sure to set\n",(0,jsx_runtime.jsx)(_components.code,{children:"--icon-color-override"})," as close as possible to the icon(s) being colored\n(preferably on the icon itself), in order to avoid confusing bugs where it is\nunclear why icons are colored a certain way."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-icon--css-custom-props-overrides"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"size",children:"Size"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Icons are sized relative to the font-size of their parent and will scale as it\nchanges."}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The best way to change an icon's size is by adjusting its ",(0,jsx_runtime.jsx)(_components.code,{children:"font-size"})," using the\n",(0,jsx_runtime.jsx)(_components.code,{children:"styleExtend"})," prop. Take care to only use whole spacing units (with the ",(0,jsx_runtime.jsx)(_components.code,{children:"space"}),"\nmacro) when sizing icons."]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"alignment",children:"Alignment"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"When used next to text, icons should be vertically aligned to the center and not\nto the baseline of their sibling elements."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"interactivity",children:"Interactivity"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Icons are not, in themselves, interactive elements and should not be treated as\nsuch. When needed, interactivity icons should be wrapped by another element,\nsuch as a ",(0,jsx_runtime.jsx)(_components.code,{children:"<Button />"})," that will handle it."]}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"touch-targets",children:"Touch Targets"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["All touch targets for interactive icons need to be ",(0,jsx_runtime.jsx)(_components.code,{children:"44px"})," or larger. Standalone\ninteractive icons can be wrapped with the ",(0,jsx_runtime.jsx)(_components.code,{children:"<ClickArea />"})," component."]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:'Since users will not always understand the meaning of standalone icons, icons\nare best used when combined with accompanying text (e.g., a button with the user\navatar and a "My Account" label).'}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Standalone icons that are not accompanied by text should always have descriptive\ntexts geared towards screen reader users. This can be done using the ",(0,jsx_runtime.jsx)(_components.code,{children:"a11yLabel"}),"\nprop, which in more complex cases, can also be accompanied by the\n",(0,jsx_runtime.jsx)(_components.code,{children:"a11yDescription"})," prop."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"When used to accompany text links, icons should be placed inside the link to\navoid the screen reader announcing the link twice."})]})}const Icon_doc=function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)};var _Overview$parameters,_Overview$parameters2,_IconLibrary$paramete,_IconLibrary$paramete2,_Neutral$parameters,_Neutral$parameters2,_Brand$parameters,_Brand$parameters2,_Inverse$parameters,_Inverse$parameters2,_BrandInverse$paramet,_BrandInverse$paramet2,_Danger$parameters,_Danger$parameters2,_Success$parameters,_Success$parameters2,_DuotoneIcons$paramet,_DuotoneIcons$paramet2,_CssCustomPropsOverri,_CssCustomPropsOverri2;function Icon_stories_ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function Icon_stories_objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?Icon_stories_ownKeys(Object(t),!0).forEach((function(r){(0,defineProperty.Z)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):Icon_stories_ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const Icon_stories_c_inverseBg={backgroundColor:"exdOKt",paddingTop:"jtxNXy",paddingRight:"bMSzLf",paddingBottom:"izetJs",paddingLeft:"iigETV"},meta={component:src_Icon.Z,title:"Atoms/Icon",args:{icon:"heart",inlineStyle:{fontSize:"5rem"},styleExtend:[]},argTypes:{styleExtend:{control:!1,table:{category:"Generic Props"}},inlineStyle:{table:{category:"Generic Props"}},a11yLabel:{control:{type:"text"}},a11yDescription:{control:{type:"text"}},focusable:{control:{type:"boolean"}},ref:{control:!1,description:"`<Icon />` forwards refs to the underlying DOM element in order to expose it to its ascendant components",table:{category:"Element Type",type:{summary:"React.ForwardedRef<SVGSVGElement>"}}},"...restProps":{control:!1,description:"`<Icon />` will pass any additional props as attributes to the underlying svg element, in a typesafe manner",table:{category:"Element Type",type:{summary:void 0}}}},parameters:{docs:{page:Icon_doc}}},backgroundDecorator=function backgroundDecorator(StoryToDecorate,context){const{viewMode,id}=context,waitTime="story"===viewMode?0:500,classes=(0,style9.Z)(Icon_stories_c_inverseBg).split(" ");return setTimeout((()=>{let storyContainer=document.documentElement;if("docs"===viewMode){const storyElement=document.getElementById(`story--${id}`);storyContainer=null==storyElement?void 0:storyElement.closest(".docs-story")}storyContainer&&(storyContainer.style.backgroundColor="",storyContainer.classList.add(...classes))}),waitTime),(0,jsx_runtime.jsx)(StoryToDecorate,{})},Overview=args=>(0,jsx_runtime.jsx)("div",{dir:"ltr",children:(0,jsx_runtime.jsx)(src_Icon.Z,Icon_stories_objectSpread({},args))}),IconLibrary=_args=>(0,jsx_runtime.jsx)("div",{}),Neutral=args=>(0,jsx_runtime.jsx)("div",{dir:"ltr",children:(0,jsx_runtime.jsx)(src_Icon.Z,Icon_stories_objectSpread(Icon_stories_objectSpread({},args),{},{variant:"neutral"}))}),Brand=args=>(0,jsx_runtime.jsx)("div",{dir:"ltr",children:(0,jsx_runtime.jsx)(src_Icon.Z,Icon_stories_objectSpread(Icon_stories_objectSpread({},args),{},{variant:"brand"}))}),Inverse=args=>(0,jsx_runtime.jsx)(src_Icon.Z,Icon_stories_objectSpread(Icon_stories_objectSpread({},args),{},{variant:"inverse"}));Inverse.decorators=[backgroundDecorator,...preview.an];const BrandInverse=args=>(0,jsx_runtime.jsx)(src_Icon.Z,Icon_stories_objectSpread(Icon_stories_objectSpread({},args),{},{variant:"brandInverse"}));BrandInverse.decorators=[backgroundDecorator,...preview.an];const Danger=args=>(0,jsx_runtime.jsx)("div",{dir:"ltr",children:(0,jsx_runtime.jsx)(src_Icon.Z,Icon_stories_objectSpread(Icon_stories_objectSpread({},args),{},{variant:"danger"}))}),Success=args=>(0,jsx_runtime.jsx)("div",{dir:"ltr",children:(0,jsx_runtime.jsx)(src_Icon.Z,Icon_stories_objectSpread(Icon_stories_objectSpread({},args),{},{variant:"success"}))}),DuotoneIcons=args=>(0,jsx_runtime.jsx)("div",{dir:"ltr",children:(0,jsx_runtime.jsx)(src_Icon.Z,Icon_stories_objectSpread(Icon_stories_objectSpread({},args),{},{icon:"heart",variant:"danger",inlineStyle:Icon_stories_objectSpread(Icon_stories_objectSpread({},args.inlineStyle),{},{"--icon--secondary-color":"yellow"})}))}),CssCustomPropsOverrides=args=>(0,jsx_runtime.jsx)("div",{dir:"ltr",children:(0,jsx_runtime.jsx)(src_Icon.Z,Icon_stories_objectSpread(Icon_stories_objectSpread({},args),{},{inlineStyle:Icon_stories_objectSpread(Icon_stories_objectSpread({},args.inlineStyle),{},{"--icon-color-override":"magenta"})}))}),Icon_stories=meta;Overview.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},Overview.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_Overview$parameters=Overview.parameters)||void 0===_Overview$parameters?void 0:_Overview$parameters.docs),{},{source:Icon_stories_objectSpread({originalSource:'args => <div dir="ltr">\n    <Icon {...args} />\n  </div>'},null===(_Overview$parameters2=Overview.parameters)||void 0===_Overview$parameters2||null===(_Overview$parameters2=_Overview$parameters2.docs)||void 0===_Overview$parameters2?void 0:_Overview$parameters2.source)})}),IconLibrary.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},IconLibrary.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_IconLibrary$paramete=IconLibrary.parameters)||void 0===_IconLibrary$paramete?void 0:_IconLibrary$paramete.docs),{},{source:Icon_stories_objectSpread({originalSource:"(_args: unknown) => <div />"},null===(_IconLibrary$paramete2=IconLibrary.parameters)||void 0===_IconLibrary$paramete2||null===(_IconLibrary$paramete2=_IconLibrary$paramete2.docs)||void 0===_IconLibrary$paramete2?void 0:_IconLibrary$paramete2.source)})}),Neutral.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},Neutral.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_Neutral$parameters=Neutral.parameters)||void 0===_Neutral$parameters?void 0:_Neutral$parameters.docs),{},{source:Icon_stories_objectSpread({originalSource:'args => <div dir="ltr">\n    <Icon {...args} variant="neutral" />\n  </div>'},null===(_Neutral$parameters2=Neutral.parameters)||void 0===_Neutral$parameters2||null===(_Neutral$parameters2=_Neutral$parameters2.docs)||void 0===_Neutral$parameters2?void 0:_Neutral$parameters2.source)})}),Brand.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},Brand.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_Brand$parameters=Brand.parameters)||void 0===_Brand$parameters?void 0:_Brand$parameters.docs),{},{source:Icon_stories_objectSpread({originalSource:'args => <div dir="ltr">\n    <Icon {...args} variant="brand" />\n  </div>'},null===(_Brand$parameters2=Brand.parameters)||void 0===_Brand$parameters2||null===(_Brand$parameters2=_Brand$parameters2.docs)||void 0===_Brand$parameters2?void 0:_Brand$parameters2.source)})}),Inverse.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},Inverse.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_Inverse$parameters=Inverse.parameters)||void 0===_Inverse$parameters?void 0:_Inverse$parameters.docs),{},{source:Icon_stories_objectSpread({originalSource:'args => <Icon {...args} variant="inverse" />'},null===(_Inverse$parameters2=Inverse.parameters)||void 0===_Inverse$parameters2||null===(_Inverse$parameters2=_Inverse$parameters2.docs)||void 0===_Inverse$parameters2?void 0:_Inverse$parameters2.source)})}),BrandInverse.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},BrandInverse.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_BrandInverse$paramet=BrandInverse.parameters)||void 0===_BrandInverse$paramet?void 0:_BrandInverse$paramet.docs),{},{source:Icon_stories_objectSpread({originalSource:'args => <Icon {...args} variant="brandInverse" />'},null===(_BrandInverse$paramet2=BrandInverse.parameters)||void 0===_BrandInverse$paramet2||null===(_BrandInverse$paramet2=_BrandInverse$paramet2.docs)||void 0===_BrandInverse$paramet2?void 0:_BrandInverse$paramet2.source)})}),Danger.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},Danger.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_Danger$parameters=Danger.parameters)||void 0===_Danger$parameters?void 0:_Danger$parameters.docs),{},{source:Icon_stories_objectSpread({originalSource:'args => <div dir="ltr">\n    <Icon {...args} variant="danger" />\n  </div>'},null===(_Danger$parameters2=Danger.parameters)||void 0===_Danger$parameters2||null===(_Danger$parameters2=_Danger$parameters2.docs)||void 0===_Danger$parameters2?void 0:_Danger$parameters2.source)})}),Success.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},Success.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_Success$parameters=Success.parameters)||void 0===_Success$parameters?void 0:_Success$parameters.docs),{},{source:Icon_stories_objectSpread({originalSource:'args => <div dir="ltr">\n    <Icon {...args} variant="success" />\n  </div>'},null===(_Success$parameters2=Success.parameters)||void 0===_Success$parameters2||null===(_Success$parameters2=_Success$parameters2.docs)||void 0===_Success$parameters2?void 0:_Success$parameters2.source)})}),DuotoneIcons.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},DuotoneIcons.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_DuotoneIcons$paramet=DuotoneIcons.parameters)||void 0===_DuotoneIcons$paramet?void 0:_DuotoneIcons$paramet.docs),{},{source:Icon_stories_objectSpread({originalSource:'args => <div dir="ltr">\n    <Icon {...args} icon="heart" variant="danger" inlineStyle={{\n    ...args.inlineStyle,\n    \'--icon--secondary-color\': \'yellow\'\n  }} />\n  </div>'},null===(_DuotoneIcons$paramet2=DuotoneIcons.parameters)||void 0===_DuotoneIcons$paramet2||null===(_DuotoneIcons$paramet2=_DuotoneIcons$paramet2.docs)||void 0===_DuotoneIcons$paramet2?void 0:_DuotoneIcons$paramet2.source)})}),CssCustomPropsOverrides.parameters=Icon_stories_objectSpread(Icon_stories_objectSpread({},CssCustomPropsOverrides.parameters),{},{docs:Icon_stories_objectSpread(Icon_stories_objectSpread({},null===(_CssCustomPropsOverri=CssCustomPropsOverrides.parameters)||void 0===_CssCustomPropsOverri?void 0:_CssCustomPropsOverri.docs),{},{source:Icon_stories_objectSpread({originalSource:"args => <div dir=\"ltr\">\n    <Icon {...args} inlineStyle={{\n    ...args.inlineStyle,\n    '--icon-color-override': 'magenta'\n  }} />\n  </div>"},null===(_CssCustomPropsOverri2=CssCustomPropsOverrides.parameters)||void 0===_CssCustomPropsOverri2||null===(_CssCustomPropsOverri2=_CssCustomPropsOverri2.docs)||void 0===_CssCustomPropsOverri2?void 0:_CssCustomPropsOverri2.source)})});try{IconLibrary.displayName="IconLibrary",IconLibrary.__docgenInfo={description:"",displayName:"IconLibrary",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-icon/src/Icon.stories.tsx#IconLibrary"]={docgenInfo:IconLibrary.__docgenInfo,name:"IconLibrary",path:"../../ds-atoms/s-icon/src/Icon.stories.tsx#IconLibrary"})}catch(__react_docgen_typescript_loader_error){}},"../../ds-atoms/s-icon/src/Icon.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../../node_modules/.pnpm/@babel+runtime@7.22.10/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),_home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../../node_modules/.pnpm/@babel+runtime@7.22.10/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../../node_modules/.pnpm/next@13.5.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react/jsx-runtime.js"),_haaretz_s_visually_hidden__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../ds-atoms/s-visually-hidden/src/index.ts"),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../../node_modules/.pnpm/next@13.5.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react/index.js"),style9__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs"),console=__webpack_require__("../../../node_modules/.pnpm/console-browserify@1.2.0/node_modules/console-browserify/index.js");const _excluded=["a11yLabel","a11yDescription","variant","focusable","screenReaderText","icon","inlineStyle","styleExtend"];function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,_home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__.Z)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const c={base:{"--_icn-c":"hmHRXt","--_icn-c2":"hxvpkK",height:"jXmXEB",width:"hHGIsI"},inheritVariant:{"--_icn-dflt-c":"kbMSva"},brandVariant:{"--_icn-dflt-c":"fsJCwT"},brandInverseVariant:{"--_icn-dflt-c":"kgVBQo"},neutralVariant:{"--_icn-dflt-c":"jowrTv"},inverseVariant:{"--_icn-dflt-c":"edhiKO"},dangerVariant:{"--_icn-dflt-c":"iRFORO"},successVariant:{"--_icn-dflt-c":"kEwWGm"}},Icon=react__WEBPACK_IMPORTED_MODULE_2__.forwardRef((function Icon(_ref,ref){let{a11yLabel,a11yDescription,variant="inherit",focusable=!1,screenReaderText,icon,inlineStyle,styleExtend=[]}=_ref,attrs=(0,_home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_ref,_excluded);const hasA11yText=a11yLabel||a11yDescription,descriptionId=react__WEBPACK_IMPORTED_MODULE_2__.useId(),a11yAttrs=hasA11yText?_objectSpread({"aria-label":a11yLabel},a11yDescription?{"aria-describedby":descriptionId}:{}):{"aria-hidden":!0,role:"img"},focusAttrs=focusable&&hasA11yText?{focusable:!0}:{focusable:!1,tabIndex:-1},desc=a11yDescription?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("desc",{id:descriptionId,children:a11yDescription}):null,variantClass=`${variant}Variant`;return!focusable||a11yDescription||a11yLabel||console.error(`An "${icon}" icon is set to be focusable but has no a11y label or description\n`,'The "focusable" attribute will not be assigned'),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("svg",_objectSpread(_objectSpread(_objectSpread(_objectSpread({ref,className:(0,style9__WEBPACK_IMPORTED_MODULE_3__.Z)(c.base,c[variantClass],...styleExtend),style:inlineStyle},focusAttrs),attrs),a11yAttrs),{},{children:[desc,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("use",{xlinkHref:`#icn-${icon}`})]})),screenReaderText?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_haaretz_s_visually_hidden__WEBPACK_IMPORTED_MODULE_5__.ZP,{children:screenReaderText}):null]})}));Icon.__docgenInfo={description:"",methods:[],displayName:"Icon",props:{variant:{defaultValue:{value:"'inherit'",computed:!1},required:!1},focusable:{defaultValue:{value:"false",computed:!1},required:!1},styleExtend:{defaultValue:{value:"[]",computed:!1},required:!1}}};const __WEBPACK_DEFAULT_EXPORT__=Icon;try{Icon.displayName="Icon",Icon.__docgenInfo={description:"",displayName:"Icon",props:{inlineStyle:{defaultValue:null,description:"CSS declarations to be set as inline `style` on the\nhtml element.\n\nBy setting values of CSS Custom Properties based on\nprops or state in the consuming component (where\nthe value of `inlineStyle` is passed), `inlineStyle`\ncan be used as an API contract for setting dynamic\nvalues to styles created with `style9.create()`:\n@example ```ts\nimport s9 from 'style9';\nconst { styleExtend, } = s9.create({\n  styleExtend: {\n    color: 'var(--color-based-on-prop)',\n  },\n});\n\nfunction MyIcon(props) {\n  const inlineStyle = {\n    '--color-based-on-prop': props.color,\n  },\n\n  return (\n   <Icon\n     styleExtend={[ styleExtend, ]}\n     inlineStyle={inlineStyle}\n   />\n  );\n}\n```",name:"inlineStyle",required:!1,type:{name:"InlineStyles | undefined"}},styleExtend:{defaultValue:{value:"[]"},description:"An array of `Style`s created by `style9.create()`.\nWARNING: **_do not_** pass simple CSS-in-JS object.\nThe items in the array must be created with Style9's\n`create` function.\nThe array can also hold falsy values to assist with\nconditional inclusion of `Style`s:\n@example ```ts\nconst { foo, bar, } = s9.create({ foo: { ... }, bar: { ... }, });\n<Icon styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}},icon:{defaultValue:null,description:"The icon to render",name:"icon",required:!0,type:{name:"enum",value:[{value:'"marker"'},{value:'"menu"'},{value:'"search"'},{value:'"play"'},{value:'"audio"'},{value:'"Login"'},{value:'"Logout"'},{value:'"a11y"'},{value:'"alef"'},{value:'"android"'},{value:'"apple"'},{value:'"arrow-right"'},{value:'"audio-ff"'},{value:'"audio-less"'},{value:'"audio-off"'},{value:'"audio-rw"'},{value:'"bell"'},{value:'"bookmark"'},{value:'"camera"'},{value:'"check"'},{value:'"chevron-bottom"'},{value:'"chevron-left"'},{value:'"chevron-right"'},{value:'"close"'},{value:'"comments"'},{value:'"discover"'},{value:'"dislike"'},{value:'"drive"'},{value:'"edit"'},{value:'"facebook"'},{value:'"gift"'},{value:'"hdc"'},{value:'"headphones"'},{value:'"heart"'},{value:'"hide"'},{value:'"home"'},{value:'"htz"'},{value:'"like"'},{value:'"lock"'},{value:'"m"'},{value:'"mail"'},{value:'"microphone"'},{value:'"minus"'},{value:'"most-viewed"'},{value:'"pause"'},{value:'"pdf"'},{value:'"phone"'},{value:'"playlist"'},{value:'"plus"'},{value:'"printer"'},{value:'"rss"'},{value:'"share"'},{value:'"show"'},{value:'"spotify"'},{value:'"star"'},{value:'"twitter"'},{value:'"user"'},{value:'"warn"'},{value:'"whattsup"'},{value:'"zen"'},{value:'"zoom-in"'}]}},variant:{defaultValue:{value:"inherit"},description:"The color of the icon",name:"variant",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"inherit"'},{value:'"brand"'},{value:'"neutral"'},{value:'"danger"'},{value:'"success"'},{value:'"inverse"'},{value:'"brandInverse"'}]}},a11yLabel:{defaultValue:null,description:"An A11Y label for the icon",name:"a11yLabel",required:!1,type:{name:"string | undefined"}},a11yDescription:{defaultValue:null,description:"An A11Y description for the icon",name:"a11yDescription",required:!1,type:{name:"string | undefined"}},focusable:{defaultValue:{value:"false"},description:"Make the icon keyboard accessible",name:"focusable",required:!1,type:{name:"boolean | undefined"}},screenReaderText:{defaultValue:null,description:"Visually hidden text for screen readers",name:"screenReaderText",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-icon/src/Icon.tsx#Icon"]={docgenInfo:Icon.__docgenInfo,name:"Icon",path:"../../ds-atoms/s-icon/src/Icon.tsx#Icon"})}catch(__react_docgen_typescript_loader_error){}},"../../ds-atoms/s-visually-hidden/src/VisuallyHidden.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{H6:()=>_VisuallyHidden,ZP:()=>__WEBPACK_DEFAULT_EXPORT__,pL:()=>DEFAULT_ELEMENT});var _home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../../node_modules/.pnpm/@babel+runtime@7.22.10/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),_home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../../node_modules/.pnpm/@babel+runtime@7.22.10/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../../node_modules/.pnpm/next@13.5.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react/jsx-runtime.js"),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../../node_modules/.pnpm/next@13.5.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react/index.js"),style9__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs");const _excluded=["as","children","inlineStyle","isFocusable","styleExtend"];function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,_home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__.Z)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const classNames={base:{borderTopWidth:"glXlAQ",borderRightWidth:"ejfOAg",borderBottomWidth:"imuUWK",borderLeftWidth:"jePIQM",clip:"beEFvi",clipPath:"dbEoLb",height:"ktUKSC",marginTop:"jTjNVR",marginRight:"dIYdMf",marginBottom:"jjXZbq",marginLeft:"bmFLeF",overflowX:"dUvWpK",overflowY:"hRLVFh",paddingTop:"kVZHcH",paddingRight:"dwawJR",paddingBottom:"iATxZH",paddingLeft:"jQenOz",position:"bEvNbr",width:"JkHvI",whiteSpace:"bwVBMs",wordWrap:"gOKRJN",opacity:"UXrzu"},focusable:{":active":{clip:"kuytCZ",clipPath:"fbPfaP",height:"denmys",marginTop:"jnzTFi",marginRight:"jeOFPx",marginBottom:"eGVclN",marginLeft:"laFZyU",overflowX:"dEHlfP",overflowY:"biNehD",position:"izcesL",width:"fINNBL",whiteSpace:"enUJRt",opacity:"bZiUOO"},":focus":{clip:"ftGVOL",clipPath:"hVQFuO",height:"hivugc",marginTop:"drTIif",marginRight:"ffoFcR",marginBottom:"fZAKYa",marginLeft:"cFSbZy",overflowX:"kGSnZF",overflowY:"kHnbRw",position:"dAAEuD",width:"eckYoa",whiteSpace:"hTDTat",opacity:"hFxcLz"}}},DEFAULT_ELEMENT="span",VisuallyHidden=react__WEBPACK_IMPORTED_MODULE_2__.forwardRef((function VisuallyHidden(_ref,ref){let{as,children=null,inlineStyle,isFocusable,styleExtend=[]}=_ref,attrs=(0,_home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_ref,_excluded);const Element=as||DEFAULT_ELEMENT;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(Element,_objectSpread(_objectSpread({ref,className:(0,style9__WEBPACK_IMPORTED_MODULE_3__.Z)(classNames.base,isFocusable&&classNames.focusable,...styleExtend),style:inlineStyle},attrs),{},{children}))}));VisuallyHidden.__docgenInfo={description:"",methods:[],displayName:"VisuallyHidden",props:{children:{defaultValue:{value:"null",computed:!1},required:!1},styleExtend:{defaultValue:{value:"[]",computed:!1},required:!1}}};const __WEBPACK_DEFAULT_EXPORT__=VisuallyHidden;function _VisuallyHidden(_props){return null}try{_VisuallyHidden.displayName="_VisuallyHidden",_VisuallyHidden.__docgenInfo={description:"",displayName:"_VisuallyHidden",props:{children:{defaultValue:{value:"null"},description:"The content to hide inside `<VisuallyHidden>`",name:"children",required:!1,type:{name:"ReactNode"}},inlineStyle:{defaultValue:null,description:"CSS declarations to be set as inline `style` on the\nhtml element.\n\nBy setting values of CSS Custom Properties based on\nprops or state in the consuming component (where\nthe value of `inlineStyle` is passed), `inlineStyle`\ncan be used as an API contract for setting dynamic\nvalues to styles created with `style9.create()`:\n@example ```ts\nimport s9 from 'style9';\nconst { styleExtend, } = s9.create({\n  styleExtend: {\n    color: 'var(--color-based-on-prop)',\n  },\n});\n\nfunction MyVisuallyHidden(props) {\n  const inlineStyle = {\n    '--color-based-on-prop': props.color,\n  },\n\n  return (\n   <VisuallyHidden\n     styleExtend={[ styleExtend, ]}\n     inlineStyle={inlineStyle}\n   />\n  );\n}\n```",name:"inlineStyle",required:!1,type:{name:"InlineStyles | undefined"}},isFocusable:{defaultValue:null,description:"Should the element become visible when focused, e.g., skip links",name:"isFocusable",required:!1,type:{name:"true | undefined"}},styleExtend:{defaultValue:{value:"[]"},description:"An array of `Style`s created by `style9.create()`.\nWARNING: **_do not_** pass simple CSS-in-JS object.\nThe items in the array must be created with Style9's\n`create` function.\nThe array can also hold falsy values to assist with\nconditional inclusion of `Style`s\n@example ```ts\nconst { foo, bar, } = s9.create({ foo: { ... }, bar: { ... }, });\n<VisuallyHidden styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-visually-hidden/src/VisuallyHidden.tsx#_VisuallyHidden"]={docgenInfo:_VisuallyHidden.__docgenInfo,name:"_VisuallyHidden",path:"../../ds-atoms/s-visually-hidden/src/VisuallyHidden.tsx#_VisuallyHidden"})}catch(__react_docgen_typescript_loader_error){}},"../../ds-atoms/s-visually-hidden/src/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ZP:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__=__webpack_require__("../../ds-atoms/s-visually-hidden/src/VisuallyHidden.tsx").ZP}}]);