Button-stories.97bf0fe4.iframe.bundle.js

"use strict";(self.webpackChunk_haaretz_a_tm_sg=self.webpackChunk_haaretz_a_tm_sg||[]).push([[6463],{"../../../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-button/src/Button.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{BrandPrimary:()=>BrandPrimary,BrandSecondary:()=>BrandSecondary,BrandTertiary:()=>BrandTertiary,BusyPrimary:()=>BusyPrimary,BusySecondary:()=>BusySecondary,BusyTertiary:()=>BusyTertiary,DangerPrimary:()=>DangerPrimary,DangerSecondary:()=>DangerSecondary,DangerTertiary:()=>DangerTertiary,DisabledPrimary:()=>DisabledPrimary,DisabledSecondary:()=>DisabledSecondary,DisabledTertiary:()=>DisabledTertiary,FullWidth:()=>FullWidth,IconAtTheEnd:()=>IconAtTheEnd,IconAtTheStart:()=>IconAtTheStart,Large:()=>Large,NeutralPrimary:()=>NeutralPrimary,NeutralSecondary:()=>NeutralSecondary,NeutralTertiary:()=>NeutralTertiary,Overview:()=>Overview,Primary:()=>Primary,Regular:()=>Regular,SalesPrimary:()=>SalesPrimary,Secondary:()=>Secondary,SharpAll:()=>SharpAll,SharpBottom:()=>SharpBottom,SharpEnd:()=>SharpEnd,SharpStart:()=>SharpStart,SharpTop:()=>SharpTop,Small:()=>Small,SuccessPrimary:()=>SuccessPrimary,SuccessSecondary:()=>SuccessSecondary,SuccessTertiary:()=>SuccessTertiary,Tertiary:()=>Tertiary,default:()=>Button_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_Button=__webpack_require__("../../ds-atoms/s-button/src/Button.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")),src=__webpack_require__("../s-story-callout/src/index.ts"),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"),blocks_dist=__webpack_require__("../../../node_modules/.pnpm/@storybook+blocks@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/blocks/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:"button",children:"Button"}),"\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:"Button"})," in has ",(0,jsx_runtime.jsx)(_components.code,{children:"@haaretz/s-button"})," listed in\nits ",(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-button": "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:"Button"})," 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 Button from '@haaretz/s-button';\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"overview",children:"Overview"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Buttons are clickable elements that are used to trigger actions. They\ncommunicate calls to action to the user and allow users to interact with an\napplication. Button labels should be written in the imperative mood, and in\nclear and expressive language, in order to avoid confusion and convey what\naction will occur when the user interacts with it."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Since buttons are a foundational element of any UI system and are essential to\nconvey a notion of actionability and interactivity to the user, They must be\ncustomizable enough to cover all valid use cases within the design system UI,\nbut still provide a coherent style and experience."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Though buttons and hyperlinks are distinct UI concepts, it is very common to\nhave hyperlinks that look like buttons. While this does not necessarily pose a\nUX problem, it makes the requirement for clear copy even move crucial in order\nto avoid user confusion and frustration."}),"\n",(0,jsx_runtime.jsx)(blocks_dist.Xz,{withToolbar:!0,of: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:"priority",children:"Priority"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Buttons are categorized into three hierarchical levels of priority in order to\nconvey importance, intent and hierarchy within a design composition."}),"\n",(0,jsx_runtime.jsxs)(blocks_dist.Xz,{withToolbar:!0,children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--primary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--secondary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--tertiary"})]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Generally speaking, a UI composition should have only a single ",(0,jsx_runtime.jsx)(_components.code,{children:"primary"})," button\nin order to convey to the user that other buttons are lower in the\ndecision-making hierarchy. By design, higher-priority buttons take more\nattention."]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"multiple-buttons",children:"Multiple Buttons"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["A UI composition might require more than one button at a time, so a ",(0,jsx_runtime.jsx)(_components.code,{children:"primary"}),"\npriority button can be accompanied by ",(0,jsx_runtime.jsx)(_components.code,{children:"secondary"})," and ",(0,jsx_runtime.jsx)(_components.code,{children:"tertiary"})," priority\nbuttons that perform less important actions."]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"text-only-buttons",children:"Text-only Buttons"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["When used exclusively, text-only buttons (",(0,jsx_runtime.jsx)(_components.code,{children:"tertiary"}),") are typically used for\nless-pronounced actions, where you do not want to divert attention from other UI\nelements, e.g., in cards."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Additionally, they can be used to reduce clutter in already busy compositions."}),"\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 button, and should be used for\nbuttons devoid of semantic meaning."]}),"\n",(0,jsx_runtime.jsxs)(blocks_dist.Xz,{withToolbar:!0,children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--brand-primary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--brand-secondary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--brand-tertiary"})]}),"\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.jsxs)(_components.p,{children:["When used in a composition, care should be taken that a ",(0,jsx_runtime.jsx)(_components.code,{children:"neutral"})," variant button\nis not perceived as disabled."]}),"\n",(0,jsx_runtime.jsxs)(blocks_dist.Xz,{withToolbar:!0,children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--neutral-primary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--neutral-secondary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--neutral-tertiary"})]}),"\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 (removing an item from the reading list) or have negative\nimplications (downgrading a subscription or unsubscribing from a mailing list)."]}),"\n",(0,jsx_runtime.jsxs)(blocks_dist.Xz,{withToolbar:!0,children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--danger-primary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--danger-secondary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--danger-tertiary"})]}),"\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 that an action has a positive\neffect."]}),"\n",(0,jsx_runtime.jsxs)(blocks_dist.Xz,{withToolbar:!0,children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--success-primary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--success-secondary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--success-tertiary"})]}),"\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. While it is available in all priorities, it should\nalways be used a primary button."]}),"\n",(0,jsx_runtime.jsx)(blocks_dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--sales-primary"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"size",children:"Size"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Buttons come in three sizes: ",(0,jsx_runtime.jsx)(_components.code,{children:"small"}),", ",(0,jsx_runtime.jsx)(_components.code,{children:"regular"})," (default) and ",(0,jsx_runtime.jsx)(_components.code,{children:"large"}),"."]}),"\n",(0,jsx_runtime.jsxs)(blocks_dist.Xz,{withToolbar:!0,children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--large"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--regular"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--small"})]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"full-width-buttons",children:"Full Width Buttons"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Buttons can be expanded to full width to fill its parent container."}),"\n",(0,jsx_runtime.jsx)(blocks_dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--full-width"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"sharp-edges",children:"Sharp Edges"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Buttons used in compound with other components - such as buttons adjoined with\nform inputs, or several buttons grouped together - often require sharp corners\non some or all edges. This can be achieved using the ",(0,jsx_runtime.jsx)(_components.code,{children:"sharp"})," prop."]}),"\n",(0,jsx_runtime.jsxs)(blocks_dist.Xz,{withToolbar:!0,children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--sharp-all"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--sharp-top"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--sharp-bottom"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--sharp-start"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--sharp-end"})]}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"state",children:"State"}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"busy",children:"Busy"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Used by setting the ",(0,jsx_runtime.jsx)(_components.code,{children:"state"})," prop to ",(0,jsx_runtime.jsx)(_components.code,{children:"busy"})," for time-intensive action, e.g.,\nloading additional content, in order indicate an action is in progress and to\nprovide feedback to the user."]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["In order to provide feedback to non-sighted users using assistive teach, the\n",(0,jsx_runtime.jsx)(_components.code,{children:"busyNotice"})," prop is required whenever the ",(0,jsx_runtime.jsx)(_components.code,{children:"state"})," prop is set to ",(0,jsx_runtime.jsx)(_components.code,{children:"busy"}),", and\nwill be announced by screen readers."]}),"\n",(0,jsx_runtime.jsxs)(blocks_dist.Xz,{withToolbar:!0,children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--busy-primary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--busy-secondary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--busy-tertiary"})]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"disabled",children:"Disabled"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Disable a button by setting the ",(0,jsx_runtime.jsx)(_components.code,{children:"state"})," prop to ",(0,jsx_runtime.jsx)(_components.code,{children:"disabled"}),", which handles\nstyling, semantics and behaviour."]}),"\n",(0,jsx_runtime.jsxs)(blocks_dist.Xz,{withToolbar:!0,children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--disabled-primary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--disabled-secondary"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--disabled-tertiary"})]}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"binary-state-button-ispressed",children:["Binary-State Button (",(0,jsx_runtime.jsx)(_components.code,{children:"isPressed"}),")"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Binary-state buttons have toggle-like functionality: pressed and unpressed,\nwhich is toggled between using the ",(0,jsx_runtime.jsx)(_components.code,{children:"isPressed"}),', for instance an author\'s\n"Follow" button.']}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The ",(0,jsx_runtime.jsx)(_components.code,{children:"isPressed"})," prop will set the value of the ",(0,jsx_runtime.jsx)(_components.code,{children:"aria-pressed"})," attribute to\neither ",(0,jsx_runtime.jsx)(_components.code,{children:"true"})," or ",(0,jsx_runtime.jsx)(_components.code,{children:"false"}),'. The sense that you are "following" is derived by\nscreen-reader users from ',(0,jsx_runtime.jsx)(_components.code,{children:"aria-pressed"})," being true."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Make sure to also provide visual indication of the change, e.g., by using\ndifferent icons or changing the text."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"icons",children:"Icons"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"It is possible to add icons, either at the start or end of a button, to help\nusers instinctively understand a button's action."}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Add Icons by setting an icon name in either the ",(0,jsx_runtime.jsx)(_components.code,{children:"startIcon"})," or ",(0,jsx_runtime.jsx)(_components.code,{children:"endIcon"})," props,\ne.g., ",(0,jsx_runtime.jsx)(_components.code,{children:'startIcon="facebook"'})]}),"\n",(0,jsx_runtime.jsx)(src.Z,{title:"CAUTION",children:(0,jsx_runtime.jsx)(_components.p,{children:"Icons have a specific, functional meaning. Only add them to buttons when they\nserve as clear visual indicators to the action taken by using the button,\nconsistent with their usage across the application. Do not use icons as\nillustrations or graphic enhancement."})}),"\n",(0,jsx_runtime.jsx)(blocks_dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsxs)("div",{style:{display:"flex",gap:"1rem"},children:[(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--icon-at-the-start"}),(0,jsx_runtime.jsx)(blocks_dist.oG,{id:"atoms-button--icon-at-the-end"})]})})]})}const Button_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,_Primary$parameters,_Primary$parameters2,_Secondary$parameters,_Secondary$parameters2,_Tertiary$parameters,_Tertiary$parameters2,_BrandPrimary$paramet,_BrandPrimary$paramet2,_BrandSecondary$param,_BrandSecondary$param2,_BrandTertiary$parame,_BrandTertiary$parame2,_NeutralPrimary$param,_NeutralPrimary$param2,_NeutralSecondary$par,_NeutralSecondary$par2,_NeutralTertiary$para,_NeutralTertiary$para2,_DangerPrimary$parame,_DangerPrimary$parame2,_DangerSecondary$para,_DangerSecondary$para2,_DangerTertiary$param,_DangerTertiary$param2,_SuccessPrimary$param,_SuccessPrimary$param2,_SuccessSecondary$par,_SuccessSecondary$par2,_SuccessTertiary$para,_SuccessTertiary$para2,_SalesPrimary$paramet,_SalesPrimary$paramet2,_Large$parameters,_Large$parameters2,_Regular$parameters,_Regular$parameters2,_Small$parameters,_Small$parameters2,_FullWidth$parameters,_FullWidth$parameters2,_SharpAll$parameters,_SharpAll$parameters2,_SharpTop$parameters,_SharpTop$parameters2,_SharpBottom$paramete,_SharpBottom$paramete2,_SharpStart$parameter,_SharpStart$parameter2,_SharpEnd$parameters,_SharpEnd$parameters2,_BusyPrimary$paramete,_BusyPrimary$paramete2,_BusySecondary$parame,_BusySecondary$parame2,_BusyTertiary$paramet,_BusyTertiary$paramet2,_DisabledPrimary$para,_DisabledPrimary$para2,_DisabledSecondary$pa,_DisabledSecondary$pa2,_DisabledTertiary$par,_DisabledTertiary$par2,_IconAtTheStart$param,_IconAtTheStart$param2,_IconAtTheEnd$paramet,_IconAtTheEnd$paramet2;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_Button.bS,title:"Atoms/Button",args:{as:src_Button.pL,children:"לחצו עלי",busyNotice:"Loading...",inlineStyle:{},styleExtend:[]},argTypes:{as:{description:"The HTML element (`string`) or React component the `<Button />` will be rendered as",table:{category:"Element Type",defaultValue:{summary:src_Button.pL},type:{summary:"React.ElementType"}}},children:{table:{category:"Generic Props"}},href:{description:"The url when used as an anchor. Only valid in conjunction with the `as` prop",control:"text",table:{category:"Element Type"}},stretch:{control:"boolean"},state:{description:"Indicates the current state of the button and affects various A11Y-related attributes",table:{category:"State"}},startIcon:{control:"text"},endIcon:{control:"text"},busyNotice:{table:{category:"State"}},isPressed:{table:{category:"State"}},inlineStyle:{table:{category:"Generic Props"}},styleExtend:{control:!1,table:{category:"Generic Props"}},type:{table:{category:"Element Type"}},ref:{control:!1,description:"`<Button />` forwards refs to the underlying DOM element in order to expose it to its ascendant components",table:{category:"Element Type",type:{summary:"React.ForwardedRef<T extends React.ElementType>"}}},"...restProps":{control:!1,description:"`<Button />` will pass any additional prop to the underlying html element, in a typesafe manner based on the value of the `as` prop",table:{category:"Element Type",type:{summary:void 0}}}},parameters:{docs:{page:Button_doc}}},Overview=args=>(0,jsx_runtime.jsx)(src_Button.ZP,_objectSpread({},args)),Primary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{priority:"primary",children:"Primary"}),Secondary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{priority:"secondary",children:"Secondary"}),Tertiary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{priority:"tertiary",children:"Tertiary"}),BrandPrimary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"brand",priority:"primary",children:"Brand Primary"}),BrandSecondary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"brand",priority:"secondary",children:"Brand Secondary"}),BrandTertiary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"brand",priority:"tertiary",children:"Brand Tertiary"}),NeutralPrimary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"neutral",priority:"primary",children:"Neutral Primary"}),NeutralSecondary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"neutral",priority:"secondary",children:"Neutral Secondary"}),NeutralTertiary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"neutral",priority:"tertiary",children:"Neutral Tertiary"}),DangerPrimary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"danger",priority:"primary",children:"Danger Primary"}),DangerSecondary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"danger",priority:"secondary",children:"Danger Secondary"}),DangerTertiary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"danger",priority:"tertiary",children:"Danger Tertiary"}),SuccessPrimary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"success",priority:"primary",children:"Success Primary"}),SuccessSecondary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"success",priority:"secondary",children:"Success Secondary"}),SuccessTertiary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"success",priority:"tertiary",children:"Success Tertiary"}),SalesPrimary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{variant:"sales",priority:"primary",children:"Sales Primary"}),Large=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{size:"large",children:"Large"}),Regular=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{size:"regular",children:"Regular"}),Small=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{size:"small",children:"Small"}),FullWidth=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{stretch:!0,children:"Full Width"}),SharpAll=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{sharp:"all",children:"Button with sharp edges"}),SharpTop=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{sharp:"top",children:"Button with sharp top edges"}),SharpBottom=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{sharp:"bottom",children:"Button with sharp bottom edges"}),SharpStart=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{sharp:"start",children:"Button with sharp edges at its start"}),SharpEnd=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{sharp:"end",children:"Button with sharp edges at its end"}),BusyPrimary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{state:"busy",priority:"primary",busyNotice:"loading...",children:"Busy Primary"}),BusySecondary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{state:"busy",priority:"secondary",busyNotice:"loading...",children:"Busy Secondary"}),BusyTertiary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{state:"busy",priority:"tertiary",busyNotice:"loading...",children:"Busy Tertiary"}),DisabledPrimary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{state:"disabled",priority:"primary",children:"Disabled Primary"}),DisabledSecondary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{state:"disabled",priority:"secondary",children:"Disabled Secondary"}),DisabledTertiary=_=>(0,jsx_runtime.jsx)(src_Button.ZP,{state:"disabled",priority:"tertiary",children:"Disabled Tertiary"}),IconAtTheStart=args=>(0,jsx_runtime.jsx)(src_Button.ZP,_objectSpread({startIcon:"facebook"},args));IconAtTheStart.args={children:"שתפו"};const IconAtTheEnd=args=>(0,jsx_runtime.jsx)(src_Button.ZP,_objectSpread({endIcon:"facebook"},args));IconAtTheEnd.args={children:"שתפו"};const Button_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 => <Button {...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)})}),Primary.parameters=_objectSpread(_objectSpread({},Primary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Primary$parameters=Primary.parameters)||void 0===_Primary$parameters?void 0:_Primary$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <Button priority="primary">Primary</Button>'},null===(_Primary$parameters2=Primary.parameters)||void 0===_Primary$parameters2||null===(_Primary$parameters2=_Primary$parameters2.docs)||void 0===_Primary$parameters2?void 0:_Primary$parameters2.source)})}),Secondary.parameters=_objectSpread(_objectSpread({},Secondary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Secondary$parameters=Secondary.parameters)||void 0===_Secondary$parameters?void 0:_Secondary$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <Button priority="secondary">Secondary</Button>'},null===(_Secondary$parameters2=Secondary.parameters)||void 0===_Secondary$parameters2||null===(_Secondary$parameters2=_Secondary$parameters2.docs)||void 0===_Secondary$parameters2?void 0:_Secondary$parameters2.source)})}),Tertiary.parameters=_objectSpread(_objectSpread({},Tertiary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Tertiary$parameters=Tertiary.parameters)||void 0===_Tertiary$parameters?void 0:_Tertiary$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <Button priority="tertiary">Tertiary</Button>'},null===(_Tertiary$parameters2=Tertiary.parameters)||void 0===_Tertiary$parameters2||null===(_Tertiary$parameters2=_Tertiary$parameters2.docs)||void 0===_Tertiary$parameters2?void 0:_Tertiary$parameters2.source)})}),BrandPrimary.parameters=_objectSpread(_objectSpread({},BrandPrimary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_BrandPrimary$paramet=BrandPrimary.parameters)||void 0===_BrandPrimary$paramet?void 0:_BrandPrimary$paramet.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="brand" priority="primary">\n    Brand Primary\n  </Button>'},null===(_BrandPrimary$paramet2=BrandPrimary.parameters)||void 0===_BrandPrimary$paramet2||null===(_BrandPrimary$paramet2=_BrandPrimary$paramet2.docs)||void 0===_BrandPrimary$paramet2?void 0:_BrandPrimary$paramet2.source)})}),BrandSecondary.parameters=_objectSpread(_objectSpread({},BrandSecondary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_BrandSecondary$param=BrandSecondary.parameters)||void 0===_BrandSecondary$param?void 0:_BrandSecondary$param.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="brand" priority="secondary">\n    Brand Secondary\n  </Button>'},null===(_BrandSecondary$param2=BrandSecondary.parameters)||void 0===_BrandSecondary$param2||null===(_BrandSecondary$param2=_BrandSecondary$param2.docs)||void 0===_BrandSecondary$param2?void 0:_BrandSecondary$param2.source)})}),BrandTertiary.parameters=_objectSpread(_objectSpread({},BrandTertiary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_BrandTertiary$parame=BrandTertiary.parameters)||void 0===_BrandTertiary$parame?void 0:_BrandTertiary$parame.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="brand" priority="tertiary">\n    Brand Tertiary\n  </Button>'},null===(_BrandTertiary$parame2=BrandTertiary.parameters)||void 0===_BrandTertiary$parame2||null===(_BrandTertiary$parame2=_BrandTertiary$parame2.docs)||void 0===_BrandTertiary$parame2?void 0:_BrandTertiary$parame2.source)})}),NeutralPrimary.parameters=_objectSpread(_objectSpread({},NeutralPrimary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_NeutralPrimary$param=NeutralPrimary.parameters)||void 0===_NeutralPrimary$param?void 0:_NeutralPrimary$param.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="neutral" priority="primary">\n    Neutral Primary\n  </Button>'},null===(_NeutralPrimary$param2=NeutralPrimary.parameters)||void 0===_NeutralPrimary$param2||null===(_NeutralPrimary$param2=_NeutralPrimary$param2.docs)||void 0===_NeutralPrimary$param2?void 0:_NeutralPrimary$param2.source)})}),NeutralSecondary.parameters=_objectSpread(_objectSpread({},NeutralSecondary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_NeutralSecondary$par=NeutralSecondary.parameters)||void 0===_NeutralSecondary$par?void 0:_NeutralSecondary$par.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="neutral" priority="secondary">\n    Neutral Secondary\n  </Button>'},null===(_NeutralSecondary$par2=NeutralSecondary.parameters)||void 0===_NeutralSecondary$par2||null===(_NeutralSecondary$par2=_NeutralSecondary$par2.docs)||void 0===_NeutralSecondary$par2?void 0:_NeutralSecondary$par2.source)})}),NeutralTertiary.parameters=_objectSpread(_objectSpread({},NeutralTertiary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_NeutralTertiary$para=NeutralTertiary.parameters)||void 0===_NeutralTertiary$para?void 0:_NeutralTertiary$para.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="neutral" priority="tertiary">\n    Neutral Tertiary\n  </Button>'},null===(_NeutralTertiary$para2=NeutralTertiary.parameters)||void 0===_NeutralTertiary$para2||null===(_NeutralTertiary$para2=_NeutralTertiary$para2.docs)||void 0===_NeutralTertiary$para2?void 0:_NeutralTertiary$para2.source)})}),DangerPrimary.parameters=_objectSpread(_objectSpread({},DangerPrimary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DangerPrimary$parame=DangerPrimary.parameters)||void 0===_DangerPrimary$parame?void 0:_DangerPrimary$parame.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="danger" priority="primary">\n    Danger Primary\n  </Button>'},null===(_DangerPrimary$parame2=DangerPrimary.parameters)||void 0===_DangerPrimary$parame2||null===(_DangerPrimary$parame2=_DangerPrimary$parame2.docs)||void 0===_DangerPrimary$parame2?void 0:_DangerPrimary$parame2.source)})}),DangerSecondary.parameters=_objectSpread(_objectSpread({},DangerSecondary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DangerSecondary$para=DangerSecondary.parameters)||void 0===_DangerSecondary$para?void 0:_DangerSecondary$para.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="danger" priority="secondary">\n    Danger Secondary\n  </Button>'},null===(_DangerSecondary$para2=DangerSecondary.parameters)||void 0===_DangerSecondary$para2||null===(_DangerSecondary$para2=_DangerSecondary$para2.docs)||void 0===_DangerSecondary$para2?void 0:_DangerSecondary$para2.source)})}),DangerTertiary.parameters=_objectSpread(_objectSpread({},DangerTertiary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DangerTertiary$param=DangerTertiary.parameters)||void 0===_DangerTertiary$param?void 0:_DangerTertiary$param.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="danger" priority="tertiary">\n    Danger Tertiary\n  </Button>'},null===(_DangerTertiary$param2=DangerTertiary.parameters)||void 0===_DangerTertiary$param2||null===(_DangerTertiary$param2=_DangerTertiary$param2.docs)||void 0===_DangerTertiary$param2?void 0:_DangerTertiary$param2.source)})}),SuccessPrimary.parameters=_objectSpread(_objectSpread({},SuccessPrimary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_SuccessPrimary$param=SuccessPrimary.parameters)||void 0===_SuccessPrimary$param?void 0:_SuccessPrimary$param.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="success" priority="primary">\n    Success Primary\n  </Button>'},null===(_SuccessPrimary$param2=SuccessPrimary.parameters)||void 0===_SuccessPrimary$param2||null===(_SuccessPrimary$param2=_SuccessPrimary$param2.docs)||void 0===_SuccessPrimary$param2?void 0:_SuccessPrimary$param2.source)})}),SuccessSecondary.parameters=_objectSpread(_objectSpread({},SuccessSecondary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_SuccessSecondary$par=SuccessSecondary.parameters)||void 0===_SuccessSecondary$par?void 0:_SuccessSecondary$par.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="success" priority="secondary">\n    Success Secondary\n  </Button>'},null===(_SuccessSecondary$par2=SuccessSecondary.parameters)||void 0===_SuccessSecondary$par2||null===(_SuccessSecondary$par2=_SuccessSecondary$par2.docs)||void 0===_SuccessSecondary$par2?void 0:_SuccessSecondary$par2.source)})}),SuccessTertiary.parameters=_objectSpread(_objectSpread({},SuccessTertiary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_SuccessTertiary$para=SuccessTertiary.parameters)||void 0===_SuccessTertiary$para?void 0:_SuccessTertiary$para.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="success" priority="tertiary">\n    Success Tertiary\n  </Button>'},null===(_SuccessTertiary$para2=SuccessTertiary.parameters)||void 0===_SuccessTertiary$para2||null===(_SuccessTertiary$para2=_SuccessTertiary$para2.docs)||void 0===_SuccessTertiary$para2?void 0:_SuccessTertiary$para2.source)})}),SalesPrimary.parameters=_objectSpread(_objectSpread({},SalesPrimary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_SalesPrimary$paramet=SalesPrimary.parameters)||void 0===_SalesPrimary$paramet?void 0:_SalesPrimary$paramet.docs),{},{source:_objectSpread({originalSource:'_ => <Button variant="sales" priority="primary">\n    Sales Primary\n  </Button>'},null===(_SalesPrimary$paramet2=SalesPrimary.parameters)||void 0===_SalesPrimary$paramet2||null===(_SalesPrimary$paramet2=_SalesPrimary$paramet2.docs)||void 0===_SalesPrimary$paramet2?void 0:_SalesPrimary$paramet2.source)})}),Large.parameters=_objectSpread(_objectSpread({},Large.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Large$parameters=Large.parameters)||void 0===_Large$parameters?void 0:_Large$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <Button size="large">Large</Button>'},null===(_Large$parameters2=Large.parameters)||void 0===_Large$parameters2||null===(_Large$parameters2=_Large$parameters2.docs)||void 0===_Large$parameters2?void 0:_Large$parameters2.source)})}),Regular.parameters=_objectSpread(_objectSpread({},Regular.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Regular$parameters=Regular.parameters)||void 0===_Regular$parameters?void 0:_Regular$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <Button size="regular">Regular</Button>'},null===(_Regular$parameters2=Regular.parameters)||void 0===_Regular$parameters2||null===(_Regular$parameters2=_Regular$parameters2.docs)||void 0===_Regular$parameters2?void 0:_Regular$parameters2.source)})}),Small.parameters=_objectSpread(_objectSpread({},Small.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Small$parameters=Small.parameters)||void 0===_Small$parameters?void 0:_Small$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <Button size="small">Small</Button>'},null===(_Small$parameters2=Small.parameters)||void 0===_Small$parameters2||null===(_Small$parameters2=_Small$parameters2.docs)||void 0===_Small$parameters2?void 0:_Small$parameters2.source)})}),FullWidth.parameters=_objectSpread(_objectSpread({},FullWidth.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_FullWidth$parameters=FullWidth.parameters)||void 0===_FullWidth$parameters?void 0:_FullWidth$parameters.docs),{},{source:_objectSpread({originalSource:"_ => <Button stretch={true}>Full Width</Button>"},null===(_FullWidth$parameters2=FullWidth.parameters)||void 0===_FullWidth$parameters2||null===(_FullWidth$parameters2=_FullWidth$parameters2.docs)||void 0===_FullWidth$parameters2?void 0:_FullWidth$parameters2.source)})}),SharpAll.parameters=_objectSpread(_objectSpread({},SharpAll.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_SharpAll$parameters=SharpAll.parameters)||void 0===_SharpAll$parameters?void 0:_SharpAll$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <Button sharp="all">Button with sharp edges</Button>'},null===(_SharpAll$parameters2=SharpAll.parameters)||void 0===_SharpAll$parameters2||null===(_SharpAll$parameters2=_SharpAll$parameters2.docs)||void 0===_SharpAll$parameters2?void 0:_SharpAll$parameters2.source)})}),SharpTop.parameters=_objectSpread(_objectSpread({},SharpTop.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_SharpTop$parameters=SharpTop.parameters)||void 0===_SharpTop$parameters?void 0:_SharpTop$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <Button sharp="top">Button with sharp top edges</Button>'},null===(_SharpTop$parameters2=SharpTop.parameters)||void 0===_SharpTop$parameters2||null===(_SharpTop$parameters2=_SharpTop$parameters2.docs)||void 0===_SharpTop$parameters2?void 0:_SharpTop$parameters2.source)})}),SharpBottom.parameters=_objectSpread(_objectSpread({},SharpBottom.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_SharpBottom$paramete=SharpBottom.parameters)||void 0===_SharpBottom$paramete?void 0:_SharpBottom$paramete.docs),{},{source:_objectSpread({originalSource:'_ => <Button sharp="bottom">Button with sharp bottom edges</Button>'},null===(_SharpBottom$paramete2=SharpBottom.parameters)||void 0===_SharpBottom$paramete2||null===(_SharpBottom$paramete2=_SharpBottom$paramete2.docs)||void 0===_SharpBottom$paramete2?void 0:_SharpBottom$paramete2.source)})}),SharpStart.parameters=_objectSpread(_objectSpread({},SharpStart.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_SharpStart$parameter=SharpStart.parameters)||void 0===_SharpStart$parameter?void 0:_SharpStart$parameter.docs),{},{source:_objectSpread({originalSource:'_ => <Button sharp="start">Button with sharp edges at its start</Button>'},null===(_SharpStart$parameter2=SharpStart.parameters)||void 0===_SharpStart$parameter2||null===(_SharpStart$parameter2=_SharpStart$parameter2.docs)||void 0===_SharpStart$parameter2?void 0:_SharpStart$parameter2.source)})}),SharpEnd.parameters=_objectSpread(_objectSpread({},SharpEnd.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_SharpEnd$parameters=SharpEnd.parameters)||void 0===_SharpEnd$parameters?void 0:_SharpEnd$parameters.docs),{},{source:_objectSpread({originalSource:'_ => <Button sharp="end">Button with sharp edges at its end</Button>'},null===(_SharpEnd$parameters2=SharpEnd.parameters)||void 0===_SharpEnd$parameters2||null===(_SharpEnd$parameters2=_SharpEnd$parameters2.docs)||void 0===_SharpEnd$parameters2?void 0:_SharpEnd$parameters2.source)})}),BusyPrimary.parameters=_objectSpread(_objectSpread({},BusyPrimary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_BusyPrimary$paramete=BusyPrimary.parameters)||void 0===_BusyPrimary$paramete?void 0:_BusyPrimary$paramete.docs),{},{source:_objectSpread({originalSource:'_ => <Button state="busy" priority="primary" busyNotice="loading...">\n    Busy Primary\n  </Button>'},null===(_BusyPrimary$paramete2=BusyPrimary.parameters)||void 0===_BusyPrimary$paramete2||null===(_BusyPrimary$paramete2=_BusyPrimary$paramete2.docs)||void 0===_BusyPrimary$paramete2?void 0:_BusyPrimary$paramete2.source)})}),BusySecondary.parameters=_objectSpread(_objectSpread({},BusySecondary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_BusySecondary$parame=BusySecondary.parameters)||void 0===_BusySecondary$parame?void 0:_BusySecondary$parame.docs),{},{source:_objectSpread({originalSource:'_ => <Button state="busy" priority="secondary" busyNotice="loading...">\n    Busy Secondary\n  </Button>'},null===(_BusySecondary$parame2=BusySecondary.parameters)||void 0===_BusySecondary$parame2||null===(_BusySecondary$parame2=_BusySecondary$parame2.docs)||void 0===_BusySecondary$parame2?void 0:_BusySecondary$parame2.source)})}),BusyTertiary.parameters=_objectSpread(_objectSpread({},BusyTertiary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_BusyTertiary$paramet=BusyTertiary.parameters)||void 0===_BusyTertiary$paramet?void 0:_BusyTertiary$paramet.docs),{},{source:_objectSpread({originalSource:'_ => <Button state="busy" priority="tertiary" busyNotice="loading...">\n    Busy Tertiary\n  </Button>'},null===(_BusyTertiary$paramet2=BusyTertiary.parameters)||void 0===_BusyTertiary$paramet2||null===(_BusyTertiary$paramet2=_BusyTertiary$paramet2.docs)||void 0===_BusyTertiary$paramet2?void 0:_BusyTertiary$paramet2.source)})}),DisabledPrimary.parameters=_objectSpread(_objectSpread({},DisabledPrimary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DisabledPrimary$para=DisabledPrimary.parameters)||void 0===_DisabledPrimary$para?void 0:_DisabledPrimary$para.docs),{},{source:_objectSpread({originalSource:'_ => <Button state="disabled" priority="primary">\n    Disabled Primary\n  </Button>'},null===(_DisabledPrimary$para2=DisabledPrimary.parameters)||void 0===_DisabledPrimary$para2||null===(_DisabledPrimary$para2=_DisabledPrimary$para2.docs)||void 0===_DisabledPrimary$para2?void 0:_DisabledPrimary$para2.source)})}),DisabledSecondary.parameters=_objectSpread(_objectSpread({},DisabledSecondary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DisabledSecondary$pa=DisabledSecondary.parameters)||void 0===_DisabledSecondary$pa?void 0:_DisabledSecondary$pa.docs),{},{source:_objectSpread({originalSource:'_ => <Button state="disabled" priority="secondary">\n    Disabled Secondary\n  </Button>'},null===(_DisabledSecondary$pa2=DisabledSecondary.parameters)||void 0===_DisabledSecondary$pa2||null===(_DisabledSecondary$pa2=_DisabledSecondary$pa2.docs)||void 0===_DisabledSecondary$pa2?void 0:_DisabledSecondary$pa2.source)})}),DisabledTertiary.parameters=_objectSpread(_objectSpread({},DisabledTertiary.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_DisabledTertiary$par=DisabledTertiary.parameters)||void 0===_DisabledTertiary$par?void 0:_DisabledTertiary$par.docs),{},{source:_objectSpread({originalSource:'_ => <Button state="disabled" priority="tertiary">\n    Disabled Tertiary\n  </Button>'},null===(_DisabledTertiary$par2=DisabledTertiary.parameters)||void 0===_DisabledTertiary$par2||null===(_DisabledTertiary$par2=_DisabledTertiary$par2.docs)||void 0===_DisabledTertiary$par2?void 0:_DisabledTertiary$par2.source)})}),IconAtTheStart.parameters=_objectSpread(_objectSpread({},IconAtTheStart.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_IconAtTheStart$param=IconAtTheStart.parameters)||void 0===_IconAtTheStart$param?void 0:_IconAtTheStart$param.docs),{},{source:_objectSpread({originalSource:'args => <Button startIcon="facebook" {...args} />'},null===(_IconAtTheStart$param2=IconAtTheStart.parameters)||void 0===_IconAtTheStart$param2||null===(_IconAtTheStart$param2=_IconAtTheStart$param2.docs)||void 0===_IconAtTheStart$param2?void 0:_IconAtTheStart$param2.source)})}),IconAtTheEnd.parameters=_objectSpread(_objectSpread({},IconAtTheEnd.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_IconAtTheEnd$paramet=IconAtTheEnd.parameters)||void 0===_IconAtTheEnd$paramet?void 0:_IconAtTheEnd$paramet.docs),{},{source:_objectSpread({originalSource:'args => <Button endIcon="facebook" {...args} />'},null===(_IconAtTheEnd$paramet2=IconAtTheEnd.parameters)||void 0===_IconAtTheEnd$paramet2||null===(_IconAtTheEnd$paramet2=_IconAtTheEnd$paramet2.docs)||void 0===_IconAtTheEnd$paramet2?void 0:_IconAtTheEnd$paramet2.source)})})},"../s-story-callout/src/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>src});var 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");const c_wrapper={backgroundColor:"jmyBGg",borderTopLeftRadius:"gvQKzB",borderTopRightRadius:"gXtGmO",borderBottomRightRadius:"gGmREU",borderBottomLeftRadius:"ia_DRrH",overflowX:"dUvWpK",overflowY:"hRLVFh",position:"cjScYX",letterSpacing:"iZHebp",paddingTop:"jWWtke",paddingBottom:"bnHxUw",paddingInlineStart:"dwXqlO",paddingInlineEnd:"kwGEcy"},c_strong={backgroundColor:"gtUqwH",borderTopLeftRadius:"gQJVfF",borderTopRightRadius:"bnguzQ",borderBottomRightRadius:"fBfCSu",borderBottomLeftRadius:"bzskLL",color:"hugNVC",marginInlineEnd:"joUZpP",paddingInlineStart:"ddynka",paddingInlineEnd:"bWNKbL",fontSize:"fyHdVr",lineHeight:"iKTruj"},c_x={aspectRatio:"ldVxdb",backgroundColor:"kfThfC",borderTopLeftRadius:"ctWdVF",borderTopRightRadius:"jkGfDR",borderBottomRightRadius:"bSTogt",borderBottomLeftRadius:"hSDpeY",color:"kCxIXX",display:"cpOcAb",fontWeight:"inxVzO",lineHeight:"egGyMq",marginInlineEnd:"joUZpP",paddingInlineStart:"kQDwxQ",paddingInlineEnd:"cfEHVR",transform:"gEhxlz"};function StoryCallout(_ref){let{children=null,inlineStyle,styleExtend=[],title}=_ref;return(0,jsx_runtime.jsxs)("aside",{className:(0,style9.Z)(c_wrapper,...styleExtend),style:inlineStyle,children:[title&&(0,jsx_runtime.jsxs)("strong",{className:`sb-unstyled  ${(0,style9.Z)(c_strong)}`,children:[(0,jsx_runtime.jsx)("span",{className:(0,style9.Z)(c_x),children:"✗"}),title,":"]}),title&&" ",children]})}try{StoryCallout.displayName="StoryCallout",StoryCallout.__docgenInfo={description:"",displayName:"StoryCallout",props:{children:{defaultValue:{value:"null"},description:"The Children to be rendered inside `<StoryCallout>`",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 MyStoryCallout(props) {\n  const inlineStyle = {\n    '--color-based-on-prop': props.color,\n  },\n\n  return (\n   <StoryCallout\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<StoryCallout styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}},title:{defaultValue:null,description:"",name:"title",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../s-story-callout/src/StoryCallout.tsx#StoryCallout"]={docgenInfo:StoryCallout.__docgenInfo,name:"StoryCallout",path:"../s-story-callout/src/StoryCallout.tsx#StoryCallout"})}catch(__react_docgen_typescript_loader_error){}const src=StoryCallout},"../../../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")}}}]);