HtzLi-stories.627839b7.iframe.bundle.js

"use strict";(self.webpackChunk_haaretz_a_tm_sg=self.webpackChunk_haaretz_a_tm_sg||[]).push([[5579],{"../../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{NF:()=>withMDXComponents,Zo:()=>MDXProvider,ah:()=>useMDXComponents,pC:()=>MDXContext});var react__WEBPACK_IMPORTED_MODULE_0__=__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");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"../../ds-atoms/s-htz-li/src/HtzLi.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Brand:()=>Brand,Circle:()=>Circle,Danger:()=>Danger,Neutral:()=>Neutral,Overview:()=>Overview,Sales:()=>Sales,Success:()=>Success,Triangle:()=>Triangle,default:()=>HtzLi_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"),style9=__webpack_require__("../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs"),src_HtzLi=__webpack_require__("../../ds-atoms/s-htz-li/src/HtzLi.tsx"),lib=(__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"),__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");function _createMdxContent(props){const _components=Object.assign({h1:"h1",h2:"h2",p:"p",strong:"strong",code:"code",pre:"pre",h3:"h3"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(_components.h1,{id:"htzli",children:"HtzLi"}),"\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:"HtzLi"})," in has ",(0,jsx_runtime.jsx)(_components.code,{children:"@haaretz/s-htz-li"})," 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-htz-li": "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:"HtzLi"})," 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 HtzLi from '@haaretz/s-htz-li';\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"overview",children:"Overview"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The HtzLi component is an extension of the HTML ",(0,jsx_runtime.jsx)(_components.code,{children:"<li>"})," element, It must be\ncontained in a parent element: an unordered list ",(0,jsx_runtime.jsx)(_components.code,{children:"<ul>"}),". List items are\ndisplayed using bullet points, and we have the option to use different shapes."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-htzli--overview"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"props",children:"Props"}),"\n",(0,jsx_runtime.jsx)(dist.$4,{story:"^"}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"style-types",children:"Style types"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"The bullet's shape of the list item."}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"circle",children:"circle"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-htzli--circle"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"triangle",children:"triangle"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-htzli--triangle"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"variants",children:"Variants"}),"\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"}),"-colored variant is is the default bullet color, and should be used\nwhen there is devoid of semantic meaning."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-htzli--brand"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"neutral",children:"Neutral"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Like the ",(0,jsx_runtime.jsx)(_components.code,{children:"brand"})," variant, the ",(0,jsx_runtime.jsx)(_components.code,{children:"neutral"})," variant is devoid of semantic meaning,\nand can be used in compositions that are already replete with with color and\nwould suffer from the introduction of additional colorful elements."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-htzli--neutral"})}),"\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 to indicate that an action might be\ndestructive or have negative implications."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-htzli--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 to indicate a positive effect."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-htzli--success"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"sales",children:"Sales"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The ",(0,jsx_runtime.jsx)(_components.code,{children:"sales"})," variant should be used exclusively in the context of promoting\nsubscription purchases."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-htzli--sales"})})]})}const HtzLi_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,_Circle$parameters,_Circle$parameters2,_Triangle$parameters,_Triangle$parameters2,_Brand$parameters,_Brand$parameters2,_Neutral$parameters,_Neutral$parameters2,_Danger$parameters,_Danger$parameters2,_Success$parameters,_Success$parameters2,_Sales$parameters,_Sales$parameters2;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_base={width:"bwdnnK",maxWidth:"eRitUB"},meta={component:src_HtzLi.Z,title:"Atoms/HtzLi",args:{children:"לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה.",inlineStyle:{},styleExtend:[]},argTypes:{styleExtend:{control:!1}},parameters:{docs:{page:HtzLi_doc}}},UlWrapper=_ref=>{let{children}=_ref;return(0,jsx_runtime.jsx)("ul",{className:(0,style9.Z)(c_base),children})},Overview=args=>(0,jsx_runtime.jsxs)(UlWrapper,{children:[(0,jsx_runtime.jsx)(src_HtzLi.Z,_objectSpread({},args)),(0,jsx_runtime.jsx)(src_HtzLi.Z,_objectSpread({},args)),(0,jsx_runtime.jsx)(src_HtzLi.Z,_objectSpread({},args)),(0,jsx_runtime.jsx)(src_HtzLi.Z,_objectSpread({},args)),(0,jsx_runtime.jsx)(src_HtzLi.Z,_objectSpread({},args))]}),Circle=_=>(0,jsx_runtime.jsxs)(UlWrapper,{children:[(0,jsx_runtime.jsx)(src_HtzLi.Z,{styleType:"circle",children:"Circle"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{styleType:"circle",children:"Circle"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{styleType:"circle",children:"Circle"})]}),Triangle=_=>(0,jsx_runtime.jsxs)(UlWrapper,{children:[(0,jsx_runtime.jsx)(src_HtzLi.Z,{styleType:"triangle",children:"Triangle"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{styleType:"triangle",children:"Triangle"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{styleType:"triangle",children:"Triangle"})]}),Brand=_=>(0,jsx_runtime.jsxs)(UlWrapper,{children:[(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"brand",children:"Brand"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"brand",children:"Brand"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"brand",children:"Brand"})]}),Neutral=_=>(0,jsx_runtime.jsxs)(UlWrapper,{children:[(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"neutral",children:"Neutral"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"neutral",children:"Neutral"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"neutral",children:"Neutral"})]}),Danger=_=>(0,jsx_runtime.jsxs)(UlWrapper,{children:[(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"danger",children:"Danger"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"danger",children:"Danger"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"danger",children:"Danger"})]}),Success=_=>(0,jsx_runtime.jsxs)(UlWrapper,{children:[(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"success",children:"Success"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"success",children:"Success"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"success",children:"Success"})]}),Sales=_=>(0,jsx_runtime.jsxs)(UlWrapper,{children:[(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"sales",children:"Sales"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"sales",children:"Sales"}),(0,jsx_runtime.jsx)(src_HtzLi.Z,{variant:"sales",children:"Sales"})]}),HtzLi_stories=meta;Overview.parameters=_objectSpread(_objectSpread({},Overview.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Overview$parameters=Overview.parameters)||void 0===_Overview$parameters?void 0:_Overview$parameters.docs),{},{source:_objectSpread({originalSource:"args => <UlWrapper>\n    <HtzLi {...args} />\n    <HtzLi {...args} />\n    <HtzLi {...args} />\n    <HtzLi {...args} />\n    <HtzLi {...args} />\n  </UlWrapper>"},null===(_Overview$parameters2=Overview.parameters)||void 0===_Overview$parameters2||null===(_Overview$parameters2=_Overview$parameters2.docs)||void 0===_Overview$parameters2?void 0:_Overview$parameters2.source)})}),Circle.parameters=_objectSpread(_objectSpread({},Circle.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Circle$parameters=Circle.parameters)||void 0===_Circle$parameters?void 0:_Circle$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <UlWrapper>\n    <HtzLi styleType="circle">Circle</HtzLi>\n    <HtzLi styleType="circle">Circle</HtzLi>\n    <HtzLi styleType="circle">Circle</HtzLi>\n  </UlWrapper>'},null===(_Circle$parameters2=Circle.parameters)||void 0===_Circle$parameters2||null===(_Circle$parameters2=_Circle$parameters2.docs)||void 0===_Circle$parameters2?void 0:_Circle$parameters2.source)})}),Triangle.parameters=_objectSpread(_objectSpread({},Triangle.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Triangle$parameters=Triangle.parameters)||void 0===_Triangle$parameters?void 0:_Triangle$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <UlWrapper>\n    <HtzLi styleType="triangle">Triangle</HtzLi>\n    <HtzLi styleType="triangle">Triangle</HtzLi>\n    <HtzLi styleType="triangle">Triangle</HtzLi>\n  </UlWrapper>'},null===(_Triangle$parameters2=Triangle.parameters)||void 0===_Triangle$parameters2||null===(_Triangle$parameters2=_Triangle$parameters2.docs)||void 0===_Triangle$parameters2?void 0:_Triangle$parameters2.source)})}),Brand.parameters=_objectSpread(_objectSpread({},Brand.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Brand$parameters=Brand.parameters)||void 0===_Brand$parameters?void 0:_Brand$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <UlWrapper>\n    <HtzLi variant="brand">Brand</HtzLi>\n    <HtzLi variant="brand">Brand</HtzLi>\n    <HtzLi variant="brand">Brand</HtzLi>\n  </UlWrapper>'},null===(_Brand$parameters2=Brand.parameters)||void 0===_Brand$parameters2||null===(_Brand$parameters2=_Brand$parameters2.docs)||void 0===_Brand$parameters2?void 0:_Brand$parameters2.source)})}),Neutral.parameters=_objectSpread(_objectSpread({},Neutral.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Neutral$parameters=Neutral.parameters)||void 0===_Neutral$parameters?void 0:_Neutral$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <UlWrapper>\n    <HtzLi variant="neutral">Neutral</HtzLi>\n    <HtzLi variant="neutral">Neutral</HtzLi>\n    <HtzLi variant="neutral">Neutral</HtzLi>\n  </UlWrapper>'},null===(_Neutral$parameters2=Neutral.parameters)||void 0===_Neutral$parameters2||null===(_Neutral$parameters2=_Neutral$parameters2.docs)||void 0===_Neutral$parameters2?void 0:_Neutral$parameters2.source)})}),Danger.parameters=_objectSpread(_objectSpread({},Danger.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Danger$parameters=Danger.parameters)||void 0===_Danger$parameters?void 0:_Danger$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <UlWrapper>\n    <HtzLi variant="danger">Danger</HtzLi>\n    <HtzLi variant="danger">Danger</HtzLi>\n    <HtzLi variant="danger">Danger</HtzLi>\n  </UlWrapper>'},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=_objectSpread(_objectSpread({},Success.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Success$parameters=Success.parameters)||void 0===_Success$parameters?void 0:_Success$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <UlWrapper>\n    <HtzLi variant="success">Success</HtzLi>\n    <HtzLi variant="success">Success</HtzLi>\n    <HtzLi variant="success">Success</HtzLi>\n  </UlWrapper>'},null===(_Success$parameters2=Success.parameters)||void 0===_Success$parameters2||null===(_Success$parameters2=_Success$parameters2.docs)||void 0===_Success$parameters2?void 0:_Success$parameters2.source)})}),Sales.parameters=_objectSpread(_objectSpread({},Sales.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Sales$parameters=Sales.parameters)||void 0===_Sales$parameters?void 0:_Sales$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <UlWrapper>\n    <HtzLi variant="sales">Sales</HtzLi>\n    <HtzLi variant="sales">Sales</HtzLi>\n    <HtzLi variant="sales">Sales</HtzLi>\n  </UlWrapper>'},null===(_Sales$parameters2=Sales.parameters)||void 0===_Sales$parameters2||null===(_Sales$parameters2=_Sales$parameters2.docs)||void 0===_Sales$parameters2?void 0:_Sales$parameters2.source)})})},"../../ds-atoms/s-htz-li/src/HtzLi.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__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"),style9__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs");const c={base:{listStyleType:"gnqlFF",paddingInlineStart:"hIfrmf",position:"cjScYX","::before":{position:"kvHVCE",insetInlineStart:"gnPqdD",top:"jYPXoJ",content:"dhXOUR",fontSize:"dElDiw",color:"fyqyeZ","@media all and (min-width:64em) and (max-width:101.9375em)":{marginInlineEnd:"cvCPgu"},"@media all and (min-width:102em)":{marginInlineEnd:"eVWFfg"}}},circleStyleType:{"--shape":"hBsTjU","--size":"hMHPlb"},triangleStyleType:{"--shape":"daPjKe","--size":"cnQeDY"},brandVariant:{"--htz-lnk-c":"fXdvYN"},neutralVariant:{"--htz-lnk-c":"ikQboA"},dangerVariant:{"--htz-lnk-c":"loKmYP"},successVariant:{"--htz-lnk-c":"hgnXgH"},salesVariant:{"--htz-lnk-c":"eOqKAR"}},HtzLi=function HtzLi(_ref){let{children=null,styleExtend=[],inlineStyle,variant="brand",styleType="circle"}=_ref;const variantClass=`${variant}Variant`,shape=`${styleType}StyleType`;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("li",{className:(0,style9__WEBPACK_IMPORTED_MODULE_1__.Z)(c.base,c[shape],c[variantClass],...styleExtend),style:inlineStyle,children})},__WEBPACK_DEFAULT_EXPORT__=HtzLi;try{HtzLi.displayName="HtzLi",HtzLi.__docgenInfo={description:"",displayName:"HtzLi",props:{children:{defaultValue:{value:"null"},description:"The Children to be rendered inside `<HtzLi>`, parent must be '<ul>'",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 MyHtzLi(props) {\n  const inlineStyle = {\n    '--color-based-on-prop': props.color,\n  },\n\n  return (\n   <HtzLi\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<HtzLi styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}},styleType:{defaultValue:{value:"circle"},description:"Sets the color of the bullet\n@defaultValue 'circle'",name:"styleType",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"circle"'},{value:'"triangle"'}]}},variant:{defaultValue:{value:"brand"},description:"Sets the color of the bullet\n@defaultValue 'brand'",name:"variant",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"brand"'},{value:'"neutral"'},{value:'"danger"'},{value:'"success"'},{value:'"sales"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-htz-li/src/HtzLi.tsx#HtzLi"]={docgenInfo:HtzLi.__docgenInfo,name:"HtzLi",path:"../../ds-atoms/s-htz-li/src/HtzLi.tsx#HtzLi"})}catch(__react_docgen_typescript_loader_error){}},"../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{function merge(target,source){for(const key in source)"object"==typeof source[key]?target[key]=merge({...target[key]},source[key]):target[key]=source[key];return target}function getValues(obj){const values=[];for(const key in obj){const val=obj[key];"object"==typeof val?values.push(...getValues(val)):values.push(val)}return values}function style9(...styles){return getValues(styles.reduce(merge,{})).join(" ")}__webpack_require__.d(__webpack_exports__,{Z:()=>style9}),style9.create=()=>{throw new Error("style9.create calls should be compiled away")},style9.keyframes=()=>{throw new Error("style9.keyframes calls should be compiled away")}}}]);