Checkbox-stories.fc5dbeee.iframe.bundle.js

"use strict";(self.webpackChunk_haaretz_a_htz_sg=self.webpackChunk_haaretz_a_htz_sg||[]).push([[6878],{"../../../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-checkbox/src/Checkbox.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DisabledIndeterminateState:()=>DisabledIndeterminateState,DisabledOffState:()=>DisabledOffState,DisabledOnState:()=>DisabledOnState,DisabledToggleOffState:()=>DisabledToggleOffState,DisabledToggleOnState:()=>DisabledToggleOnState,IndeterminateState:()=>IndeterminateState,OffState:()=>OffState,OnState:()=>OnState,Overview:()=>Overview,ToggleAppearance:()=>ToggleAppearance,ToggleOffState:()=>ToggleOffState,ToggleOnState:()=>ToggleOnState,default:()=>Checkbox_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"),src_Checkbox=__webpack_require__("../../ds-atoms/s-checkbox/src/Checkbox.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",ol:"ol",li:"li",h3:"h3",h4:"h4",ul:"ul",a:"a",em:"em"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(_components.h1,{id:"checkbox",children:"Checkbox"}),"\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:"Checkbox"})," in has ",(0,jsx_runtime.jsx)(_components.code,{children:"@haaretz/s-checkbox"})," listed\nin its ",(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-checkbox": "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:"Checkbox"})," without listing it as a dependency\nwill work 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 Checkbox from '@haaretz/s-checkbox';\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"overview",children:"Overview"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["An individual checkbox will always represent a binary state of either ",(0,jsx_runtime.jsx)(_components.code,{children:"on"})," or\n",(0,jsx_runtime.jsx)(_components.code,{children:"off"}),". It can also have an ",(0,jsx_runtime.jsx)(_components.code,{children:"indeterminate"})," pseudo-state, but it is considered\n",(0,jsx_runtime.jsx)(_components.code,{children:"off"}),". Checkboxes can can also be assume the appearance of toggle switch, in\nwhich case it cannot be put into the ",(0,jsx_runtime.jsx)(_components.code,{children:"indeterminate"})," pseudo-state."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Checkboxes have two primary use cases:"})}),"\n",(0,jsx_runtime.jsxs)(_components.ol,{children:["\n",(0,jsx_runtime.jsx)(_components.li,{children:"To Allow users to select zero, one or more items from a multiple-choice set."}),"\n",(0,jsx_runtime.jsx)(_components.li,{children:"Turn on a singular option on and off."}),"\n"]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--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.h3,{id:"guidance",children:"Guidance"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Both checkboxes and toggles are well-recognizable UI elements, which users are\nfamiliar with and instinctively know how to use, as long as they are used as\nexpected withing the context of the UI."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"They are also highly scannable, and allow users to detect at a glance whether an\nitem has been selected or not. Therefore, selected items are more visually\nprominent that unselected ones."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"These traits makes it easy for users to compare the state of available options."}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"where-to-use",children:"Where to Use"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Forms:"})," Checkboxes can be used in forms, in modals, or on panels."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Filtering and batch action:"})," Use checkboxes to filter data based on\nmultiple selection in tables, search results, etc."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Terms and conditions:"})," Turning a checkbox on or off can indicate agreement\nand is easy for users to understand."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Lists with sub-selections:"})," In selectable items where there is a parent and\nchild relationship, you can use a parent checkbox to make a bulk selection of\nall list items. Unchecking the parent deselects all of the list items.\nAlternatively, you can select children individually when the parent is not\nselected, which is where the ",(0,jsx_runtime.jsx)(_components.code,{children:"indeterminate"})," state comes in to play."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Immediately applied actions:"})," Consider\n",(0,jsx_runtime.jsx)(_components.a,{href:"#appearance",children:"changing the appearance of the checkbox to toggle switch"})," for\nimmediately applied actions such as settings changes."]}),"\n"]}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"where-not-to-use",children:"Where Not to Use"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsx)(_components.li,{children:"If a user can select only one option from a list, radio buttons should be used\ninstead of checkboxes. Checkboxes allow the user to select multiple items in a\nset whereas radio buttons allow the user to select only one option."}),"\n"]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"appearance",children:"Appearance"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["A checkbox can be visually rendered as a toggle by setting the ",(0,jsx_runtime.jsx)(_components.code,{children:"appearance"})," prop\nto ",(0,jsx_runtime.jsx)(_components.code,{children:"toggle"}),"."]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Toggles should generally only be used for toggling a ",(0,jsx_runtime.jsx)(_components.em,{children:"single"})," item on or off,\nand mostly in situations where activation is instantaneous, e.g., when toggling\ndark mode on and off."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"When enabling multiple options from a list - e.g, marking completed items in a\ntodo list, or when marking something which isn't immediately activate - e.g.,\nagreeing to terms and conditions in a registration from that would then need to\nbe submitted, always stick to traditional checkboxes over toggles."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--toggle-appearance"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"state",children:"State"}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"checked-state",children:"Checked State"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["A checkbox's internal states are visually distinct from each other at a glance,\nand clearly and instinctively indicate to the user whether it is ",(0,jsx_runtime.jsx)(_components.code,{children:"on"}),"\n(",(0,jsx_runtime.jsx)(_components.code,{children:"checked"}),"), ",(0,jsx_runtime.jsx)(_components.code,{children:"off"})," or ",(0,jsx_runtime.jsx)(_components.code,{children:"indeterminate"}),"."]}),"\n",(0,jsx_runtime.jsxs)(dist.Xz,{withToolbar:!0,isColumn:!0,children:[(0,jsx_runtime.jsx)("h4",{children:"Checkboxes"}),(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--off-state"}),(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--indeterminate-state"}),(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--on-state"}),(0,jsx_runtime.jsx)("h4",{children:"Toggles"}),(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--toggle-off-state"}),(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--toggle-on-state"})]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"interactive-state",children:"Interactive State"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Checkboxes and toggles, at any checked state, can also be turned off to user\ninteraction by setting the ",(0,jsx_runtime.jsx)(_components.code,{children:"state"})," prop to ",(0,jsx_runtime.jsx)(_components.code,{children:"disabled"}),"."]}),"\n",(0,jsx_runtime.jsxs)(dist.Xz,{withToolbar:!0,columns:3,children:[(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--disabled-off-state"}),(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--disabled-indeterminate-state"}),(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--disabled-on-state"}),(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--disabled-toggle-off-state"}),(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-checkbox--disabled-toggle-on-state"})]})]})}const Checkbox_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,_ToggleAppearance$par,_ToggleAppearance$par2,_OffState$parameters,_OffState$parameters2,_IndeterminateState$p,_IndeterminateState$p2,_OnState$parameters,_OnState$parameters2,_ToggleOffState$param,_ToggleOffState$param2,_ToggleOnState$parame,_ToggleOnState$parame2,_DisabledOffState$par,_DisabledOffState$par2,_DisabledIndeterminat,_DisabledIndeterminat2,_DisabledOnState$para,_DisabledOnState$para2,_DisabledToggleOffSta,_DisabledToggleOffSta2,_DisabledToggleOnStat,_DisabledToggleOnStat2;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 meta={component:src_Checkbox.ZP,title:"Atoms/Checkbox",args:{children:"אני מאשר/ת את תנאי השימוש",state:"enabled",ref:null,inlineStyle:{},styleExtend:[],indeterminate:void 0},argTypes:{appearance:{description:"Controls whether to render the checkbox in the default appearance or as a toggle switch."},children:{control:"text",description:"The content to render next to the checkbox. Should serve as a label.",table:{category:"Content",type:{summary:"React.ReactNode"}}},checked:{control:"boolean",table:{category:"State"}},indeterminate:{control:"boolean",table:{category:"State"}},state:{table:{category:"State"}},styleExtend:{control:!1,table:{category:"Generic Props"}},inlineStyle:{table:{category:"Generic Props"}},ref:{control:!1,description:"`<Checkbox />` forwards refs to the underlying DOM element in order to expose it to its ascendant components.",table:{category:"Pass-on Props",type:{summary:"React.ForwardedRef<HTMLInputElement>"}}},"...restProps":{control:!1,description:"`<Checkbox />` will pass any additional prop to the underlying `input` element.",table:{category:"Pass-on Props",type:{summary:void 0}}}},parameters:{docs:{page:Checkbox_doc}}},Overview=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread({},args)),ToggleAppearance=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{appearance:"toggle"})),OffState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread({},args));OffState.args={children:"כבוי"};const IndeterminateState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{appearance:"checkbox",indeterminate:!0}));IndeterminateState.args={children:"מצב ביניים"};const OnState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{checked:!0}));OnState.args={children:"פעיל"};const ToggleOffState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{appearance:"toggle"}));ToggleOffState.args={children:"טוגל כבוי"};const ToggleOnState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{appearance:"toggle",checked:!0}));ToggleOnState.args={children:"טוגל פעיל"};const DisabledOffState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{state:"disabled"})),DisabledIndeterminateState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{indeterminate:!0,state:"disabled",appearance:"checkbox"})),DisabledOnState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{checked:!0,state:"disabled"})),DisabledToggleOffState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{checked:!1,state:"disabled",appearance:"toggle"})),DisabledToggleOnState=args=>(0,jsx_runtime.jsx)(src_Checkbox.ZP,_objectSpread(_objectSpread({},args),{},{checked:!0,state:"disabled",appearance:"toggle"})),Checkbox_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 => <Checkbox {...args} />"},null===(_Overview$parameters2=Overview.parameters)||void 0===_Overview$parameters2||null===(_Overview$parameters2=_Overview$parameters2.docs)||void 0===_Overview$parameters2?void 0:_Overview$parameters2.source)})}),ToggleAppearance.parameters=_objectSpread(_objectSpread({},ToggleAppearance.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_ToggleAppearance$par=ToggleAppearance.parameters)||void 0===_ToggleAppearance$par?void 0:_ToggleAppearance$par.docs),{},{source:_objectSpread({originalSource:'args => <Checkbox {...args} appearance="toggle" />'},null===(_ToggleAppearance$par2=ToggleAppearance.parameters)||void 0===_ToggleAppearance$par2||null===(_ToggleAppearance$par2=_ToggleAppearance$par2.docs)||void 0===_ToggleAppearance$par2?void 0:_ToggleAppearance$par2.source)})}),OffState.parameters=_objectSpread(_objectSpread({},OffState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_OffState$parameters=OffState.parameters)||void 0===_OffState$parameters?void 0:_OffState$parameters.docs),{},{source:_objectSpread({originalSource:"args => <Checkbox {...args} />"},null===(_OffState$parameters2=OffState.parameters)||void 0===_OffState$parameters2||null===(_OffState$parameters2=_OffState$parameters2.docs)||void 0===_OffState$parameters2?void 0:_OffState$parameters2.source)})}),IndeterminateState.parameters=_objectSpread(_objectSpread({},IndeterminateState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_IndeterminateState$p=IndeterminateState.parameters)||void 0===_IndeterminateState$p?void 0:_IndeterminateState$p.docs),{},{source:_objectSpread({originalSource:'args => <Checkbox {...args} appearance="checkbox" indeterminate />'},null===(_IndeterminateState$p2=IndeterminateState.parameters)||void 0===_IndeterminateState$p2||null===(_IndeterminateState$p2=_IndeterminateState$p2.docs)||void 0===_IndeterminateState$p2?void 0:_IndeterminateState$p2.source)})}),OnState.parameters=_objectSpread(_objectSpread({},OnState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_OnState$parameters=OnState.parameters)||void 0===_OnState$parameters?void 0:_OnState$parameters.docs),{},{source:_objectSpread({originalSource:"args => <Checkbox {...args} checked={true} />"},null===(_OnState$parameters2=OnState.parameters)||void 0===_OnState$parameters2||null===(_OnState$parameters2=_OnState$parameters2.docs)||void 0===_OnState$parameters2?void 0:_OnState$parameters2.source)})}),ToggleOffState.parameters=_objectSpread(_objectSpread({},ToggleOffState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_ToggleOffState$param=ToggleOffState.parameters)||void 0===_ToggleOffState$param?void 0:_ToggleOffState$param.docs),{},{source:_objectSpread({originalSource:'args => <Checkbox {...args} appearance="toggle" />'},null===(_ToggleOffState$param2=ToggleOffState.parameters)||void 0===_ToggleOffState$param2||null===(_ToggleOffState$param2=_ToggleOffState$param2.docs)||void 0===_ToggleOffState$param2?void 0:_ToggleOffState$param2.source)})}),ToggleOnState.parameters=_objectSpread(_objectSpread({},ToggleOnState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_ToggleOnState$parame=ToggleOnState.parameters)||void 0===_ToggleOnState$parame?void 0:_ToggleOnState$parame.docs),{},{source:_objectSpread({originalSource:'args => <Checkbox {...args} appearance="toggle" checked={true} />'},null===(_ToggleOnState$parame2=ToggleOnState.parameters)||void 0===_ToggleOnState$parame2||null===(_ToggleOnState$parame2=_ToggleOnState$parame2.docs)||void 0===_ToggleOnState$parame2?void 0:_ToggleOnState$parame2.source)})}),DisabledOffState.parameters=_objectSpread(_objectSpread({},DisabledOffState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DisabledOffState$par=DisabledOffState.parameters)||void 0===_DisabledOffState$par?void 0:_DisabledOffState$par.docs),{},{source:_objectSpread({originalSource:'args => <Checkbox {...args} state="disabled" />'},null===(_DisabledOffState$par2=DisabledOffState.parameters)||void 0===_DisabledOffState$par2||null===(_DisabledOffState$par2=_DisabledOffState$par2.docs)||void 0===_DisabledOffState$par2?void 0:_DisabledOffState$par2.source)})}),DisabledIndeterminateState.parameters=_objectSpread(_objectSpread({},DisabledIndeterminateState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DisabledIndeterminat=DisabledIndeterminateState.parameters)||void 0===_DisabledIndeterminat?void 0:_DisabledIndeterminat.docs),{},{source:_objectSpread({originalSource:'args => <Checkbox {...args} indeterminate={true} state="disabled" appearance="checkbox" />'},null===(_DisabledIndeterminat2=DisabledIndeterminateState.parameters)||void 0===_DisabledIndeterminat2||null===(_DisabledIndeterminat2=_DisabledIndeterminat2.docs)||void 0===_DisabledIndeterminat2?void 0:_DisabledIndeterminat2.source)})}),DisabledOnState.parameters=_objectSpread(_objectSpread({},DisabledOnState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DisabledOnState$para=DisabledOnState.parameters)||void 0===_DisabledOnState$para?void 0:_DisabledOnState$para.docs),{},{source:_objectSpread({originalSource:'args => <Checkbox {...args} checked={true} state="disabled" />'},null===(_DisabledOnState$para2=DisabledOnState.parameters)||void 0===_DisabledOnState$para2||null===(_DisabledOnState$para2=_DisabledOnState$para2.docs)||void 0===_DisabledOnState$para2?void 0:_DisabledOnState$para2.source)})}),DisabledToggleOffState.parameters=_objectSpread(_objectSpread({},DisabledToggleOffState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DisabledToggleOffSta=DisabledToggleOffState.parameters)||void 0===_DisabledToggleOffSta?void 0:_DisabledToggleOffSta.docs),{},{source:_objectSpread({originalSource:'args => <Checkbox {...args} checked={false} state="disabled" appearance="toggle" />'},null===(_DisabledToggleOffSta2=DisabledToggleOffState.parameters)||void 0===_DisabledToggleOffSta2||null===(_DisabledToggleOffSta2=_DisabledToggleOffSta2.docs)||void 0===_DisabledToggleOffSta2?void 0:_DisabledToggleOffSta2.source)})}),DisabledToggleOnState.parameters=_objectSpread(_objectSpread({},DisabledToggleOnState.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DisabledToggleOnStat=DisabledToggleOnState.parameters)||void 0===_DisabledToggleOnStat?void 0:_DisabledToggleOnStat.docs),{},{source:_objectSpread({originalSource:'args => <Checkbox {...args} checked={true} state="disabled" appearance="toggle" />'},null===(_DisabledToggleOnStat2=DisabledToggleOnState.parameters)||void 0===_DisabledToggleOnStat2||null===(_DisabledToggleOnStat2=_DisabledToggleOnStat2.docs)||void 0===_DisabledToggleOnStat2?void 0:_DisabledToggleOnStat2.source)})})},"../../ds-atoms/s-checkbox/src/Checkbox.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ZP:()=>__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_icon__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../ds-atoms/s-icon/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");const _excluded=["children","inlineStyle","inputRef","styleExtend","state"],_excluded2=["id","children","styleExtend"],_excluded3=["checked","indeterminate","labelledBy","onChange","state"],_excluded4=["checked","labelledBy","state","onChange"],_excluded5=["inlineStyle","checked","children","styleExtend","labelStyleExtend","state","appearance","errorText"];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={wrapper:{alignItems:"UXrF",columnGap:"haEjPJ",cursor:"jsvbrX",display:"gSBWlu",position:"cjScYX",":hover":{"--bgc":"fzoiaU"},":focus-within":{"--bgc":"bbwlVK","--outline-wdth":"dUxYfZ","--outline-offst":"jHGNYW"}},input:{pointerEvents:"eDssNQ",touchAction:"eAoQVk",height:"edsxqC",opacity:"UXrzu",position:"bEvNbr",width:"lksDzB"},iconWrapper:{aspectRatio:"eUirwo",animationDirection:"cDbPWT",animationDuration:"kutyqb",animationTimingFunction:"jHFOea",backgroundColor:"hYzRbx",borderTopLeftRadius:"gQJVfF",borderTopRightRadius:"bnguzQ",borderBottomRightRadius:"fBfCSu",borderBottomLeftRadius:"bzskLL",flexGrow:"bcjLCN",flexShrink:"hriXhD",outlineColor:"gTHOLO",outlineOffset:"gNTabI",outlineStyle:"gcyyum",outlineWidth:"bJaMpz",overflowX:"dUvWpK",overflowY:"hRLVFh",position:"cjScYX",transform:"bomRby",transitionDuration:"gfbbeE",transitionProperty:"brlMGR",transitionTimingFunction:"iaemGh",width:"bTRldR",borderBottomColor:"HruPG",borderBottomStyle:"hpBjJb",borderBottomWidth:"ctibpX",paddingBottom:"eejUxl",borderInlineEndColor:"kLbdKx",borderInlineEndStyle:"hszzXi",borderInlineEndWidth:"bTnXNj",paddingInlineEnd:"cfEHVR",borderInlineStartColor:"kQqHuw",borderInlineStartStyle:"itlHSH",borderInlineStartWidth:"hXXzlB",paddingInlineStart:"kQDwxQ",borderTopColor:"iSDUms",borderTopStyle:"FwRrA",borderTopWidth:"izykGz",paddingTop:"bdXHYu","@media all and (min-width:80em)":{width:"dFXptg",transform:"kNxdej"},"::after":{content:"fqXcHQ",position:"dyMCpl",borderTopLeftRadius:"egXUdk",borderTopRightRadius:"jEBaki",borderBottomRightRadius:"hhujTk",borderBottomLeftRadius:"gIrsMR",height:"icgjhN",width:"eQIpIg",top:"dcXKhu",left:"eAtoVx",animationDuration:"bqTaPC",animationDirection:"cgkoDA",animationTimingFunction:"cfqwSZ"}},iconWrapperShow:{animationName:"fsoalw","::after":{backgroundColor:"evCPOd",content:"fqXcHQ",transform:"fXEFWd",animationName:"gSLJoa"}},iconWrapperHide:{animationName:"faINfC","::after":{backgroundColor:"feRPlP",transform:"dBEGOL",animationName:"fFJoFJ"}},iconWrapperChecked:{backgroundColor:"fIcjCT"},icon:{animationDirection:"cDbPWT",animationDuration:"kutyqb",animationTimingFunction:"jHFOea",borderTopLeftRadius:"gQJVfF",borderTopRightRadius:"bnguzQ",borderBottomRightRadius:"fBfCSu",borderBottomLeftRadius:"bzskLL",color:"kAWnRk",left:"gpkvrq",pointerEvents:"eDssNQ",position:"bEvNbr",top:"gWNFme",transform:"pgDyb",visibility:"dWytAe",zIndex:"ljRbsE",fontSize:"gVscJz",lineHeight:"kvNqZl","@media all and (min-width:102em)":{fontSize:"boPXgS",lineHeight:"bnVOLt"}},iconChecked:{visibility:"esoNju"},iconShow:{animationName:"enOfS"},iconHide:{animationName:"gVSSVO"},disabled:{cursor:"kFEjTq",opacity:"iItPPl"},label:{color:"kCxIXX",fontSize:"gVscJz",lineHeight:"kvNqZl","@media all and (min-width:102em)":{fontSize:"hyhpVP",lineHeight:"kRmCJO"}},toggle:{"--width":"bOxbDD",height:"jbsTrU",backgroundColor:"ckMgaR",borderTopLeftRadius:"jWjrEQ",borderTopRightRadius:"eKtERL",borderBottomRightRadius:"BRobm",borderBottomLeftRadius:"iovjFN",outlineColor:"gTHOLO",outlineOffset:"gNTabI",outlineStyle:"gcyyum",outlineWidth:"bJaMpz",position:"cjScYX",transform:"bomRby",transitionDuration:"fzcltM",transitionProperty:"brlMGR",transitionTimingFunction:"iaemGh",width:"claTSo","@media all and (min-width:80em)":{"--width":"jsjgQH",transform:"kNxdej"},"::after":{aspectRatio:"YxqGG",content:"fqXcHQ",backgroundColor:"evCPOd",position:"dyMCpl",borderTopLeftRadius:"iZcnBH",borderTopRightRadius:"glXHhV",borderBottomRightRadius:"kQHMoA",borderBottomLeftRadius:"goPOai",height:"fiybOz",transform:"hMKtoM",top:"dXSlMo",transitionProperty:"Za_dny",transitionDuration:"enlUTT",transitionTimingFunction:"fkNSWz"}},toggleChecked:{backgroundColor:"fIcjCT","::after":{transform:"eHQyf",backgroundColor:"ePIri"}},error:{color:"flyuuT",fontSize:"gVscJz",lineHeight:"kvNqZl","@media all and (min-width:102em)":{fontSize:"hyhpVP",lineHeight:"kRmCJO"}}},CheckboxWrapper=react__WEBPACK_IMPORTED_MODULE_2__.forwardRef((function CheckboxWrapper(_ref,ref){let{children,inlineStyle,inputRef,styleExtend=[],state="enabled"}=_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 isDisabled="disabled"===state;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("label",_objectSpread(_objectSpread({},attrs),{},{className:(0,style9__WEBPACK_IMPORTED_MODULE_3__.Z)(c.wrapper,isDisabled&&c.disabled,...styleExtend),style:inlineStyle,ref,"data-testid":"checkbox-label",children}))})),CheckboxText=react__WEBPACK_IMPORTED_MODULE_2__.forwardRef((function CheckboxText(_ref2,ref){let{id,children,styleExtend=[]}=_ref2,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)(_ref2,_excluded2);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",_objectSpread(_objectSpread({},attrs),{},{className:(0,style9__WEBPACK_IMPORTED_MODULE_3__.Z)(c.label,...styleExtend),id,ref,children}))})),FauxCheckbox=react__WEBPACK_IMPORTED_MODULE_2__.forwardRef((function FauxCheckbox(_ref3,ref){let{checked,indeterminate,labelledBy,onChange:onChangeProp,state="enabled"}=_ref3,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)(_ref3,_excluded3);const wasChecked=react__WEBPACK_IMPORTED_MODULE_2__.useRef(checked),_inputRef=react__WEBPACK_IMPORTED_MODULE_2__.useRef(null),inputRef=null!=ref?ref:_inputRef,[isIndeterminate,setIsIndeterminate]=react__WEBPACK_IMPORTED_MODULE_2__.useState(indeterminate),{attrsOverride,isChecked,isDisabled,onChange}=useCheckbox(checked,labelledBy,onChangeProp,state,setIsIndeterminate),checkedChanged=wasChecked.current!==isChecked;return wasChecked.current=isChecked,react__WEBPACK_IMPORTED_MODULE_2__.useEffect((()=>{"current"in inputRef&&inputRef.current&&(inputRef.current.indeterminate=!!indeterminate),setIsIndeterminate(indeterminate)}),[indeterminate,inputRef]),react__WEBPACK_IMPORTED_MODULE_2__.useEffect((()=>{"current"in inputRef&&inputRef.current&&null!=isIndeterminate&&(inputRef.current.indeterminate=isIndeterminate)}),[isIndeterminate,isChecked,inputRef]),(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__.jsx)("input",_objectSpread(_objectSpread(_objectSpread({},attrs),attrsOverride),{},{className:(0,style9__WEBPACK_IMPORTED_MODULE_3__.Z)(c.input),checked:isChecked,disabled:isDisabled,onChange,ref:inputRef})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{"aria-hidden":"true",className:(0,style9__WEBPACK_IMPORTED_MODULE_3__.Z)(c.iconWrapper,(isChecked||isIndeterminate)&&c.iconWrapperChecked,checkedChanged&&(isChecked||isIndeterminate)&&c.iconWrapperShow,checkedChanged&&!(isChecked||isIndeterminate)&&c.iconWrapperHide),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_haaretz_s_icon__WEBPACK_IMPORTED_MODULE_5__.Z,{icon:isIndeterminate?"minus":"check",styleExtend:[c.icon,(isChecked||isIndeterminate)&&c.iconChecked,checkedChanged&&(isChecked||isIndeterminate)&&c.iconShow,checkedChanged&&!(isChecked||isIndeterminate)&&c.iconHide]})})]})})),Toggle=react__WEBPACK_IMPORTED_MODULE_2__.forwardRef((function Toggle(_ref4,ref){let{checked,labelledBy,state="enabled",onChange:onChangeProp}=_ref4,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)(_ref4,_excluded4);const{attrsOverride,isChecked,isDisabled,onChange}=useCheckbox(checked,labelledBy,onChangeProp,state);return attrs.indeterminate&&delete attrs.indeterminate,(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__.jsx)("input",_objectSpread(_objectSpread(_objectSpread({},attrs),attrsOverride),{},{className:(0,style9__WEBPACK_IMPORTED_MODULE_3__.Z)(c.input),checked:isChecked,disabled:isDisabled,onChange,ref})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{"aria-hidden":"true",className:(0,style9__WEBPACK_IMPORTED_MODULE_3__.Z)(c.toggle,isChecked&&c.toggleChecked)})]})})),Checkbox=react__WEBPACK_IMPORTED_MODULE_2__.forwardRef((function Checkbox(_ref5,ref){let{inlineStyle,checked=!1,children,styleExtend=[],labelStyleExtend,state="enabled",appearance,errorText}=_ref5,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)(_ref5,_excluded5);const checkboxId=react__WEBPACK_IMPORTED_MODULE_2__.useId(),labelId=react__WEBPACK_IMPORTED_MODULE_2__.useId(),inputRef=react__WEBPACK_IMPORTED_MODULE_2__.useRef(null),[validationState,setValidationState]=react__WEBPACK_IMPORTED_MODULE_2__.useState("default");return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(CheckboxWrapper,{style:inlineStyle,styleExtend,inputRef:ref||inputRef,state,children:["toggle"===appearance?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(Toggle,_objectSpread(_objectSpread({},attrs),{},{checked,id:checkboxId,labelledBy:labelId,state,ref:ref||inputRef})):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(FauxCheckbox,_objectSpread(_objectSpread({},attrs),{},{onChange:event=>{errorText&&"default"!==validationState&&setValidationState("default"),"function"==typeof attrs.onChange&&attrs.onChange(event)},onInvalid:event=>{errorText&&setValidationState("invalid"),"function"==typeof attrs.onInvalid&&attrs.onInvalid(event)},checked,id:checkboxId,labelledBy:labelId,state,ref:ref||inputRef})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(CheckboxText,{styleExtend:labelStyleExtend,id:labelId,children:[children,errorText&&"invalid"===validationState?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{className:(0,style9__WEBPACK_IMPORTED_MODULE_3__.Z)(c.error),children:errorText}):null]})]})}));Checkbox.__docgenInfo={description:"",methods:[],displayName:"Checkbox",props:{checked:{defaultValue:{value:"false",computed:!1},required:!1},styleExtend:{defaultValue:{value:"[]",computed:!1},required:!1},state:{defaultValue:{value:"'enabled'",computed:!1},required:!1}}};const __WEBPACK_DEFAULT_EXPORT__=Checkbox;function useCheckbox(checked,labelledBy,onChangeProp,state,setIsIndeterminate){const[isChecked,setIsChecked]=react__WEBPACK_IMPORTED_MODULE_2__.useState(checked),isDisabled="disabled"===state,attrsOverride=function getAttrsOverride(_ref6){let{labelledBy}=_ref6;const attrsOverride={type:"checkbox"};return labelledBy&&(attrsOverride["aria-labelledby"]=labelledBy),attrsOverride}({labelledBy});return react__WEBPACK_IMPORTED_MODULE_2__.useEffect((()=>{setIsChecked(checked)}),[checked]),{attrsOverride,isChecked,isDisabled,onChange:function onChange(evt){evt.target.checked=!isChecked,setIsChecked(evt.target.checked),setIsIndeterminate&&setIsIndeterminate(!1),onChangeProp&&onChangeProp(evt)}}}CheckboxWrapper.__docgenInfo={description:"",methods:[],displayName:"CheckboxWrapper",props:{styleExtend:{defaultValue:{value:"[]",computed:!1},required:!1},state:{defaultValue:{value:"'enabled'",computed:!1},required:!1}}},CheckboxText.__docgenInfo={description:"",methods:[],displayName:"CheckboxText",props:{styleExtend:{defaultValue:{value:"[]",computed:!1},required:!1}}},FauxCheckbox.__docgenInfo={description:"",methods:[],displayName:"FauxCheckbox",props:{state:{defaultValue:{value:"'enabled'",computed:!1},required:!1}}},Toggle.__docgenInfo={description:"",methods:[],displayName:"Toggle",props:{state:{defaultValue:{value:"'enabled'",computed:!1},required:!1}}};try{CheckboxWrapper.displayName="CheckboxWrapper",CheckboxWrapper.__docgenInfo={description:"",displayName:"CheckboxWrapper",props:{inputRef:{defaultValue:null,description:"A refference to the `input` element that is rendered inside the wrapper.",name:"inputRef",required:!0,type:{name:"ForwardedRef<HTMLInputElement>"}},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 MyCheckbox(props) {\n  const inlineStyle = {\n    '--color-based-on-prop': props.color,\n  },\n\n  return (\n   <Checkbox\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<Checkbox styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}},labelStyleExtend:{defaultValue:null,description:"Same as styledExtend, but for the label of the checkbox.",name:"labelStyleExtend",required:!1,type:{name:"StyleExtend | undefined"}},state:{defaultValue:{value:"enabled"},description:"The functional state of the component.\n@defaultValue 'enabled'",name:"state",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"disabled"'},{value:'"enabled"'}]}},errorText:{defaultValue:null,description:"",name:"errorText",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-checkbox/src/Checkbox.tsx#CheckboxWrapper"]={docgenInfo:CheckboxWrapper.__docgenInfo,name:"CheckboxWrapper",path:"../../ds-atoms/s-checkbox/src/Checkbox.tsx#CheckboxWrapper"})}catch(__react_docgen_typescript_loader_error){}try{CheckboxText.displayName="CheckboxText",CheckboxText.__docgenInfo={description:"",displayName:"CheckboxText",props:{id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},styleExtend:{defaultValue:{value:"[]"},description:"",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-checkbox/src/Checkbox.tsx#CheckboxText"]={docgenInfo:CheckboxText.__docgenInfo,name:"CheckboxText",path:"../../ds-atoms/s-checkbox/src/Checkbox.tsx#CheckboxText"})}catch(__react_docgen_typescript_loader_error){}try{FauxCheckbox.displayName="FauxCheckbox",FauxCheckbox.__docgenInfo={description:"",displayName:"FauxCheckbox",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 MyCheckbox(props) {\n  const inlineStyle = {\n    '--color-based-on-prop': props.color,\n  },\n\n  return (\n   <Checkbox\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<Checkbox styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}},labelStyleExtend:{defaultValue:null,description:"Same as styledExtend, but for the label of the checkbox.",name:"labelStyleExtend",required:!1,type:{name:"StyleExtend | undefined"}},state:{defaultValue:{value:"enabled"},description:"The functional state of the component.\n@defaultValue 'enabled'",name:"state",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"disabled"'},{value:'"enabled"'}]}},errorText:{defaultValue:null,description:"",name:"errorText",required:!1,type:{name:"string | undefined"}},labelledBy:{defaultValue:null,description:"An ID of the element describing the checkbox or toggle",name:"labelledBy",required:!1,type:{name:"string | undefined"}},indeterminate:{defaultValue:null,description:"Set the checkbox to an indeterminate state.",name:"indeterminate",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-checkbox/src/Checkbox.tsx#FauxCheckbox"]={docgenInfo:FauxCheckbox.__docgenInfo,name:"FauxCheckbox",path:"../../ds-atoms/s-checkbox/src/Checkbox.tsx#FauxCheckbox"})}catch(__react_docgen_typescript_loader_error){}try{Toggle.displayName="Toggle",Toggle.__docgenInfo={description:"",displayName:"Toggle",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 MyCheckbox(props) {\n  const inlineStyle = {\n    '--color-based-on-prop': props.color,\n  },\n\n  return (\n   <Checkbox\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<Checkbox styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}},labelStyleExtend:{defaultValue:null,description:"Same as styledExtend, but for the label of the checkbox.",name:"labelStyleExtend",required:!1,type:{name:"StyleExtend | undefined"}},state:{defaultValue:{value:"enabled"},description:"The functional state of the component.\n@defaultValue 'enabled'",name:"state",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"disabled"'},{value:'"enabled"'}]}},errorText:{defaultValue:null,description:"",name:"errorText",required:!1,type:{name:"string | undefined"}},labelledBy:{defaultValue:null,description:"An ID of the element describing the checkbox or toggle",name:"labelledBy",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-checkbox/src/Checkbox.tsx#Toggle"]={docgenInfo:Toggle.__docgenInfo,name:"Toggle",path:"../../ds-atoms/s-checkbox/src/Checkbox.tsx#Toggle"})}catch(__react_docgen_typescript_loader_error){}try{Checkbox.displayName="Checkbox",Checkbox.__docgenInfo={description:"",displayName:"Checkbox",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 MyCheckbox(props) {\n  const inlineStyle = {\n    '--color-based-on-prop': props.color,\n  },\n\n  return (\n   <Checkbox\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<Checkbox styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}},labelStyleExtend:{defaultValue:null,description:"Same as styledExtend, but for the label of the checkbox.",name:"labelStyleExtend",required:!1,type:{name:"StyleExtend | undefined"}},state:{defaultValue:{value:"enabled"},description:"The functional state of the component.\n@defaultValue 'enabled'",name:"state",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"disabled"'},{value:'"enabled"'}]}},errorText:{defaultValue:null,description:"",name:"errorText",required:!1,type:{name:"string | undefined"}},checked:{defaultValue:{value:"false"},description:"Set the `checked` state of the checkbox or toggle.\n@defaultValue false",name:"checked",required:!1,type:{name:"boolean | undefined"}},appearance:{defaultValue:null,description:"",name:"appearance",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"checkbox"'},{value:'"toggle"'}]}},indeterminate:{defaultValue:null,description:"Set the checkbox to an indeterminate state.",name:"indeterminate",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-atoms/s-checkbox/src/Checkbox.tsx#Checkbox"]={docgenInfo:Checkbox.__docgenInfo,name:"Checkbox",path:"../../ds-atoms/s-checkbox/src/Checkbox.tsx#Checkbox"})}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-icon/src/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__=__webpack_require__("../../ds-atoms/s-icon/src/Icon.tsx").Z},"../../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},"../../../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")}}}]);