{
  "version": 3,
  "sources": ["../src/UiCheckbox.tsx", "../src/assets/checked.svg", "../src/assets/indeterminate.svg", "../src/UiCheckbox.css.ts", "../src/UiCheckbox.hooks.ts"],
  "sourcesContent": ["import { CSSProperties, PropsWithChildren, ReactNode } from 'react';\n\nimport clsx from 'clsx';\n\nimport { ReactComponent as CheckedIcon } from './assets/checked.svg';\nimport { ReactComponent as IndeterminateIcon } from './assets/indeterminate.svg';\n\nimport * as styles from './UiCheckbox.css';\n\nimport { useLifecycle } from './UiCheckbox.hooks';\n\nexport type Props = PropsWithChildren<{\n  /**\n   * User defined CSS class which be assigned to the root element.\n   */\n  className?: string;\n  /**\n   * See [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/id)\n   */\n  id?: string;\n  /**\n   * See [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input/checkbox#checked)\n   */\n  isChecked?: boolean;\n  /**\n   * See [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#disabled)\n   */\n  isDisabled?: boolean;\n  /**\n   * See [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n   */\n  isIndeterminate?: boolean;\n  /**\n   * See [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#name)\n   */\n  name?: string;\n  onChange?: (isChecked: boolean) => void;\n  /**\n   * Defines `data-testid` attribute on the root element with the given value.\n   *\n   * Can be used for testing purposes.\n   */\n  testId?: string;\n  /**\n   * Defines `data-track-id` attribute on the root element with the given value.\n   *\n   * Can be used for analytics purposes.\n   */\n  trackId?: string;\n  /**\n   * User defined CSS styles which be assigned to the root element.\n   */\n  style?: CSSProperties;\n}>;\n\nexport function UiCheckbox({\n  children,\n  className,\n  id,\n  isChecked = false,\n  isDisabled,\n  isIndeterminate = false,\n  name,\n  onChange,\n  testId,\n  trackId,\n  style,\n}: Props): ReactNode {\n  const [ref, handleChange] = useLifecycle({ isIndeterminate, onChange });\n\n  // NOTE: The checked icon is visible when a user hover over the element.\n  const Icon = isIndeterminate ? IndeterminateIcon : CheckedIcon;\n\n  const [inputTestId, contentTestId] =\n    testId == null ? [] : [`${testId}--input`, `${testId}--content`];\n\n  return (\n    <label\n      className={clsx(styles.root, className)}\n      data-testid={testId}\n      data-track-id={trackId}\n      htmlFor={id}\n      style={style}\n    >\n      <input\n        checked={isChecked}\n        className={styles.input}\n        data-testid={inputTestId}\n        disabled={isDisabled}\n        id={id}\n        name={name}\n        onChange={handleChange}\n        ref={ref}\n        type=\"checkbox\"\n      />\n      <span className={styles.indicator}>\n        <Icon className={styles.icon} />\n      </span>\n      <div className={styles.content} data-testid={contentTestId}>\n        {children}\n      </div>\n    </label>\n  );\n}\n\nif (import.meta.env.DEV) {\n  UiCheckbox.displayName = 'ui-checkbox(UiCheckbox)';\n}\n", "import svgUrl from \"ni:svgr;fYWdCjCCTh-1HG1P3aBOWg10nnVtunei3YkNoBPyrGA\";\nexport default svgUrl;\nimport * as React from \"react\";\nimport { memo } from \"react\";\nconst SvgChecked = props => <svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" {...props}><path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M12.644 4.235a1 1 0 0 1 .12 1.41l-5.052 6a1 1 0 0 1-1.488.046L4.277 9.605a1 1 0 0 1 1.446-1.381l1.178 1.28 4.334-5.148a1 1 0 0 1 1.41-.12Z\" fill=\"currentColor\" /></svg>;\nconst Memo = memo(SvgChecked);\nexport { Memo as ReactComponent };", "import svgUrl from \"ni:svgr;pXbMk6_nUyb5scOwB6ruCqCnhNfChUNlxD3gwCxjpmk\";\nexport default svgUrl;\nimport * as React from \"react\";\nimport { memo } from \"react\";\nconst SvgIndeterminate = props => <svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" {...props}><rect x={4} y={7} width={8} height={2} rx={1} fill=\"currentColor\" /></svg>;\nconst Memo = memo(SvgIndeterminate);\nexport { Memo as ReactComponent };", "import 'src/UiCheckbox.css.ts.vanilla.css?source=#H4sIAAAAAAAAA8VWyW7bMBC95yt4jNFOYblJAzCX9EsMShxJ09CkQA69oEi_vdBCL4kSy0mXmzScebMvD0bt0AvODUDhVo2zaDncXz2M0sXPKyG-sMqjUctIy6LG4jF32-VSFY9xXc07BiFKZ1mKtfLXAB1ESwgAQdkAAT2VAAFXBLkzGrJFzzC774QNMqOH0KiCbHUZzKnsAMi4ZWCvbCidX10GeCo7ADYuEJOzUng0immNPV1TaIzaSVEa3Pak9gs0eSwGAbfpH37EwFTuoHCWsY1WxxlYee4ZlKHKAjGughQFWkbfP1SqkSJbNIOGwhnnT5zqKAESNEDjaaX8brC-iD60Eo2jBPr0dlqzIa0Hv1UenIk8-M2ukWKeslfy_mdDmuv9X41U1enxnEqpKajcoB50J6s1lioangCxGCRHsvIi-MfxfTXwrbwUczEXKrI78TD7ltKRnDxQcuc1eimyZiuCM6THctUzdQZ5ZwBqt0Y_OwYArzTFIMXNHlgVj5V30WqYUAQdtAqpywaJrrQb5dFyqu2uKgDXbcNLYZ1NWW5ZU_6NOVamo1ftA0CpAgNk7y61uew8n5LXSe5bjOyVAfh-exrN10Wep6J0RQyzc832utTZSqdwLTsq6s9CktXI6FdkFeNMfPpjoSjJmIN9CWpqVN6UvrT8Pl4EmbSOr_dDYvZ_gpizTcN1rGOnlGV2-3dieDRAJ3k_Ml8_OGE-EIRnU2myq_-qCg6W313u7N30hAcsnNVpdZ_tmm7mwIa4JjvFVxfZkEUpFpespl7LYopJXwdFaUvevNiSA-UMzk26K9sbqfJuI0XWA8XQnntosODjXTWyeIRoG7Q0rXBNWqM9ug4PT2gMNYHCsN5rYuzOSWzhN141l_Xerylujd42T78BshV1A5sLAAA';\nexport var content = 'tabula_ui_checkbox__ackuvg4';\nexport var icon = 'tabula_ui_checkbox__ackuvg3';\nexport var indicator = 'tabula_ui_checkbox__ackuvg2';\nexport var input = 'tabula_ui_checkbox__ackuvg1';\nexport var root = 'tabula_ui_checkbox__ackuvg0';", "import { ChangeEventHandler, RefObject, useCallback, useEffect, useRef } from 'react';\n\ntype Options = {\n  isIndeterminate: boolean;\n  onChange?: (isChecked: boolean) => void;\n};\n\ntype Result = [RefObject<HTMLInputElement | null>, ChangeEventHandler<HTMLInputElement>];\n\nfunction setIndeterminate(ref: RefObject<HTMLInputElement | null>, isIndeterminate: boolean) {\n  if (ref.current != null) {\n    ref.current.indeterminate = isIndeterminate;\n  }\n}\n\nexport function useLifecycle({ isIndeterminate, onChange }: Options): Result {\n  const ref = useRef<HTMLInputElement>(null);\n\n  // NOTE: We use `useEffect` to set `indeterminate` property on initial render.\n  //\n  //       And we should update `indeterminate` property on each render, because we can have case, when `isIndeterminate`\n  //       will not change after click, but `indeterminate` property will be changed by the browser after handling\n  //       click.\n  /* eslint-disable react-hooks/exhaustive-deps */\n  useEffect(() => {\n    setIndeterminate(ref, isIndeterminate);\n  }, []);\n  /* eslint-enable */\n\n  setIndeterminate(ref, isIndeterminate);\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n    ({ target }) => {\n      onChange?.(target.checked);\n    },\n    [onChange],\n  );\n\n  return [ref, handleChange];\n}\n"],
  "mappings": ";AAEA,OAAO,UAAU;;;ACAjB,YAAY,WAAW;AACvB,SAAS,YAAY;AAC8E;AAAnG,IAAM,aAAa,WAAS,oBAAC,SAAI,SAAQ,aAAY,OAAM,8BAA8B,GAAG,OAAO,8BAAC,UAAK,UAAS,WAAU,UAAS,WAAU,GAAE,8IAA6I,MAAK,gBAAe,GAAE;AACpT,IAAM,OAAO,KAAK,UAAU;;;ACH5B,YAAYA,YAAW;AACvB,SAAS,QAAAC,aAAY;AACoF,gBAAAC,YAAA;AAAzG,IAAM,mBAAmB,WAAS,gBAAAC,KAAC,SAAI,SAAQ,aAAY,OAAM,8BAA8B,GAAG,OAAO,0BAAAA,KAAC,UAAK,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAK,gBAAe,GAAE;AAC7K,IAAMC,QAAOC,MAAK,gBAAgB;;;ACJ3B,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,OAAO;;;ACLlB,SAAwC,aAAa,WAAW,cAAc;AAS9E,SAAS,iBAAiB,KAAyC,iBAA0B;AAC3F,MAAI,IAAI,WAAW,MAAM;AACvB,QAAI,QAAQ,gBAAgB;AAAA,EAC9B;AACF;AAEO,SAAS,aAAa,EAAE,iBAAiB,SAAS,GAAoB;AAC3E,QAAM,MAAM,OAAyB,IAAI;AAQzC,YAAU,MAAM;AACd,qBAAiB,KAAK,eAAe;AAAA,EACvC,GAAG,CAAC,CAAC;AAGL,mBAAiB,KAAK,eAAe;AAErC,QAAM,eAAqD;AAAA,IACzD,CAAC,EAAE,OAAO,MAAM;AACd,iBAAW,OAAO,OAAO;AAAA,IAC3B;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,CAAC,KAAK,YAAY;AAC3B;;;AJsCI,SAOE,OAAAC,MAPF;AAtBG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,KAAK,YAAY,IAAI,aAAa,EAAE,iBAAiB,SAAS,CAAC;AAGtE,QAAM,OAAO,kBAAkBC,QAAoB;AAEnD,QAAM,CAAC,aAAa,aAAa,IAC/B,UAAU,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM,WAAW,GAAG,MAAM,WAAW;AAEjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAY,MAAM,SAAS;AAAA,MACtC,eAAa;AAAA,MACb,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,wBAAAD;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAkB;AAAA,YAClB,eAAa;AAAA,YACb,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA,MAAK;AAAA;AAAA,QACP;AAAA,QACA,gBAAAA,KAAC,UAAK,WAAkB,WACtB,0BAAAA,KAAC,QAAK,WAAkB,MAAM,GAChC;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAkB,SAAS,eAAa,eAC1C,UACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAI,YAAY,IAAI,KAAK;AACvB,aAAW,cAAc;AAC3B;",
  "names": ["React", "memo", "jsx", "jsx", "Memo", "memo", "jsx", "Memo"]
}